Typography

Set a body size, a largest size, and a number of levels. Every other value — the ratio, the intermediate sizes, line heights, container widths, the gaps between elements — follows from those three.

Why it feels hard

Typography gets treated as forty independent decisions. It is closer to three decisions and a set of consequences. When a project feels like it is starting from zero, those three numbers were never fixed.

The seven dials

Personality in type comes from where these seven sit, not from the typeface. Change the typeface and hold the dials and you get a variant. Hold the typeface and change the dials and you get a different design.

1. Ratio — how far apart the levels sit
2. Hierarchy axis — whether size, weight, colour, case, space or family carries the structure
3. Leading — line height relative to size
4. Measure — the width of the reading line
5. Tracking — letter spacing, mainly at the extremes
6. Density — the ratio of ink to whitespace
7. Case and alignment

Glossary

Every term used elsewhere on this site. Linked terms jump here.

Text roles

A text role is a distinct job a piece of text does for the reader, named by that job. Not by its size, not by where it appears. "Caption", "input label", "section heading".

A role is a locked bundle of seven properties: size, weight, line height, tracking, colour, maximum measure, and the space below it. If you have only assigned a size, you have not yet made a role. The bundle is the unit you style once and reuse everywhere.

The full inventory

Around forty roles exist across interface and editorial work. A working system needs ten to fourteen. Collapsing them is the design work.

Collapsing them

• Create a role when a new job appears. Never when a new screen appears.
• If two roles always render identically, they are one role. Merge and rename to the broader job.
• Use size for level changes, weight for peer-level distinction. Two things at the same level should share a size and differ in weight or colour.
• Pick one or two signals per role. Size plus weight is enough. Size plus weight plus colour plus caps plus tracking is noise.
• Don't bind semantic heading level to visual size. Keep h1–h6 for document structure and let a separate visual role decide how it looks.
• Don't use placeholder text as a label. It disappears the moment someone types.
• Don't let a role exist that has never been used twice.

A ten-role starter set

Covers most products before any specialisation:

displaytitleheadingsubheadingbodybody-smlabelcaptioncodemetric

The scale

A modular scale multiplies a base size by a ratio, repeatedly. The common mistake is choosing the ratio first.

Pick your endpoints instead — body size, largest display size, and how many steps you need — then solve for the ratio:

Choosing r blind produces a 182px heading you will never use. A ratio of 1.5 compounds faster than intuition expects.

Build one

Ratios and what they feel like

Rules for the relative gaps

• Skip steps in use. A 1.25 scale with every step used reads as mush. Use every other step and you get an effective 1.56 between roles while keeping the in-between sizes available for edge cases.
• Cap at five or six levels. If you need more, the content structure is the problem, not the scale.
• Shift the ratio by viewport, not the roles. 1.2 on mobile, 1.333 on desktop, same content, same role names. This is what clamp() is actually for.
• Give metric numbers their own scale. A KPI at 40px above a 12px label is a legitimate 3.3× jump inside a 1.2 system. It works because the number is data, not a heading.
• Don't set two adjacent steps against each other. Close-but-different reads as an error, not a hierarchy.
• Don't go below 12px for anything a user is required to read, and hold a 15px floor for body in dense contexts.

Weight

Weight is the second hierarchy axis, and the one that works when size cannot. It is not perceptually linear: small increments are invisible.

• 200 units minimum between weights. 400 against 500 looks like a rendering bug. 400 against 600, or 400 against 700, reads as intentional.
• One body weight across the whole system. Variation lives in the roles around body, never inside it.
• Bold for emphasis inside a paragraph, italic for titles and voice. Not the reverse.
• Reversed text — light on dark — needs slightly less weight and slightly more leading than the same setting on white.
• Don't use weights below 400 under 14px. Thin strokes disappear at small optical sizes and on low-density displays.
• Don't adopt a family that only ships two weights. You will want 400, 500 or 600, and 700 at minimum.

Leading

Line height is inverse to size, and proportional to measure and x-height. Large text needs less because the eye does not need help finding the next line. A wide column needs more, because the return sweep is longer.

• Set leading unitless — line-height:1.55 — never in px, so it survives every size change.
• Large x-height faces need more leading than small x-height faces at the same nominal size.
• Don't chase strict baseline grids in component-based work. Vertical rhythm is a good idea that rarely survives real components. It is not a hill worth dying on.

