# Fonts and colors of 168 top websites > The fonts and colors of 168 top websites, measured in October 2026: Inter on 26%, custom type on 54%, 44% in dark mode. Charts, method and a free CSV. Canonical page: https://sitepeel.dev/reports/top-website-fonts-and-colors/ We measured the live sites of 168 well-known brands in October 2026. Here is what they use for type, color and buttons. Published: 2026-10-28 Free website tool for this task: [DESIGN.md generator](https://sitepeel.dev/design-md/index.md) (https://sitepeel.dev/design-md/) ## In short - Inter is the most common font: 43 of 168 sites use it - 54% set their main text in a bought or custom typeface - 44% open in dark mode; 27 of 37 developer tools do - Blue is the top brand color; 36% of main buttons are pills ## The short answer The most common website font in 2026 is Inter: 43 of the 168 brand sites we measured use it, 30 for their main text. But most brands pay for their type: 54% set their text in a commercial or custom typeface. Blue is the most common brand color, and 44% of the sites open in dark mode. 168 brand websites, measured October 21 to October 26, 2026 | Finding | Sites | Share | | --- | --- | --- | | Use Inter somewhere | 43 | 26% | | Main text in a commercial or custom font | 91 | 54% | | Open in dark mode | 74 | 44% | | Blue as the main accent color | 45 | 27% | | Pill-shaped main button | 53 of 146 | 36% | | Tighter letter spacing on the headline | 111 of 165 | 67% | | No drop shadows at all | 65 | 39% | | A monospace font for code or labels | 43 | 26% | | A serif headline | 20 | 12% | ## What fonts do websites use in 2026? Big brands mostly buy their type, or have it drawn. Inter is the one free font that shows up again and again: 30 sites set their main text in it. Only 11 rely on the device’s own font. The font that sets most of the text, 168 sites | Main text font | What it is | Sites | | --- | --- | --- | | Commercial or custom | Bought from a foundry or drawn for the brand | 91 (54%) | | Free font | Google Fonts, Fontshare or open source, not Inter | 36 (21%) | | Inter | The free sans serif most apps use | 30 (18%) | | System font | The device’s own font, nothing to load | 11 (7%) | Good to know: Most of the custom fonts are used by one brand each. That is the point of them. ## The most common website fonts Counted wherever a font is used: main text, headlines, labels or code. Vercel’s free Geist and Geist Mono come next. System fonts are left out here. 24% of the sites load three or more font families. Named fonts used by three or more of the 168 sites | Font | Sites | Share | | --- | --- | --- | | Inter | 43 | 26% | | Geist Mono | 7 | 4% | | Geist | 6 | 4% | | ABC Favorit | 3 | 2% | | Apercu | 3 | 2% | | Charlie | 3 | 2% | | Graphik | 3 | 2% | | IBM Plex Mono | 3 | 2% | | JetBrains Mono | 3 | 2% | | Matter | 3 | 2% | | Roboto | 3 | 2% | | Saans | 3 | 2% | | Serrif | 3 | 2% | ## How big are headlines and body text? The median headline is 60px on a laptop (half the sites sit between 48 and 72px) and 38px on a phone. Body text is most often 16px (47%). 67% tighten the headline’s letter spacing, typically to -0.022em. Headline (h1) size on a 1440px screen, 165 sites | Headline size | Sites | Share | | --- | --- | --- | | Under 40px | 18 | 11% | | 40-55px | 42 | 25% | | 56-71px | 55 | 33% | | 72-95px | 33 | 20% | | 96px or more | 17 | 10% | ## What colors do brands use on their websites? Blue leads, tied with brands whose main accent is black, white or gray, like Vercel, Linear and Nike. Light sites mostly use pure white (66% of them), but only 23% of dark sites use pure black: most pick a near-black. Main accent color (buttons, links or logo), 168 sites | Accent color | Sites | Share | | --- | --- | --- | | Black, white or gray | 45 | 27% | | Blue | 45 | 27% | | Orange | 18 | 11% | | Red | 14 | 8% | | Purple | 12 | 7% | | Teal | 12 | 7% | | Green | 10 | 6% | | Yellow | 8 | 5% | | Pink | 4 | 2% | ## How many websites use dark mode? 74 of 168 sites (44%) open in dark mode. It depends on who they sell to: 27 of 37 developer tools are dark, and none of the 11 marketing and analytics tools are. Dark mode and the most common main font, by category | Category | Sites | Dark by default | Most common font | | --- | --- | --- | --- | | AI | 14 | 9 (64%) | Basier Square | | Developer tools | 37 | 27 (73%) | Inter | | UI and animation libraries | 7 | 7 (100%) | All different | | SaaS and productivity | 37 | 8 (22%) | Inter | | Fintech and payments | 13 | 3 (23%) | Inter | | Marketing and analytics | 11 | 0 (0%) | All different | | Design tools and site builders | 13 | 7 (54%) | Inter | | Inspiration | 7 | 2 (29%) | All different | | E-commerce and brands | 12 | 3 (25%) | All different | | Media and consumer apps | 14 | 6 (43%) | System UI | | Security and privacy | 3 | 2 (67%) | All different | ## Buttons, corners and shadows Pills are the most common main button, but square corners and small 4 to 8px radii together are as common. 39% of the sites use no drop shadow anywhere on the page. Corner of the main button, 146 sites with one | Button corner | Sites | Share | | --- | --- | --- | | Pill | 53 | 36% | | Extra large (17px+) | 1 | 1% | | Large (9-16px) | 11 | 8% | | Medium (5-8px) | 39 | 27% | | Small (1-4px) | 17 | 12% | | Square | 25 | 17% | ## How we measured Each brand’s DESIGN.md comes from Sitepeel’s DESIGN.md generator, which opens the live page at 1440px wide (and at 390px for phone sizes) and reads the styles the browser actually rendered. We measured each site once, from October 21 to October 26, 2026. - Main text font: the family that sets the most text styles on the page - Accent color: the color the page uses for its main buttons, links or logo - Dark mode: the page background is dark when it first opens - Fonts keep the names the sites give them, folded together across weights - One page per brand, usually its home page, as a visitor first sees it - An independent measurement, not any brand’s official design system ## Download the data and cite it The CSV has one row per brand: theme, background, text and accent colors, every font, headline and body sizes, button corners and shadows, plus a link to its full DESIGN.md. Free to use with credit (CC BY 4.0). Example: citation.md ``` Sitepeel (2026). The fonts and colors of 168 top websites. Measured October 21 to October 26, 2026. https://sitepeel.dev/reports/top-website-fonts-and-colors/ ``` - [Download the data (CSV, 168 rows)](https://sitepeel.dev/reports/top-website-fonts-and-colors/data.csv) - [Browse all 168 DESIGN.md files](https://sitepeel.dev/design-md/examples/) ## Every brand in the data Each page has the brand’s colors, fonts, type scale and DESIGN.md file. - [1Password](https://sitepeel.dev/design-md/1password.com/) - [37signals](https://sitepeel.dev/design-md/37signals.com/) - [Airbnb](https://sitepeel.dev/design-md/airbnb.com/) - [Airtable](https://sitepeel.dev/design-md/airtable.com/) - [Allbirds](https://sitepeel.dev/design-md/allbirds.com/) - [Amplitude](https://sitepeel.dev/design-md/amplitude.com/) - [Anthropic](https://sitepeel.dev/design-md/anthropic.com/) - [Apple](https://sitepeel.dev/design-md/apple.com/) - [Arc](https://sitepeel.dev/design-md/arc.net/) - [Are.na](https://sitepeel.dev/design-md/are.na/) - [Asana](https://sitepeel.dev/design-md/asana.com/) - [Astro](https://sitepeel.dev/design-md/astro.build/) - [Atlassian](https://sitepeel.dev/design-md/atlassian.com/) - [Attio](https://sitepeel.dev/design-md/attio.com/) - [Auth0](https://sitepeel.dev/design-md/auth0.com/) - [Awwwards](https://sitepeel.dev/design-md/awwwards.com/) - [Basecamp](https://sitepeel.dev/design-md/basecamp.com/) - [BBC](https://sitepeel.dev/design-md/bbc.com/) - [Bitwarden](https://sitepeel.dev/design-md/bitwarden.com/) - [bolt.new](https://sitepeel.dev/design-md/bolt.new/) - [Booking.com](https://sitepeel.dev/design-md/booking.com/) - [Brex](https://sitepeel.dev/design-md/brex.com/) - [Buffer](https://sitepeel.dev/design-md/buffer.com/) - [Bun](https://sitepeel.dev/design-md/bun.sh/) - [Cal.com](https://sitepeel.dev/design-md/cal.com/) - [Calendly.com](https://sitepeel.dev/design-md/calendly.com/) - [Clerk](https://sitepeel.dev/design-md/clerk.com/) - [ClickUp](https://sitepeel.dev/design-md/clickup.com/) - [Cloudflare](https://sitepeel.dev/design-md/cloudflare.com/) - [Coda](https://sitepeel.dev/design-md/coda.io/) - [Cosmos](https://sitepeel.dev/design-md/cosmos.so/) - [Craft](https://sitepeel.dev/design-md/craft.do/) - [Cursor](https://sitepeel.dev/design-md/cursor.com/) - [Datadog](https://sitepeel.dev/design-md/datadoghq.com/) - [Deel](https://sitepeel.dev/design-md/deel.com/) - [DeepL](https://sitepeel.dev/design-md/deepl.com/) - [Deno](https://sitepeel.dev/design-md/deno.com/) - [Descript](https://sitepeel.dev/design-md/descript.com/) - [Discord](https://sitepeel.dev/design-md/discord.com/) - [Docker](https://sitepeel.dev/design-md/docker.com/) - [Dribbble](https://sitepeel.dev/design-md/dribbble.com/) - [Dropbox](https://sitepeel.dev/design-md/dropbox.com/) - [Dub](https://sitepeel.dev/design-md/dub.co/) - [Duolingo](https://sitepeel.dev/design-md/duolingo.com/) - [ElevenLabs](https://sitepeel.dev/design-md/elevenlabs.io/) - [Excalidraw](https://sitepeel.dev/design-md/excalidraw.com/) - [Family](https://sitepeel.dev/design-md/family.co/) - [Fastmail](https://sitepeel.dev/design-md/fastmail.com/) - [Figma](https://sitepeel.dev/design-md/figma.com/) - [Flutter](https://sitepeel.dev/design-md/flutter.dev/) - [Fly.io](https://sitepeel.dev/design-md/fly.io/) - [Folk](https://sitepeel.dev/design-md/folk.app/) - [Framer](https://sitepeel.dev/design-md/framer.com/) - [GitHub](https://sitepeel.dev/design-md/github.com/) - [GitLab](https://sitepeel.dev/design-md/gitlab.com/) - [Glossier](https://sitepeel.dev/design-md/glossier.com/) - [Go](https://sitepeel.dev/design-md/go.dev/) - [Grafana Labs](https://sitepeel.dev/design-md/grafana.com/) - [Grammarly](https://sitepeel.dev/design-md/grammarly.com/) - [Granola](https://sitepeel.dev/design-md/granola.ai/) - [GSAP](https://sitepeel.dev/design-md/gsap.com/) - [Gumroad](https://sitepeel.dev/design-md/gumroad.com/) - [Headspace](https://sitepeel.dev/design-md/headspace.com/) - [HEY](https://sitepeel.dev/design-md/hey.com/) - [Hootsuite](https://sitepeel.dev/design-md/hootsuite.com/) - [HubSpot](https://sitepeel.dev/design-md/hubspot.com/) - [Hugging Face](https://sitepeel.dev/design-md/huggingface.co/) - [IKEA](https://sitepeel.dev/design-md/ikea.com/) - [Intercom](https://sitepeel.dev/design-md/intercom.com/) - [Later](https://sitepeel.dev/design-md/later.com/) - [Lattice](https://sitepeel.dev/design-md/lattice.com/) - [Lemonsqueezy](https://sitepeel.dev/design-md/lemonsqueezy.com/) - [Linear](https://sitepeel.dev/design-md/linear.app/) - [Loom](https://sitepeel.dev/design-md/loom.com/) - [LottieFiles](https://sitepeel.dev/design-md/lottiefiles.com/) - [Mailchimp](https://sitepeel.dev/design-md/mailchimp.com/) - [Make](https://sitepeel.dev/design-md/make.com/) - [Mercury](https://sitepeel.dev/design-md/mercury.com/) - [Miro](https://sitepeel.dev/design-md/miro.com/) - [Mistral](https://sitepeel.dev/design-md/mistral.ai/) - [Mixpanel](https://sitepeel.dev/design-md/mixpanel.com/) - [Mobbin](https://sitepeel.dev/design-md/mobbin.com/) - [monday.com](https://sitepeel.dev/design-md/monday.com/) - [MongoDB](https://sitepeel.dev/design-md/mongodb.com/) - [Monzo](https://sitepeel.dev/design-md/monzo.com/) - [Motion](https://sitepeel.dev/design-md/motion.dev/) - [MUI](https://sitepeel.dev/design-md/mui.com/) - [mymind](https://sitepeel.dev/design-md/mymind.com/) - [n8n](https://sitepeel.dev/design-md/n8n.io/) - [Neon](https://sitepeel.dev/design-md/neon.tech/) - [Netflix](https://sitepeel.dev/design-md/netflix.com/) - [Netlify](https://sitepeel.dev/design-md/netlify.com/) - [Next.js](https://sitepeel.dev/design-md/nextjs.org/) - [Nike](https://sitepeel.dev/design-md/nike.com/) - [Node.js](https://sitepeel.dev/design-md/nodejs.org/) - [Nothing](https://sitepeel.dev/design-md/nothing.tech/) - [Notion](https://sitepeel.dev/design-md/notion.com/) - [Obsidian](https://sitepeel.dev/design-md/obsidian.md/) - [Oura Ring](https://sitepeel.dev/design-md/ouraring.com/) - [Paddle](https://sitepeel.dev/design-md/paddle.com/) - [PayPal](https://sitepeel.dev/design-md/paypal.com/) - [Perplexity AI](https://sitepeel.dev/design-md/perplexity.ai/) - [Pinterest](https://sitepeel.dev/design-md/pinterest.com/) - [Pitch](https://sitepeel.dev/design-md/pitch.com/) - [Plaid](https://sitepeel.dev/design-md/plaid.com/) - [Plain](https://sitepeel.dev/design-md/plain.com/) - [PostHog](https://sitepeel.dev/design-md/posthog.com/) - [Postman](https://sitepeel.dev/design-md/postman.com/) - [Prisma](https://sitepeel.dev/design-md/prisma.io/) - [Proton](https://sitepeel.dev/design-md/proton.me/) - [Python.org](https://sitepeel.dev/design-md/python.org/) - [Radix UI](https://sitepeel.dev/design-md/radix-ui.com/) - [Railway](https://sitepeel.dev/design-md/railway.com/) - [Ramp](https://sitepeel.dev/design-md/ramp.com/) - [Raycast](https://sitepeel.dev/design-md/raycast.com/) - [React](https://sitepeel.dev/design-md/react.dev/) - [Readymag](https://sitepeel.dev/design-md/readymag.com/) - [Redis](https://sitepeel.dev/design-md/redis.io/) - [Render](https://sitepeel.dev/design-md/render.com/) - [Replicate](https://sitepeel.dev/design-md/replicate.com/) - [Resend](https://sitepeel.dev/design-md/resend.com/) - [Retool](https://sitepeel.dev/design-md/retool.com/) - [Rippling](https://sitepeel.dev/design-md/rippling.com/) - [Rive](https://sitepeel.dev/design-md/rive.app/) - [Rivian](https://sitepeel.dev/design-md/rivian.com/) - [Robinhood](https://sitepeel.dev/design-md/robinhood.com/) - [Runway](https://sitepeel.dev/design-md/runwayml.com/) - [Rust](https://sitepeel.dev/design-md/rust-lang.org/) - [Savee](https://sitepeel.dev/design-md/savee.com/) - [Sentry](https://sitepeel.dev/design-md/sentry.io/) - [shadcn/ui](https://sitepeel.dev/design-md/ui.shadcn.com/) - [Shopify](https://sitepeel.dev/design-md/shopify.com/) - [Sketch](https://sitepeel.dev/design-md/sketch.com/) - [Slack](https://sitepeel.dev/design-md/slack.com/) - [Sonos](https://sitepeel.dev/design-md/sonos.com/) - [Spline](https://sitepeel.dev/design-md/spline.design/) - [Spotify](https://sitepeel.dev/design-md/spotify.com/) - [Square](https://sitepeel.dev/design-md/squareup.com/) - [Squarespace](https://sitepeel.dev/design-md/squarespace.com/) - [Storybook](https://sitepeel.dev/design-md/storybook.js.org/) - [Strava](https://sitepeel.dev/design-md/strava.com/) - [Stripe](https://sitepeel.dev/design-md/stripe.com/) - [Substack](https://sitepeel.dev/design-md/substack.com/) - [Suno](https://sitepeel.dev/design-md/suno.com/) - [Supabase](https://sitepeel.dev/design-md/supabase.com/) - [Superhuman](https://sitepeel.dev/design-md/superhuman.com/) - [Svelte](https://sitepeel.dev/design-md/svelte.dev/) - [Synthesia](https://sitepeel.dev/design-md/synthesia.io/) - [Tailwind CSS](https://sitepeel.dev/design-md/tailwindcss.com/) - [teenage engineering](https://sitepeel.dev/design-md/teenage.engineering/) - [The Verge](https://sitepeel.dev/design-md/theverge.com/) - [Todoist](https://sitepeel.dev/design-md/todoist.com/) - [Trello](https://sitepeel.dev/design-md/trello.com/) - [Twenty](https://sitepeel.dev/design-md/twenty.com/) - [Twilio](https://sitepeel.dev/design-md/twilio.com/) - [Typefully](https://sitepeel.dev/design-md/typefully.com/) - [TypeScript](https://sitepeel.dev/design-md/typescriptlang.org/) - [Uber](https://sitepeel.dev/design-md/uber.com/) - [v0](https://sitepeel.dev/design-md/v0.app/) - [Vercel](https://sitepeel.dev/design-md/vercel.com/) - [Vite](https://sitepeel.dev/design-md/vite.dev/) - [Vue.js](https://sitepeel.dev/design-md/vuejs.org/) - [Webflow](https://sitepeel.dev/design-md/webflow.com/) - [WIRED](https://sitepeel.dev/design-md/wired.com/) - [Wise](https://sitepeel.dev/design-md/wise.com/) - [wix.com](https://sitepeel.dev/design-md/wix.com/) - [Zapier](https://sitepeel.dev/design-md/zapier.com/) - [Zoom](https://sitepeel.dev/design-md/zoom.us/) ## Questions and answers ### What is the most popular font on websites in 2026? Inter. 43 of the 168 top brand sites we measured use it, 30 for their main text. Geist and the device’s own system font come next among the fonts we could name. ### What fonts do big brands use? Mostly their own. 54% of the 168 brands set their main text in a commercial or custom typeface, such as Airbnb Cereal, Uber Move or Söhne. Only 18% use Inter for it. ### What is the most common brand color on websites? Blue: 45 of 168 sites (27%) use it as their main accent. As many use black, white or gray instead of a color. ### How many websites use dark mode by default? 44% of the 168 sites open in dark mode. Developer tools lean dark (27 of 37); marketing and analytics tools lean light. ### What font size do websites use for body text? 16px is the most common (47% of sites). The median headline is 60px on a laptop and 38px on a phone. ### Can I use this data? Yes. The CSV is free to use with credit (CC BY 4.0). Link to this page as the source. ## Related pages - [Identify website typography](https://sitepeel.dev/guides/identify-fonts-on-website/index.md): Find the font a website uses, plus its weight, size and line height. Check the fallback, then try it in your own layout with a licensed copy. - [Build a palette from a website](https://sitepeel.dev/guides/extract-website-color-palette/index.md): Get a website’s colors, give each one a role and turn them into CSS variables, with a short checklist for testing real text and background pairs. - [What is DESIGN.md](https://sitepeel.dev/guides/what-is-design-md/index.md): DESIGN.md is a Markdown file that tells AI coding agents how your UI looks. See Google’s spec, three real examples, where to get templates and how to make one. - [AI slop on 126 startup websites](https://sitepeel.dev/reports/ai-slop-websites-2026/index.md): We ran the AI slop checker on 126 startup home pages from YC’s 2026 batches. The score spread, the 10 most common tells and the method, with a free CSV.