Chapter 08
Micro-typography
Almost everything in an interface is text. And text has a thousand small decisions — the quote mark that curls, the title that leaves no word alone, the line that lasts just long enough — that decide whether the page breathes or holds its breath.
Take any product and mentally remove the images, the buttons, the borders — what’s left is text. It’s almost all text: the field names, the error messages, the numbers, the labels, the headings, the copyright line at the bottom. Typography isn’t the good suit a page puts on for important occasions: it’s the material almost everything the user reads is made of. And precisely because it’s everywhere, its flaws are spread everywhere too — invisible one by one, heavy all together.
Micro-typography is the finest layer of this craft: not the choice of typeface or scale, but those tiny marks that separate “typed” text from typeset text. The straight quote that should curl. The title that leaves an orphan word on the last line. The line of text twice as long as the eye can bear. They’re details no one could name, but everyone feels: a page with considered micro-typography simply looks more serious, without anyone knowing why.
Six demonstrations, each on a decision that on its own feels negligible. And as always here, no libraries: the modern browser has learned to do almost all of it on its own — text-wrap: balance, OpenType features, variable-font axes, the ch unit, hyphens: auto. In a few years the platform has reclaimed what for decades was the typographer’s exclusive trade.
The marks that curl
The keyboard lies: it gives you a single mark for several different jobs. The straight quote (") pretends to be two typographic quotation marks, the straight apostrophe (') pretends to be a real apostrophe, the hyphen (-) pretends to be three different dashes. Typography keeps them apart because they do different jobs: the en dash (–) joins ranges, the em dash (—) opens an aside, and the ellipsis (…) is one glyph, not three dots stuck together.
Typographic punctuation · language-aware
Type on the left “the rough way” — with straight quotes, double hyphens, three dots — and read the typeset version on the right. The rules are few and honest: … becomes …, — becomes an en dash and --- an em dash, an apostrophe between two letters curls into ’. Double quotes alternate open/close, and here’s the bilingual part: in English they become double curly quotes (””), in Italian the guillemets («») — because the convention changes with the language, and pretending it’s universal is the first mistake.
The typeset sample carries hanging-punctuation: first last: the opening quote “hangs” past the margin, so the left edge of the text stays optically straight instead of looking indented. It only has real support in Safari — and that’s perfectly fine: where it isn’t supported, the text stays typeset, it just doesn’t hang. That’s the difference between a progressive enhancement and a promise the browser can’t keep.
The title that doesn’t break badly
The way a browser wraps text is “greedy”: it fills every line to the brim and dumps the leftovers onto the last one. For a long paragraph that’s fine. For a two-line title it’s a disaster: the last line ends with a single word, suspended, and the title looks broken. The lone word at the end is called an orphan (in a title) or a widow (at the bottom of a paragraph), and for years it was fought by hand, slipping in <br> tags or non-breaking spaces where needed.
The page breathes when the title leaves no word alone
The default wrap fills every line to the brim and dumps the leftovers onto the last one: often a single word, suspended in the void. A last line of one word is called a widow, and it’s the small tear that makes a page look neglected.
text-wrap · balance for titles, pretty for body
Two properties, two jobs. text-wrap: balance distributes the words of a title across lines of similar length: no more orphans. The browser only applies it to short blocks (typically up to six lines) because it’s an expensive calculation — and that’s the right call, a title almost always is short. text-wrap: pretty instead works on the body: it looks at the last lines of the paragraph and avoids the widow, recomposing just enough.
Turn the switch off and greedy wrapping returns: watch the last line of the title shrink to a single word. The re-wrapping isn’t animated — text sliding between one arrangement and another would read as a jerk, not a transition. It just switches. It’s one of the recent CSS wins that saves the most manual markup: zero hand-placed <br>, zero non-breaking spaces, zero fixes that break the moment the copy changes.
The figures a font can set
A font doesn’t just carry letters: it carries instructions on how to set numbers, and those are OpenType features that stay off until you call them by name. Epilogue does two of them that you see at once: it turns 1/2 into the single glyph ½ (a real fraction, not three stacked characters), and it gives every digit the same width so a column of numbers lines up vertically. The two switches turn on exactly these two.
1 1/2 cups of flour, 3/4 sugar, 1/3 milk
OpenType features · fractions and tabular figures
Turn on Fractions and watch 1/2, 3/4, 1/3 recompose into the glyphs ½ ¾ ⅓ — that’s the frac feature, switched on via font-variant-numeric: diagonal-fractions. Turn on Aligned figures and the right-hand column snaps into line: tabular-nums gives every digit the same box, so the narrow “1” no longer makes the edges wobble (the lesson of chapter 06, seen here from the font’s side). Off, they stay “typewriter” fractions and variable-width digits.
And here is the sharpest honesty lesson of the chapter, the one that bit me while writing it. Not every font composes these features, and when one is missing, setting it throws no error: it simply does nothing. The first version of this demo asked the font for stylistic sets (the single-storey ‘a’, the slashed zero) it didn’t have — and the buttons changed nothing, silently. So the demo now shows only frac and tnum, after verifying on the real rendering that Epilogue genuinely composes them. The rule of the whole playground holds for the person building it too: don’t promise what the underlying material can’t deliver — and check the material, instead of trusting the documentation.
Weight that follows size
A variable font has a continuous weight axis — Epilogue runs from 100 to 900 — and this enables an optical rule that static assets can’t apply. The larger a text, the lighter it wants to be: at large sizes a medium weight looks clumsy, bloated. The smaller a text, the more it wants a touch of extra weight, otherwise the thin strokes close up and the line fades. The same “perceived weight” is reached with different numbers depending on the size.
The colour of the page
The perceived weight of a block of text depends on its size: the same numeric value changes its voice depending on how large it is.
Caption · 13px, the heaviest weight
Variable weight compensated per size
With the switch off, the title, body and caption all use the same weight (500): watch the title look heavy and a little crude, and the caption thin, almost faded. Switch it on and each size takes its compensated weight — title at 380, body at 460, caption at 540 — via font-variation-settings: ‘wght’. The “typographic colour”, the average grey the text leaves on the page, becomes even across the three sizes. It’s something you feel before you see it.
It’s the kind of finishing that separates typography “just placed there” from typography that’s tuned. It once required three different cuts of the same typeface (display, text, caption): weights drawn on purpose for each size. Today the variable axis gives it for free, as long as you remember that weight isn’t an absolute value but a function of size. The transition between the two states uses the token durations, so with prefers-reduced-motion it switches cleanly, with no morphing.
The right measure
Typography begins long before the choice of typeface: it begins with how long a line is. The “measure” — the number of characters per line — is perhaps the decision that most affects the readability of a long text, and almost no one sets it deliberately. Too long, and the eye struggles to find the start of the next line. Too short, and the constant line breaks shatter the rhythm. The comfortable zone for continuous reading sits between roughly 45 and 75 characters.
Typography begins long before the choice of a typeface: it begins with how long a line is. It’s a decision the eye feels before the mind can name it. Drag the slider and watch where the text stops being comfortable.
Measure in ch · 45–75 is the cozy zone
Drag the slider and watch where the text stops being comfortable. The measure is counted in ch, the unit that equals the width of the current font’s “0”: saying max-inline-size: 64ch means “about 64 characters per line”, whatever the font size. It’s far more robust than a width in pixels, which changes meaning the moment the text size does. The value in ch is shown with tabular-nums, so it doesn’t jitter from 9 to 10 — the lesson of chapter 06.
Two honest details. First: the leading is tied to the measure — longer lines get a touch more line-height, because the eye needs more help finding the next line when the horizontal jump is wide. Second: the verdict “cozy / too tight / too wide” uses a sober grey out of zone, not an alarm red. The right measure is a range, not a law: 44 characters aren’t an error, just a little tight. The system advises, it doesn’t scold.
Honest hyphenation
The last mark is the most misunderstood: justified text. Aligning both margins seems the height of typographic order, but on narrow measures it’s often a trap. Without hyphenation, to even out the right margin the browser stretches the spaces between words — and when a long word won’t fit, it stretches them too far, until it creates “rivers”: white streams that run vertically through the block and disturb the reading.
Justification promises order and sometimes delivers disorder: without hyphenation, particularly long words force the browser to stretch the spaces of the preceding line. With hyphenation on, instead, words break where the language allows and the grey of the text becomes even again.
hyphens: auto · and why lang is mandatory
Two switches on the same paragraph. Turn on only Justified and watch the spaces dilate on a narrow measure. Add Hyphenation (hyphens: auto) and the words break where the language allows: the spaces become regular again, the grey of the text grows even. Justification and hyphenation are a pair — the first alone, on narrow columns, does more damage than elegance.
And here’s the honest point, the most common typographic bug on the web: hyphens: auto works only if the element declares its language with the lang attribute. Without it, the browser doesn’t know which hyphenation dictionary to use and simply doesn’t hyphenate — silently, with no error. Here the paragraph carries lang=“en”, always. And the default position across the whole playground stays ragged right: an uneven right margin with clean spaces is almost always more readable than forced justification.
Six tiny marks, each invisible on its own. The quote that curls in the right language, the title that leaves no orphan words, the features that give the font a voice, the weight that tunes itself to size, the line as long as the eye can bear, the word that breaks only if it knows what language it’s written in. None of these details is noticed when it’s done well — what gets noticed is that the page, on the whole, breathes. And that’s the principle of Altrove again: everything that happens without the user noticing is the real power of an interface, while they’re simply reading.
The next chapter leaves the page and returns to components, with a seemingly trivial question: the anatomy of a toggle. Because the switch is the only control that behaves like a physical object — it has two positions, not two states — and that difference changes the whole way you draw it.