Tracking

Letter spacing corrects for size. Most faces are drawn for one optical size and used at another.

• Positive below 13px — roughly +1% to +3%. Small type crowds.
• Negative above 40px — roughly −1% to −3.5%. Large type gaps.
• All caps always needs +5% to +10%. Capitals were never designed to sit together.
• Use an optical-size axis instead if the variable font offers one. It is a better correction than tracking.
• Don't track lowercase body text in either direction. It is already correct.
• Don't adjust between 14px and 36px. The letterfit is already correct there.

Measure and containers

Container width follows from measure. Measure is set per role, not per size; size only converts one to the other.

The 0.5 is the average character advance for most sans faces — use 0.45 for condensed, 0.55 for wide, 0.6 for monospace. So 66 characters lands at roughly 528px at 16px, 594px at 18px, and 660px at 20px. This is why "600px is the ideal column" is only true at one size.

Targets by role

Grid, margins and padding

Decouple the grid from the measure

The grid column is a layout constraint; measure is a reading constraint. Let the grid place the block, then give the text its own max-width inside that cell. A twelve-column layout can span eight columns for background and images while the paragraphs sit at 66ch.

Tune the grid so one common span lands near your body measure. On a 1200px container with twelve columns and 24px gutters, six columns span 588px, about 73ch at 16px. Half the grid is your measure.

Left-aligned text in a wider container beats centred narrow text: images and asides can break out to the full column while the reading line stays fixed.

Margins, gutters, padding

• The proximity check. If a container has no background or border, its internal padding must be smaller than the gap to its siblings, or the grouping inverts and the padding reads as separation. With a background, padding can safely exceed the gap.
• Optical top padding is always less than the number. The line box includes half-leading above the cap height, so 32px of visual space needs about 28px set. text-box-trim fixes this properly where support allows.
• Padding in em for buttons, badges and inputs, so small and large variants stay proportional automatically.
• Don't use the type scale for spacing. Spacing runs on its own 4/8 scale.
• Don't set multi-column unless each column can hold 40ch or more.

Spacing between roles

Space belongs to the element below it. This resolves most spacing questions, because it forces you to name which relationship the gap describes.

The relationship ladder

The cleaner derivation for headings

A 32px heading gets about 40px above and 12px below. The asymmetry falls out on its own, larger headings get more air automatically, and there is no separate spacing table per level.

• White space around a block is a stronger grouping signal than any border you can draw. Reach for space before you reach for a line.
• Scale section spacing with the viewport. 96px of air between sections is generous on desktop and oppressive on a phone.
• Don't use the same gap between paragraphs as between sections. It destroys scannability faster than any other single mistake.

Lockups

A lockup is two or three roles that always travel together with a fixed internal relationship. Style the lockup once, not the roles separately.

The five rules that hold for every lockup

• Internal gap smaller than external gap. If the eyebrow sits closer to the previous section than to its own title, the lockup does not exist.
• One dominant element. Two equals is not a lockup, it is two things.
• Differ on exactly two axes. Size and colour, or size and weight, or case and colour. Three is noise.
• Share one edge. Same left alignment or same baseline. Never both drifting.
• The subordinate must survive removal. If deleting the eyebrow breaks comprehension, it was never an eyebrow.

The recurring catalogue

Live gallery

How many popular versions are there?

Fewer than it looks. The structure of each lockup is constant. Only the surface treatment of the subordinate element varies, and there are usually three or four of those in circulation.

Vibes

A vibe is a coordinated setting of the seven dials.

The catalogue in words

Three things worth knowing about vibe

• Whitespace does more work than the typeface. Set the same page twice in one family, once at leading 1.35 with tight margins and once at 1.7 with wide ones. People will describe them as different brands.
• Match the vibe to content density, not to the mood board. Luxury typography collapses the moment there is real information to convey. Newspaper density feels oppressive on a marketing page.
• Commit to one hierarchy axis. Split hierarchy across size, weight and colour at once and everything reads as equally important, which is identical to nothing being important.

Dashboards

A dashboard is a constraint set, not a vibe. Everything on screen is nominally important, so the usual move of making one thing big is unavailable. You lose the loudest dial before you start.

What the constraint forces

Figures

