UX Encyclopedia

Type Scale Cheat Sheet

Concrete starting sizes for every platform. Principles (legibility research, pairing, fluid type, variable fonts) live in Typography for Interfaces — this file is the numbers companion. Values verified against live HIG / M3 / Fluent docs, July 2026.

Try it — the scales at true size. Pick a platform ramp and read seven representative roles at actual size — values straight from the tables on this page, faces necessarily this site’s fonts (a brand-font preview would need font loading; sizes, weights and leading are the real values). Then flip the line-height between the cheat sheet’s compact and comfortable bands.
Line-height

The decision procedure

  1. Identify the platform → adopt its role-based scale below, wholesale.
  2. Map your brand font onto the roles (one face swap, same sizes).
  3. If the brand font's x-height is small, size up ~1–2 px/pt across the board so it optically matches system type — then stop.
  4. Only after shipping something customize ratios/weights. Never invent sizes role-by-role; that's how 14-size, no-hierarchy UIs happen.

Web — marketing & content sites (convention, not a spec)

  • Base: 16 px body = 1rem (the browser default; don't shrink it). Ratios are convention: 1.2 (minor third) for dense product-ish sites, 1.25–1.333 for editorial with big expressive headings.
  • A complete worked scale at ratio 1.25 (rem so user settings are respected):
Role Size px Line-height Weight
Caption 0.8rem 12.8 1.4 400
Body 1rem 16 1.5 400
Lead 1.25rem 20 1.5 400
H4 1.25rem 20 1.4 600
H3 1.563rem 25 1.3 600
H2 1.953rem 31 1.2 700
H1 2.441rem 39 1.1 700
Display 3.052rem 49 1.05 700–800
  • Lead and H4 share a size on purpose — hierarchy via weight, demonstrating the rule that one variable (size OR weight) is enough per step.
  • Fluid top end (only headings need fluidity; body stays 16–18 px): h1 { font-size: clamp(1.75rem, 1.35rem + 2vw, 2.44rem); } .display { font-size: clamp(2rem, 1.4rem + 3.5vw, 3.05rem); } Keep a rem term in the middle value (zoom/WCAG 1.4.4 — see Typography for Interfaces).
  • Pair with measure: body columns of 45–75 ch (max-width: 65ch is a good default).

Web apps & dashboards — dense UI (convention)

  • Reality check: pro tools commonly run 13–14 px UI text (labels, table cells, menus) — density is a feature for expert daily-use software.
  • The honest trade-off: WCAG sets no minimum font size, but small text raises the stakes on everything else — keep contrast well above 4.5:1, never disable zoom, and hold ~12 px as the floor for anything users must read (11 px only for tertiary metadata).
  • The 16 px rule still applies to reading content inside the app (docs, descriptions, long messages) — dense chrome, readable prose.
  • Worked dense scale: caption 12, body/UI 13–14, section heading 16/600, page title 20/600, big number (KPI) 28–32/600 tabular-nums.

iOS / iPadOS — Dynamic Type text styles (Apple HIG, Large = default)

Sizes shift with the user's Dynamic Type setting, so always use text styles, never raw pt values. Size/leading in pt; every style has a bolder "emphasized" variant.

Style Size/leading Weight Use
Large Title 34/41 Regular Screen title (scrolls away)
Title 1 28/34 Regular Prominent section openers
Title 2 22/28 Regular Section headings
Title 3 20/25 Regular Sub-sections, card titles
Headline 17/22 Semibold Emphasized row/item titles
Body 17/22 Regular Default reading text
Callout 16/21 Regular Slightly-subordinate body
Subhead 15/20 Regular Secondary rows, list detail
Footnote 13/18 Regular Timestamps, attributions
Caption 1 12/16 Regular Image captions, fine labels
Caption 2 11/13 Regular Smallest legal/metadata
  • Headline vs. Body: same 17 pt, weight is the differentiator.
  • SF Pro switches optical sizes automatically; don't fake it.

Android — Material 3 type scale (m3.material.io)

15 roles = 5 tiers × Large/Medium/Small. Values are sp (scales with user setting — never dp for text), shown size/line-height; weight 400 = Regular, 500 = Medium. Default face Roboto (or Roboto Flex).

Tier Large Medium Small Weight
Display 57/64 45/52 36/44 400
Headline 32/40 28/36 24/32 400
Title 22/28 (400) 16/24 (500) 14/20 (500) —
Body 16/24 14/20 12/16 400
Label 14/20 12/16 11/16 500
  • Defaults in practice: Body Large 16 sp for reading text, Title Large 22 sp for app-bar titles, Label Large 14 sp/500 on buttons.
  • M3 Expressive adds emphasized variants; the baseline table above is the contract.

Windows / desktop apps — Fluent 2 type ramp (Segoe UI Variable)

Style Size/line-height (px) Weight
Caption 12/16 Regular (small opsz)
Body 14/20 Regular
Body Strong 14/20 Semibold
Body Large 18/24 Regular
Subtitle 20/28 Semibold
Title 28/36 Semibold
Large Title 40/52 Semibold
Display 68/92 Semibold
  • Note the desktop pattern: 14 px body, hierarchy carried by Semibold — consistent with the dense-UI section above.

macOS — HIG text styles (yes, Apple publishes a separate table)

macOS type runs smaller than iOS (pointer precision, greater viewing distance ≠ touch). System default body is 13 pt.

Style Size/line-height Weight
Large Title 26/32 Regular
Title 1 22/26 Regular
Title 2 17/22 Regular
Title 3 15/20 Regular
Headline 13/16 Bold
Body 13/16 Regular
Callout 12/15 Regular
Subheadline 11/14 Regular
Footnote 10/13 Regular
Caption 1 / 2 10/13 Regular / Medium

TV, Watch, Email — quick refs

  • TV: tvOS Body is 29 pt, Headline 38 pt, Title 1 76 pt at 1080p — roughly 2× phone sizes. Full 10-foot rules: TV & 10-Foot Interface Design.
  • watchOS: Apple publishes text styles per watch size/setting (at the xSmall setting: Body 14 pt, Title 1 28 pt, floor Footnote 2 at 10 pt); sizes grow with larger cases and user setting — use text styles and design larger than you think; see Wearables & Smartwatch Design.
  • Email (industry convention, driven by unpredictable clients): body 14–16 px minimum, headings 22 px+, generous 1.5 line-height, system font stacks (-apple-system, Segoe UI, Roboto, Arial) unless you test web-font fallbacks in every client.

Cross-cutting rules (recap — details in Typography for Interfaces)

  • Minimums: 16 px web body / 17 pt iOS / 16 sp Android reading text.
  • Line-height ~1.4–1.6 body, 1.1–1.3 headings; measure 45–75 ch.
  • Budget: ≤2 families, ~5–7 sizes actually used, 2–3 weights.
  • A hierarchy step needs ~1.5× size jump OR a weight change — a 1–2 px difference reads as inconsistency, not hierarchy.
  • Small-x-height brand font → size up ~1–2 px/pt to optically match the platform tables above.

Steal this: starter scales side by side

Role Web editorial Web app iOS Android
Hero/display 49 px/700 — Large Title 34 Display Small 36
Page title 39 px/700 20 px/600 Title 1 28 Headline Medium 28
Section 31 px/700 16 px/600 Title 2 22 Title Large 22
Subsection 25 px/600 14 px/600 Headline 17 SB Title Medium 16/500
Body 16 px/1.5 13–14 px Body 17 Body Large 16
Secondary 12.8 px 12 px Footnote 13 Body Medium 14
Caption/label 12.8 px 11–12 px Caption 1 12 Label Medium 12

Sources

↑↓ to navigate · Enter to open · Esc to close