A practical look at scale, rhythm, hierarchy, responsive type, and the token decisions that make text usable across product surfaces.
A typography system turns text from decoration into communication. It sets the rules for size, hierarchy, spacing, and voice — once, so every surface inherits them without rethinking.
The first job
Before personality, text must be effortless to read. Size, measure, line height, and contrast come first.
The second job
A geometric sans reads precise and modern; a humanist serif warm and editorial. Voice supports brand without costing legibility.
The structure
Size, weight, color, and space let users tell a heading from body, a label from a value — without reading a word.
The discipline
Every style answers one question: what is its job? Tokens named by role keep that discipline across every screen.
Every typeface has a temperament. Knowing the categories lets you choose deliberately instead of by accident.
Serif
Lora · Georgia · Times
Traditional, authoritative, editorial. Excellent for long-form reading.
Sans-serif
Inter · Helvetica · Arial
Clean, neutral, modern. The UI default, legible at small sizes.
Grotesk
Space Grotesk · Founders
Slightly mechanical forms. Confident and characterful without serifs.
Geometric
Poppins · Futura · Circular
Built from circles and lines. Precise and friendly in headings, tiring in body.
Humanist
Lato · Frutiger · Source Sans
Calligraphic warmth and open apertures. The most readable sans.
Monospace
DM Mono · JetBrains · SF Mono
Equal-width characters. Essential for code, data, and tabular numbers.
Display
Playfair · Fraunces · Canela
Built for large sizes and impact. Hero moments only — never body or labels.
Variable
Fraunces · Inter · Recursive
One file, continuous axes. Smaller payloads, fluid weights, optical sizing.
Six tools in one place: scale generator, font pairing, reading comfort, hierarchy playground, fluid clamp, and contrast checker.
:root {
--text-display: 76px;
--leading-display: 1.04;
--text-h1: 61px;
--leading-h1: 1.08;
--text-h2: 49px;
--leading-h2: 1.12;
--text-h3: 39px;
--leading-h3: 1.18;
--text-h4: 31px;
--leading-h4: 1.25;
--text-h5: 25px;
--leading-h5: 1.3;
--text-body-lg: 20px;
--leading-body-lg: 1.6;
--text-body: 16px;
--leading-body: 1.65;
--text-small: 13px;
--leading-small: 1.5;
--text-caption: 10px;
--leading-caption: 1.45;
}Pairing is about contrast with harmony. A high-contrast display serif over a calm humanist sans gives editorial authority; a grotesk over a monospace reads technical and precise. The heading sets the voice; the body keeps it readable.
Typography is the craft of making language visible. The measure — the length of a line of text — is one of its oldest and most reliable controls. When a column is too wide the reader tires; too narrow and the rhythm fractures into fragments. Somewhere between forty-five and seventy-five characters lies the comfortable middle, where the eye sweeps and returns without conscious effort, and the words simply flow.
Unlimited projects, advanced analytics, priority support, and a shared design-token pipeline.
Strong hierarchy. Four levers working together — the eye lands on the title, then price, then action, instantly.
viewport 1100px → rendered 63.4px (min 28 · max 72)
font-size: clamp(28px, 10.78px + 4.78vw, 72px);
WCAG AA requires 4.5:1 for normal text, 3:1 for large (≥24px). Keep body at 16px minimum, and choose letterforms that disambiguate I l 1 and O 0.
Interface type lives under different pressure: small sizes, dense layouts, tabular data, glanceable labels. Each context has its own rules.
14–15px medium weight. Labels are verbs. Never let a button label wrap.
Label 12px medium · input 14–16px (≥16px on mobile) · hint 11–12px muted.
| Plan | Seats | MRR |
|---|---|---|
| Starter | 3 | $87 |
| Growth | 12 | $1,240 |
| Scale | 48 | $9,600 |
Tabular-figure numerals so digits align. Labels uppercase mono; values regular.
13–14px. Active item earns weight and full contrast; the rest recede to muted.
Tokens turn typographic decisions into one source of truth. The principles behind them are what keep the system from growing in the wrong directions.
01 · Global / primitive
--font-size-500: 20px; --leading-snug: 1.25; --weight-medium: 500;↓
02 · Semantic / role
--text-heading: var(--font-size-500)/var(--leading-snug) var(--weight-medium);↓
03 · Component
--card-title-font: var(--text-heading);:root {
/* primitives */
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "DM Mono", monospace;
--size-caption: 12px; --leading-caption: 1.45;
--size-body: 16px; --leading-body: 1.65;
--size-h3: 25px; --leading-h3: 1.2;
--size-h1: 39px; --leading-h1: 1.08;
--weight-regular: 400; --weight-medium: 500; --weight-bold: 700;
}
:root {
/* semantic roles */
--text-page-title: var(--weight-bold) var(--size-h1)/var(--leading-h1) var(--font-sans);
--text-section: var(--weight-medium) var(--size-h3)/var(--leading-h3) var(--font-sans);
--text-body: var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-sans);
--text-meta: var(--weight-medium) var(--size-caption)/var(--leading-caption) var(--font-mono);
}
/* usage — components never hard-code sizes */
.page-title { font: var(--text-page-title); letter-spacing: -0.02em; }
.card-meta { font: var(--text-meta); text-transform: uppercase; letter-spacing: 0.08em; }Design for reading first
Personality is earned only after text is effortless to read. Measure, size, and contrast come before voice.
Consistency beats novelty
A predictable scale used everywhere reads as quality. 'Just one more size' is how systems rot.
Contrast creates hierarchy
Order comes from decisive difference in size, weight, or color — not from making everything large.
Spacing is typography
Line height, paragraph spacing, and measure shape readability as much as the letterforms.
Typography is interface
In most products, text is the interface. Treat the type system as core architecture.
Restraint scales
Two families, a few sizes, two weights covers nearly every interface and stays maintainable.
More from the journal
The hard problem is not showing more profiles. It is deciding who gets seen, how often, and under what fairness rules.
Jun 2026
Foundations, surfaces, semantic roles, accessibility, and how to build an 11-stop scale that teams can apply consistently.
Jun 2024
When AI pays for you, the payment brand has fewer visible moments. The design problem becomes when trust should appear.
Jun 2026