Tabular figures give every digit an identical advance width, so numbers stack into a clean right edge. Proportional figures are drawn for running prose, where a narrow 1 beside a wide 0 reads better. In a column they misalign and the eye can no longer compare magnitudes by edge position.

Quick test: set a column of 111 above 000 and check whether the edges line up. If they do not and tnum does not fix it, the family is disqualified for tables, metrics and log output.

Where dashboard typography actually goes wrong

• Panel titles competing with the data. If the title is as loud as the metric, users read chrome instead of content. Titles want to be small, grey and deliberately quiet.
• Units and deltas set at the value's size. "142.7", "ms" and "+12%" are three different roles. Unit at 0.5–0.6× the value, baseline-aligned rather than centred.
• Truncation with no strategy. Long labels wrap, truncate, or tooltip. Choosing one per role is a real decision. Most dashboards default to whatever happens.
• Density set once. A monitoring wall and an analyst's laptop need different densities. A compact/comfortable toggle should scale the spacing scale, never the type scale.
• Delta colour with no second signal. Red and green alone fail for roughly one in twelve men. Add an arrow or a sign.

Table typography

• Header at 11–12px, uppercase, tertiary grey. Cell at 13–14px, primary. They should differ in colour and case, not size, so column widths stay stable.
• Numeric columns right-aligned with tabular figures. Text columns left. Never centre either.
• Row separation by hairline or by zebra, never both.

Typefaces

Why monospace fails for prose

Monospace forces every glyph into an identical advance width, so i and l get padded out while m and w get squeezed. Word shapes lose the silhouettes the eye matches at reading speed. Fixation efficiency drops and reading slows measurably past a sentence or two. Mono also consumes more horizontal space, so the measure runs long or the size shrinks.

Where mono does earn its keep: character-level precision (code, IDs, hashes, hex values), vertical alignment (columns of numbers, diffs, logs), and machine-voice signalling. A short label or a five-word tag in mono is fine. A paragraph of definition text is not.

Faces worth knowing, by job

Pairing

The reliable move is a superfamily: IBM Plex Sans with Plex Serif and Plex Mono, or Source Sans with Source Serif. Same skeleton, different voices, guaranteed harmony, and the decision is removed permanently.

For more contrast than a superfamily gives, the two faces must differ obviously: serif against sans, condensed against normal, high contrast against low. Two grotesques that differ slightly is the worst outcome, because it reads as a mistake rather than a choice.

• Two families plus a mono, maximum.
• Check the family ships the weights, italics and figure sets you need before falling in love with it.
• Test at your smallest real size on your worst target display before committing.
• Verify the family ships tnum before choosing it for anything numeric. The CSS property fails silently when the feature is absent, and some families have no tabular figures at all.
• Don't set ultra-geometrics for body. The circular o and e make word shapes too uniform and reading gets tiring over a page.
• Don't use a face with a very low x-height at UI sizes.

Colour and contrast

• 4.5:1 minimum for body. 3:1 for text above 24px, or bold above 19px.
• Three tiers of grey, no more. Primary, secondary, tertiary. A fourth tier is always an unresolved hierarchy question in disguise.
• Use a near-black rather than pure black on white. Pure black on pure white is harsher than it needs to be, and slightly reduced contrast reads as more comfortable over long sessions.
• Links need a non-colour signal too — underline, weight, or icon.
• Don't let colour carry hierarchy alone outside dense data contexts. Grey text is a de-emphasis signal, not a level.
• Don't encode meaning in colour without a second channel: an icon, a weight change, or a label.

Micro-typography

Small, cheap, and the fastest way to make work look considered.

• Non-breaking space before units and after short numbers, so 90 days never breaks across a line.
• Tabular figures wherever numbers stack vertically: font-variant-numeric: tabular-nums.
• Hanging punctuation on pull quotes where the layout allows it.
• One space after a period.
• Widows and orphans matter in headings. In body text they matter much less than people claim.
• Flush left, ragged right, as the default. Justify only with hyphenation enabled and a measure wide enough to avoid rivers.
• Don't centre paragraphs. Centring works for one to three lines and fails past that, because the left edge moves and the eye loses its return point.
• Don't set all caps beyond two or three words.

Stress tests

Test every role in its worst case before it ships. Four cases catch nearly everything.

The full checklist

Everything above, compressed.

Elsewhere on this site