Modern Typography Systems

The best product typography looks effortless. Behind that calm surface lies deliberate choices about typeface, scale, weight, spacing, and hierarchy. This chapter analyzes seven influential systems — each solving different problems with different constraints — so you can borrow patterns rather than reinvent them.

What Makes a Modern System

Contemporary product typography shares several traits regardless of brand:

• One primary sans-serif for UI, occasionally paired with a serif or mono for contrast
• A restrained scale — typically 6–10 distinct sizes, not 20
• Optical sizing — tighter tracking and line height at large sizes, looser at small
• Platform-native fallbacks where custom fonts are unavailable
• Accessibility baked in — minimum 16px body, sufficient contrast, scalable with user preferences

The differences emerge in personality: Apple feels editorial and spacious; Linear feels dense and precise; Medium feels literary and warm.

Apple — Human Interface Typography

Apple's typography system centers on SF Pro (UI) and New York (reading). SF Pro is a neo-grotesque designed specifically for screen legibility at small sizes, with optical size variants that adjust stroke weight and spacing automatically.

Key decisions:

| Element | Approach | | --- | --- | | Primary typeface | SF Pro (system font on Apple platforms) | | Scale | Large Title through Caption 2 — 11 predefined text styles | | Weight range | Regular, Medium, Semibold, Bold — no ultralight in UI | | Line height | Tight at display sizes (1.0–1.1), generous at body (1.4+) | | Tracking | Negative at large sizes, neutral at body, slightly positive at captions |

Apple's Large Title pattern — a bold 34px heading that collapses on scroll — has influenced navigation typography across iOS and beyond. The system prioritizes scannability through size contrast rather than color or decoration.

Google Material — Roboto and Scale

Material Design 3 uses Roboto (Android default) and Roboto Flex (variable font) as its workhorse. Material's type scale is mathematically derived: each role maps to a specific size, weight, line height, and letter spacing.

Material 3 type roles:

| Role | Typical size | Weight | Use case | | --- | --- | --- | --- | | Display Large | 57px | Regular | Hero moments | | Headline Medium | 28px | Regular | Section headers | | Title Medium | 16px | Medium | Card titles | | Body Large | 16px | Regular | Primary reading | | Label Small | 11px | Medium | Navigation, tabs |

Material emphasizes weight over size for hierarchy. A Title at 16px Medium reads above Body at 16px Regular — useful in data-dense interfaces where size jumps would waste space.

Material also introduced typography tokens as design tokens in their token system, making Figma-to-code handoff more structured than most competitors.

Stripe — Clarity at Scale

Stripe's typography is a masterclass in functional minimalism. Their marketing site uses a custom serif for brand warmth, but the product UI relies on a clean sans-serif stack with precise spacing.

Stripe's approach:

• Inter (or similar neo-grotesque) for product UI — optimized for forms, tables, and dashboards
• Tight hierarchy — usually three visible levels: page title, section label, body
• Monospace for data — API keys, card numbers, and code snippets use a dedicated mono face
• Restrained color — hierarchy through size and weight, not hue

Stripe demonstrates that financial products do not need decorative typography. Trust comes from consistency, alignment, and predictable rhythm. Every label, input, and error message uses the same scale.

Linear — Density and Precision

Linear's typography defines the modern developer tool aesthetic: dark backgrounds, tight spacing, small but legible type, and high information density.

Linear's typographic signature:

| Property | Value | Effect | | --- | --- | --- | | Base size | ~13–14px | Fits more content per viewport | | Primary face | Inter / custom sans | Neutral, invisible | | Weight contrast | Regular body, Medium labels | Hierarchy without size jumps | | Tracking | Slightly negative on headings | Compact, engineered feel | | Color | Muted grays for secondary text | Hierarchy through opacity |

Linear proves that smaller base sizes work when line height, contrast, and spacing are calibrated. Dropping to 13px without adjusting leading produces unreadable walls of text; Linear pairs it with ~1.5 line height and generous paragraph spacing.

Notion — Flexible Blocks

Notion treats typography as user-controlled content, not fixed UI chrome. Users pick heading levels, toggle bold and italic, and write in a WYS-serif that feels like a document editor.

Notion's dual system:

• UI chrome — small sans-serif labels, navigation, and metadata (typically 12–14px)
• Content area — serif or sans-serif body at 16px with user-selectable heading styles
• Block-level hierarchy — H1 through H3, toggles, callouts, and quotes each have distinct but harmonious styles

Notion's lesson: when users create content, provide a constrained but flexible typographic palette. Three heading levels, two body styles, and one quote style cover 95% of use cases without overwhelming non-designers.

Medium — Reading-First Typography

Medium built its brand on long-form readability. Their system optimizes for one job: making articles pleasant to read for 10+ minutes.

Medium's reading stack:

• Source Serif Pro (or Charter) for article body — high x-height, open counters
• Söhne / system sans for UI chrome — navigation, claps, comments
• Generous measure — ~680px content width, roughly 65–75 characters per line
• Large body — 18–21px on desktop, scaling down on mobile
• Loose leading — 1.58–1.6 line height for sustained reading

Medium uses size and serif choice to signal "this is content worth your time." The UI chrome recedes; the article body dominates. This content-first hierarchy is the opposite of dashboard products like Linear.

Vercel — Geist and Developer Branding

Vercel created Geist Sans and Geist Mono as custom typefaces for their developer platform. Geist is a neo-grotesque with subtle geometric influences — clean enough for code documentation, distinctive enough for marketing.

Vercel's typographic system:

| Context | Typeface | Character | | --- | --- | --- | | Marketing | Geist Sans + display treatments | Bold, high-contrast headings | | Documentation | Geist Sans at 16px body | Readable, neutral | | Code blocks | Geist Mono | Ligatures, clear distinction from prose | | UI components | Geist Sans, 14px base | Compact, consistent with docs |

Vercel demonstrates the custom typeface as brand asset strategy. Geist signals "this is a developer company" the way Stripe's precision signals "this is a financial company." The investment only makes sense at scale — most startups should start with Inter or IBM Plex Sans and graduate to custom faces later.

Cross-System Patterns

Analyzing these seven systems reveals actionable patterns:

Pattern 1: One sans, maybe one serif, always one mono. Every system above uses at most three typeface roles. Notion and Medium add a reading serif; Linear and Stripe stay sans-only.

Pattern 2: Hierarchy through weight before size. Material, Linear, and Stripe all use weight contrast at the same size. This preserves density in UI-heavy products.

Pattern 3: Named text styles, not free-form sizing. Apple's Large Title, Material's Headline Medium, and your own text-heading-lg all prevent ad-hoc decisions.

Pattern 4: Context-specific base sizes. Reading products (Medium) use 18px+ body. Tools (Linear) use 13–14px. Dashboards (Stripe) use 14–16px. There is no universal "correct" base size — only correct for the context.

Pattern 5: Tokens everywhere. The most mature systems (Material, Apple, Vercel) expose typography as tokens in both design and code. Ad-hoc styling is treated as technical debt.

Choosing Your Own Direction

Use this framework when defining your system's typography:

1. Identify your primary job — reading, data display, content creation, or brand marketing
2. Pick a base size that matches information density needs (13–14px for tools, 16–18px for reading)
3. Select one sans-serif with at least four weights and good tabular figures
4. Add a mono face if you display code or structured data
5. Define 6–8 text styles with size, weight, leading, and tracking locked together
6. Test on real content — not lorem ipsum, but your actual UI copy and longest articles

The best typography system is the one your team actually uses. Study these references, extract the principles, and build a scale that fits your product's voice — not a copy of someone else's.