Most typography articles online are listicles: "30 beautiful font pairings." They're useful for mood but useless as system architecture. A real typography stack is not a pairing — it's a layered system with a primary family, a secondary family (sometimes), a monospace for code and IDs, and a system-font fallback that kicks in if your hosted fonts fail to load. Linear uses this structure. So do Stripe, Vercel, Notion, Figma, and every serious 2026 product. The specific fonts differ; the architecture is the same.
This post is that architecture — the systems approach to typography that works across marketing, product, documentation, email, and code. Primary sources only (which means correcting a few widely-repeated attribution errors — Söhne is by Kris Sowersby at Klim, Linear uses Inter not a custom font, Geist is Vercel's). Plus the performance, accessibility, and variable-font considerations that matter in production.
TL;DR — Key Takeaways
- A typography stack is four layers: primary family, secondary family (optional), monospace, and system-font fallback. Most teams over-think the primary and under-think the others.
- Linear uses Inter. Not a custom typeface despite widespread assumption otherwise. Inter is the open-source typeface by Rasmus Andersson, serving approximately 500 million requests per month.
- Stripe uses Söhne by Kris Sowersby at [Klim Type Foundry](https://klim.co.nz/). Not by Berton Hasebe, who designed other Klim fonts. This attribution is frequently wrong online.
- Vercel uses Geist — Geist Sans, Geist Mono, and Geist Pixel. All three are OFL-licensed, released October-November 2023 by Vercel in collaboration with Basement Studio. Default typography in Next.js 15+.
- Variable fonts are the 2026 default. One font file, multiple weights and widths. Better performance than static font families when used correctly.
- Core Web Vitals matter for typography. Per web.dev, INP replaced FID as a Core Web Vital on March 12, 2024. Target ≤200ms. Font loading strategy directly affects LCP and CLS.
- The 2025 Web Almanac reports 48% of mobile pages and 56% of desktop pages pass all three Core Web Vitals. If your typography is costing you CWV, you're below median.
The Four-Layer Stack
The architecture every production typography system uses, even when teams don't articulate it explicitly.
Layer 1: Primary
The primary family is the font that carries your brand. It's used for marketing headlines, product UI, documentation headers, and most body copy. One family, typically with variable-weight support.
Linear's primary: Inter. Stripe's: Söhne. Vercel's: Geist Sans. Notion's: a custom serif called Inter-based stack with Lyon display pairing. Figma's: SF Pro on macOS, Inter on web, Roboto on Android.
The choice of primary family is where brand expression happens. The rest of the stack supports it.
Layer 2: Secondary (Optional)
Not every stack needs a secondary. When used, secondary serves a specific role: display type for marketing (different personality than product UI), serif for long-form editorial content, or condensed/extended variants for posters and advertisements.
Linear uses Inter Display for certain headlines (technically a size-variant of Inter). Stripe uses Söhne Schmal for compressed headlines. Vercel uses Geist Pixel for retro/code-aesthetic contexts. Notion uses a serif for editorial content in product and marketing.
If you don't have a specific role for a secondary, don't add one. Most design system typography drift happens when teams add a secondary family without a defined role for it.
Layer 3: Monospace
Monospace is for code, IDs, keyboard shortcuts, data in tables with fixed-width requirements, and any context where character alignment matters. Every production design system needs one.
Linear uses Berkeley Mono. Vercel uses Geist Mono. Stripe uses Söhne Mono. Notion uses a custom mono. Figma uses Berkeley Mono or JetBrains Mono depending on context.
Common open-source monos that work for most teams: JetBrains Mono, Fira Code, Geist Mono, IBM Plex Mono, Inter's bundled mono variant.
Layer 4: System Font Fallback
The fallback stack kicks in when your hosted fonts fail to load, during initial render before web fonts download, or on platforms where you want native system typography. It's not optional — every typography stack should specify a fallback.
A typical system font stack:
This falls through: Inter (hosted), Apple system font on macOS/iOS, Segoe UI on Windows, Roboto on Android, various Linux fonts, then Helvetica Neue, then whatever sans-serif is available. The user sees something useful even if all custom fonts fail.
The modern system-font stack is a commonly-referenced baseline.
The Typography Primary Sources You Should Know
Three typography primary sources that are disproportionately useful, and a correction pass on commonly repeated mis-attributions.
Inter (Rasmus Andersson)
Inter was designed by Rasmus Andersson, formerly design lead at Figma and Spotify. Open-source (SIL Open Font License). Variable font with weight 100-900 and optical size. Huge x-height for screen legibility. Serves approximately 500 million requests per month according to Andersson's own site.
Inter is the most-used font in modern product design. It's not prestigious in the font-foundry-connoisseur sense, but it's the competent default that lets you focus on other design decisions. Linear, Figma, Stripe (internally in some surfaces), and many others use it.
Geist (Vercel + Basement Studio)
Geist is Vercel's custom typography system, designed in collaboration with Basement Studio and released open-source under OFL in October-November 2023. Geist Sans for text, Geist Mono for code, Geist Pixel for retro/terminal aesthetic.
Released open-source partly so Vercel's developer platform customers could use the same typography. It's the default typography in Next.js 15+. Geist is particularly well-suited to technical/developer product contexts.
Söhne (Kris Sowersby at Klim Type Foundry)
Söhne is a contemporary grotesque designed by Kris Sowersby at Klim Type Foundry, based in New Zealand. Released 2019. Commercial license through Klim; not free.
The attribution matters because Söhne is frequently misattributed online to Berton Hasebe (who designed other excellent Klim fonts but not this one). If you're citing Stripe's typography in a talk or article, get it right: Söhne by Kris Sowersby at Klim.
Stripe uses Söhne across marketing, dashboard, and documentation. It's also used by OpenAI (Söhne Breit for their marketing), The Browser Company (Arc's marketing), and many premium products.
Variable Fonts in Production
Variable fonts are the 2026 default. A single font file contains the data for multiple weights, widths, and (sometimes) optical sizes. Done right, this outperforms loading separate static font files.
Why variable fonts win in 2026:
- One HTTP request instead of multiple
- Smoother rendering across weight transitions (hover states, animation)
- Fine-grained control over weight (not just 400/700, but anything between)
- Smaller total file size than equivalent static families
Caveats:
- Not every typeface has a variable version
- Older browsers (pre-2018) don't support variable fonts — use feature detection
- Subsetting variable fonts requires specific tooling (fontsource handles this well)
Loading strategy. Preload the primary font file in HTML head. Use font-display: swap to render fallback first and swap in the hosted font when ready. This prevents invisible text during font load, which helps LCP.
Modern framework wrappers (next/font, Astro's font optimization) handle most of this automatically.
Performance: The Core Web Vitals Reality
Typography choices directly affect Core Web Vitals — the metrics Google uses as ranking signals.
LCP (Largest Contentful Paint). Target: ≤2.5 seconds. Web fonts that delay rendering hurt LCP. Preloading the primary font file and using font-display: swap typically keeps LCP healthy. System fonts have zero load time.
CLS (Cumulative Layout Shift). Target: ≤0.1. Font loading can cause shifts when the fallback font has different metrics than the hosted font. The size-adjust CSS descriptor and Fallback Font Generator tools help match metrics between fallback and hosted fonts.
INP (Interaction to Next Paint). Target: ≤200ms. INP replaced FID as a Core Web Vital on March 12, 2024, per Google's web.dev documentation. Typography itself doesn't directly affect INP, but heavy JavaScript font-loading scripts can.
2025 Web Almanac data: 48% of mobile pages and 56% of desktop pages pass all three Core Web Vitals. 77% of mobile pages have good INP. If your typography strategy is tanking your CWV, you're below median — the fixable culprit is usually font loading, not font choice.
Accessibility Considerations
WCAG 2.1/2.2 AA doesn't mandate specific font choices, but does have implications for typography systems.
Minimum body text size. Not a hard WCAG requirement but strongly recommended: 16px body minimum, 14px absolute floor. Below 14px starts failing mobile readability for users with mild vision impairment.
Line height. WCAG 2.1 SC 1.4.12: line height at least 1.5× font size in paragraphs, letter spacing at least 0.12× font size, word spacing at least 0.16×, paragraph spacing at least 2×. These thresholds kick in when users override text spacing via browser settings.
Font contrast. Different font families can have different perceived contrast at the same measured contrast ratio — a thin, low-x-height font at 4.5:1 contrast reads worse than a heavy, high-x-height font at the same ratio. APCA (the algorithm coming with WCAG 3.0) accounts for this. For now: err toward higher-contrast, higher-weight fonts for body text.
Readable weights. Don't use weights below 300 (light) for body text. Users with vision impairment lose legibility quickly below 400 regular weight.
Webfont fallbacks. If your hosted font fails for a user with slow connection or webfont-blocking extensions, the fallback must be readable. This is why the system font stack matters.
Connects to Accessibility Is Not a Feature — text contrast and sizing are among the most commonly cited issues in ADA lawsuit complaints.
Stack Recommendations by Context
If you're building a typography stack from scratch in 2026, here are production-safe starting points by product context.
SaaS product (general): Inter Variable as primary, optional Inter Display for headlines, JetBrains Mono or Geist Mono for code, system-font fallback. This is the most-used stack in modern SaaS and works for most use cases.
Developer tools: Geist Sans + Geist Mono + system fallback. Open-source, OFL-licensed, default in Next.js, strong developer-tool aesthetic.
Premium/editorial SaaS: If budget allows, commercial font from Klim, Commercial Type, or ABC Dinamo for primary. Inter or Söhne as widely-licensed options. Serif secondary (Tiempos, Domaine, Source Serif) for long-form content. JetBrains Mono for code.
Consumer app: SF Pro on iOS, Inter on web/Android. Platform-native when possible — users are calibrated to their platform's typography, and fighting it with a custom font is usually not worth the bandwidth cost.
Marketing site: Same primary as product (don't fragment). Optional display font for hero sections. Mono for code examples if applicable.
Brand-forward / statement design: Commercial display font from a quality foundry. Pair with a well-proven sans for body (Inter, Söhne). Don't try to build a premium brand on Google Fonts alone; the typography reads as downmarket.
Common Mistakes to Avoid
Too many families. Three families is the practical max: primary + (optional secondary) + mono. More than three fragments your visual identity and compounds loading costs.
Loading all weights "just in case." Each weight is an HTTP request and bytes downloaded. Audit which weights you actually use (inspect your CSS). Typical production needs: 400 regular, 500 medium, 600 semibold, 700 bold. Skip 100, 200, 300, 800, 900 unless you use them.
Skipping the system fallback. Users on slow connections, with webfont-blocking extensions, or in constrained contexts (email, embedded iframes) will see your fallback. Specifying it badly produces ugly failures.
Inline font files. Some tutorials suggest inlining fonts as base64 in CSS. Almost always worse than separate files — breaks caching, bloats CSS, hurts LCP.
Ignoring variable fonts. Variable fonts are the 2026 default for most production use. Still using separate static weight files is a legacy pattern.
Custom font without licensing due diligence. Commercial fonts (Klim, Commercial Type, etc.) have webfont licenses priced by traffic tier. A growing company can find itself in license violation at scale. Check licensing before committing.
Forgetting about email and PDF. Email clients and PDF renderers don't use your web fonts. Your brand typography needs a system-font-fallback path that looks acceptable in Outlook and in exported PDFs.
Frequently Asked Questions
What's the best font for a design system?
The best primary font for most design systems in 2026 is either Inter (free, OFL, universal) or a premium commercial typeface like Söhne if brand differentiation justifies the license cost. The "best" depends on context — technical/developer products often look best in Geist, consumer apps may want platform-native fonts, editorial products benefit from custom serifs. There's no universal answer; there's a correct choice for each product context.
What font does Linear use?
Linear uses Inter, the open-source typeface designed by Rasmus Andersson. Linear does not use a custom typeface despite widespread assumption otherwise. Inter Variable is the specific file format used in Linear's product.
What font does Stripe use?
Stripe uses Söhne, designed by Kris Sowersby at Klim Type Foundry (released 2019). Söhne is a commercial typeface with licensing through Klim. It's used across Stripe's marketing site, dashboard, and documentation. Söhne is frequently misattributed to Berton Hasebe online — the correct attribution is Kris Sowersby at Klim.
What font does Vercel use?
Vercel uses Geist, designed in collaboration with Basement Studio and released under OFL (open-source) in October-November 2023. The Geist family includes Geist Sans, Geist Mono, and Geist Pixel. Geist is the default typography system in Next.js 15 and later.
What are Core Web Vitals and how does typography affect them?
Core Web Vitals are Google's user-experience performance metrics: Largest Contentful Paint (LCP) ≤2.5s, Cumulative Layout Shift (CLS) ≤0.1, and Interaction to Next Paint (INP) ≤200ms. INP replaced FID on March 12, 2024 per web.dev. Typography affects LCP (web font loading delays rendering) and CLS (fallback-to-hosted-font metric mismatch causes layout shift). Good loading strategy — preload primary font, use font-display: swap, size-adjust descriptor — keeps typography from degrading CWV.
Should I use variable fonts?
Yes, for most production use. Variable fonts bundle multiple weights in a single file, reducing HTTP requests and enabling smoother weight transitions for animations and hover states. Use fontsource, next/font, or similar tooling to handle subsetting and delivery. Static font files remain a reasonable fallback only if your chosen typeface has no variable version.
How many fonts should a design system have?
Three is the practical maximum: primary family, optional secondary (for a specific role like editorial body or display headlines), and monospace. Four or more fragments your visual identity and compounds loading costs. Most systems use two: primary + monospace.
Is it OK to use Google Fonts?
Yes for the majority of products. Google Fonts hosts Inter, Geist, Roboto, and hundreds of other high-quality typefaces under OFL. The main caveats: Google Fonts serves from Google's CDN, which some regions of the world have restrictions on — self-hosting via fontsource or similar avoids this. Premium products targeting high-end brand positioning sometimes benefit from commercial foundry fonts (Klim, Commercial Type, ABC Dinamo) that aren't on Google Fonts.
For the adjacent systems thinking, read [Color Systems That Scale](https://mantlr.com/blog/color-systems-that-scale) — color and typography are the two systems that everything else in a design system composes on top of.
For how typography fits into overall premium UI craft, see [How Stripe, Linear, and Vercel Ship Premium UI](https://mantlr.com/blog/stripe-linear-vercel-premium-ui) — typography is one of the most visible markers of craft in the interfaces designers study.
For finding fonts that might work for your stack, see [The Best Hidden Design Resources Nobody Talks About](https://mantlr.com/blog/hidden-design-resources) — including underrated font foundries.
Browse Mantlr's curated [typography resources](https://mantlr.com/categories), [font tools](https://mantlr.com/categories), and [variable font resources](https://mantlr.com/categories) to assemble your typography stack.
External references: