The Invisible Art of Typography

The measure — the length of a line of text — is perhaps the single most important factor in comfortable reading. Robert Bringhurst, in The Elements of Typographic Style¹, recommends 45–75 characters per line for single-column text, with 66 characters (including spaces) widely regarded as ideal. Too short a measure causes the eye to jump back too frequently; too long, and the reader loses their place on the return sweep.

Leading² — the vertical space between baselines — must be calibrated to both the typeface’s x-height and the measure. A generous measure demands more leading; a compact measure can tolerate less. The default line-height: normal in CSS typically resolves to roughly 1.2, but body text at comfortable measures generally benefits from values between 1.5 and 1.7. The relationship is not linear — it is a matter of feel, tested against the texture of the specific typeface at the specific size.

A modular typographic scale provides coherent sizing relationships. Rather than choosing arbitrary sizes like 14px, 18px, 22px, one might use a scale based on a ratio — say, the perfect fourth (1.333) or the augmented fourth (1.414). From a 1rem base, a perfect-fourth scale yields:

Beyond the macro decisions of size and spacing lies the realm of micro-typography — the fine details that distinguish competent typesetting from exceptional craft. These are the details that most readers never consciously notice, yet their absence creates a subtle but persistent sense that something is off.

/* Old-style figures for body text */
body { font-variant-numeric: oldstyle-nums proportional-nums; }

/* Lining, tabular figures for data tables */
table { font-variant-numeric: lining-nums tabular-nums; }

Experienced typographers speak of text having colour — not hue, but the overall greyness of a text block as seen from a distance⁵. Even colour comes from consistent spacing, appropriate weight, and balanced proportions. Uneven colour — caused by rivers of white space, inconsistent word spacing, or poorly kerned letter pairs — fatigues the reader even when they cannot articulate why.

Kerning, the adjustment of space between specific pairs of letters, is handled automatically by most modern fonts via the kern OpenType feature. The CSS property font-kerning: normal (or equivalently, font-feature-settings: "kern" 1) enables this. Compare unkerned to kerned: AV AV, To To, Wa Wa. Without kerning the bounding boxes are placed mechanically; with it, the V tucks under the A and the o nests against the T.

blockquote p::first-letter {
  margin-left: -0.4em; /* Approximate; adjust per typeface */
}

Modern OpenType fonts can contain thousands of glyphs and dozens of features, most of which go entirely unused because software does not enable them by default. A partial inventory of features relevant to web typography:

kern

Pair kerning — adjusts spacing between specific letter pairs. Essential; should always be enabled.

liga

Standard ligatures (fi, fl, ff). Enabled by default in most browsers.

dlig

Discretionary ligatures (ct, st). Decorative; use sparingly.

onum / lnum

Old-style vs. lining figures. See the Figures section above.

pnum / tnum

Proportional vs. tabular figures. Proportional for running text; tabular for aligned columns.

smcp

Small capitals. Vital for abbreviations and acronyms in body text.

c2sc

Capitals to small caps. Converts uppercase letters already typed as capitals.

frac

Diagonal fractions. Turns sequences like 1/2 and 3/4 into proper fraction glyphs: ½, ¾.

ordn

Ordinals. Renders 1st, 2nd, 3rd with proper ordinal glyphs from the font — no fake superscripts required.

ss01–ss20

Stylistic sets. Font-specific alternate designs — a single-storey a, a tailless l, a round y.

swsh

Swash capitals and alternates. Decorative flourishes for display use.

Custom variable axes

Some variable fonts ship registered axes (wght, opsz) and custom ones — tag names in UPPERCASE to mark them as outside the OpenType spec. Fraunces, for example, exposes SOFT (softness of terminals) and WONK (a flag for quirkier alternates). Switch to Fraunces + IBM Plex Mono in the toolbar and compare: Hamburgefonts — the g, a, and e swap to softer, more wonkish variants. Custom axes are addressed via font-variation-settings: "SOFT" 100, "WONK" 1 — the only place font-variation-settings is the right tool over a dedicated property.

Typography does not exist in a vacuum — it lives on a background. In dark mode, the relationship between text weight and background luminance inverts. Light text on a dark background appears heavier than dark text on a light background at the same font-weight, a phenomenon called irradiation. Compensate by reducing the font weight slightly or increasing letter-spacing. The WCAG 2.2 standard requires a contrast ratio of at least 4.5:1 for body text and 3:1 for large text (above 18pt or 14pt bold).

Toggle the Dark Mode button above and observe how the type colour, weight adjustments, and spacing respond. Good dark-mode typography is not simply an inversion — it is a recalibration.

The difference between setting some text in a nice font and crafting typography is the accumulation of dozens of small, intentional decisions. No single property transforms the reading experience — but together, they compound. Proper ligatures eliminate visual snags. Old-style figures blend into prose. Small caps tame abbreviations. A baseline grid creates subconscious order. Kerning prevents letter-pair gaps. Hyphenation smooths the right rag. Hanging punctuation aligns optical edges.

Use the Crafted Typography toggle above to switch between the styled and unstyled versions of this page. The text is identical; only the CSS changes. Notice how the “unstyled” version — using only a typeface, basic sizing, and default spacing — feels subtly but unmistakably different: less polished, less comfortable, less considered.

That difference is the craft of typography.