Typography is the interface

On a site whose product is writing, typography is not a layer of polish over the interface. It is the interface. A reader’s opinion of your ideas is formed while their eyes move through your paragraphs, and everything about that movement — its speed, its comfort, its rhythm — is typography. My claim: get four decisions right and the design is mostly done; get them wrong and no amount of decoration recovers it.

Measure: the width of a line

The single highest-leverage decision is line length. Body text should run 60–75 characters per line. Shorter, and the eye jumps back before finding a rhythm; longer, and the return sweep to the next line loses its place, producing the re-read-the-same-line stutter every reader knows and nobody names.

Implementation is one line — max-width: 68ch on the text column — plus one rule of discipline: the measure is enforced on the column, never the page. On a wide monitor the margins grow; the text never does. Most “modern” redesigns that feel subtly exhausting to read are full-width text on a 27-inch display, a 200-character measure nobody would ever typeset on paper.

Size and leading: air for long-form

Browser-default 16 px is a UI convention, not a reading recommendation. Long-form body text reads comfortably at 17–20 px, and the difference over three thousand words is the difference between finishing and drifting off. Pair it with line-height around 1.7 — noticeably more than the 1.5 that suits buttons and labels — because paragraphs need vertical air that interface chrome does not.

Headings invert the rule: large type needs less leading, around 1.1–1.3, or the lines of a wrapped heading float apart into separate thoughts. Using one line-height token everywhere guarantees it is wrong somewhere.

Rhythm: space that means something

Vertical spacing is doing semantic work, whether you intend it or not. The space above a heading should be two to three times the space below it — the heading must visibly belong to the section it introduces, not dangle equidistant between two. Reversing this ratio is possibly the most common typographic error on the web, and the fix costs nothing but attention.

The same principle scales down. Derive every gap from one spacing scale and paragraphs, lists, and figures fall into a rhythm the reader feels as calm without ever noticing why. Arbitrary pixel values, each reasonable alone, accumulate into low-grade visual noise — the kind of clutter the discipline of removing things exists to catch.

The details that cost two lines of CSS

Modern CSS quietly solved several old miseries, and adopting the fixes is nearly free. text-wrap: balance on headings ends the single orphaned word on the second line. text-wrap: pretty on body text prevents paragraph-ending orphans. An underline offset keeps link underlines from slicing through descenders. Real typographic characters — curly quotes, em dashes — come free from a Markdown plugin and signal care at a level readers register without articulating.

None of these are visible as features. All of them are visible as quality.

Performance is a typographic property

Fonts sit on the critical rendering path, so the type system and the performance budget are the same conversation. Self-host the files, subset them to the characters you use, preload the one the title renders in, and let text show in a fallback while fonts load — invisible text during load is a typographic failure as real as bad kerning. A latin subset lands well under half the weight of the full file, which on a phone is felt directly in Largest Contentful Paint.

Budget honestly and you will discover something clarifying: you can afford about two font files. Spent well — one distinctive display face, one hardworking body face — that is not a limitation. It is the whole identity, and on a text site it does more than a logo ever will.