Web Typography Is a Hundred Small Decisions

Every brand refresh includes a moment where the room debates typefaces for two hours. Serif or sans, grotesque or humanist, the licensing spreadsheet, the mood boards. Then the chosen face ships to the web wrapped in default settings, and the result reads worse than the specimen ever suggested it could. The typeface was never the problem. The hundred small decisions after the typeface were, and nobody made them.

Here is the unglamorous list of what we actually spend typography time on, in roughly the order it matters.

Measure, leading, and the reading column

Line length is the most abused variable on the web. Body text wants somewhere between 45 and 75 characters per line; marketing sites routinely stretch to 120 because the container was wide and nobody objected. We set measure in ch units and defend it like a brand color, because it is one: a brand that is exhausting to read has a voice problem no copywriter can fix.

Leading follows measure. Wider columns need more line height, tighter columns need less, and headlines need dramatically less than the 1.5 default that body text inherits. A display headline at 1.5 line height looks like a legal disclaimer that got promoted. We ship a leading scale, not a leading value: tight for display, standard for body, loose for captions and fine print.

Fluid type without the wobble

We size type with clamp() so the scale breathes between viewports instead of jumping at breakpoints. But fluid type has a failure mode nobody warns you about: when every size scales independently, hierarchy drifts. A headline and a subhead that sit in perfect ratio at 1440 pixels can crowd each other at 900. So we scale the ratio, not just the sizes. The scale is defined once, as custom properties, and every size derives from it. When hierarchy drifts, we fix one number instead of forty.

The variable font dividend

Variable fonts have quietly become the best deal in web design. One file, every weight, plus axes the flat versions never offered. Two we now consider essential:

Optical sizing. Faces with an opsz axis change their construction for small and large settings, tighter spacing and sturdier details at caption sizes, more refinement at display sizes. Turned on properly, it is the difference between type that is merely present and type that feels engineered for its position.
Grade. A grade axis lets you adjust weight without changing letter widths, which means dark mode text can shed the optical bloat it gains on dark backgrounds without reflowing a single line.

The performance argument closed the debate anyway. A single variable file usually costs less than the three static weights it replaces, which keeps us inside the font budget with room for a display face.

Punctuation, numerals, and the details that read as care

Nobody consciously notices hanging punctuation, real small caps, or tabular numerals in a pricing table. Everyone notices their absence, they just cannot name what feels cheap. Our default checklist for every build: proper quotes and apostrophes enforced at the CMS level, font-variant-numeric set to tabular figures anywhere numbers align vertically, letter-spacing added for all-caps labels, and text-wrap: balance on headlines now that browser support has arrived. Total cost, maybe an hour. It is the highest-yield hour in the project.

Make it survive the CMS

The final decision is governance. Typography built as a set of carefully art-directed pages dies the first week the client publishes content. Typography built as a system, where the rich text styles in the CMS map one-to-one to the type scale and nothing else is possible, survives indefinitely. We would rather ship a smaller system the client cannot break than a virtuoso one they will.