Typography is a derivation, not a series of choices

Most typography feels hard because it is being done as forty independent decisions. It is closer to three decisions and a set of consequences. This manual is organised around what derives from what.

The one rule that reduces the others

Set your body size, your largest size, and your number of levels. Everything else — the ratio, every intermediate size, line heights, container widths, the gaps between elements — falls out of those three numbers plus a small number of relationships. When a project feels like it is starting from zero, it is because those three numbers were never fixed.

The seven dials

Personality in type does not come from the typeface. It comes from where these seven sit. Change the typeface and hold the dials, you get a variant. Hold the typeface and change the dials, 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

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 all of interface and editorial work. A working system needs ten to fourteen. The collapsing 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

If you need somewhere to begin, this covers most products before any specialisation:

displaytitleheadingsubheadingbodybody-smlabelcaptioncodemetric

The scale

A modular scale multiplies a base size by a ratio, repeatedly. The formula is trivial. The 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 is how you end up with 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 does the work when size cannot. It behaves differently from size: it is not perceptually linear, and 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 leading because the eye does not need help finding the start of the next line. A wide column needs more, because the return sweep is longer and easier to lose.

• 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 what the type designer could not know: your size. Most faces are drawn for a specific optical size, and you are almost always using them at a different one.

• 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 leave the middle of the scale alone-adjusted. Between 14px and 36px, do nothing.

Measure and containers

Container width is a consequence of measure, and measure is set per role, not per size. Size is only the input that 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. Trying to make one serve both is where most layouts go wrong. Let the grid place the block, then give the text its own max-width inside that cell. A twelve-column article layout can span eight columns for its background and images while the paragraphs sit at 66ch inside it.

That said, it is worth tuning the grid so one common span lands near your body measure. On a 1200px container with twelve columns and 24px gutters, columns are 78px wide, and six columns span 588px — about 73ch at 16px. Half the grid is your measure. That is a good grid.

Left-aligned text in a wider container beats centred narrow text, because images and asides can then 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. That single principle resolves most spacing questions, because it forces you to think about which relationship the gap is describing.

The relationship ladder

The cleaner derivation for headings

A 32px heading gets roughly 40px above and 12px below. The three-to-four times asymmetry falls out on its own, larger headings automatically get more air, and you never maintain a 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. You style the lockup once, not the roles separately. This is the level at which pairing questions actually get answered.

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 essentially constant. What varies is the surface treatment of the subordinate element, and there are usually three or four of those in circulation.

Vibes

A vibe is a coordinated setting of the seven dials. The panel below runs the same content through each one so you can see how much of the personality is coming from the dials rather than the typeface.

The catalogue in words

Three things worth knowing about vibe

• Whitespace does more work than the typeface. Set the same page in one family twice, once at leading 1.35 with tight margins and once at 1.7 with wide ones, and 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 not a vibe. It is a constraint set that produces a narrow band of workable vibes. The constraint is that everything on screen is nominally important, so the classic hierarchy move — make one thing big — is unavailable. You lose your loudest dial before you start.

What the constraint forces

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 their distinctive silhouettes, which is what the eye is actually matching at reading speed. Fixation efficiency drops and reading slows measurably past a sentence or two. Mono also consumes more horizontal space, so either the measure runs long or the size has to shrink.

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 permanently removed. This manual is set that way.

If you want more contrast than a superfamily gives you, the rule is that the two faces must differ obviously. Serif against sans. Condensed against normal. High contrast against low. Two grotesques that are only slightly different is the worst possible 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.
• 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

These are 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

Every role must be tested in its worst case before it ships, not after. Four cases catch nearly everything.

The full checklist

Everything above, compressed. These are defaults you break knowingly.