The quiet revolution of reading on screens.
A new approach to typographic hierarchy
For decades, web typography was a compromise. Designers picked from a handful of system fonts and hoped for the best across browsers, devices, and viewing distances. Today the constraints have softened — but the principles have only become more important. Rhythm, contrast, and restraint do more than any single typeface ever could.
First principles of type
Three measurements decide whether a paragraph feels welcoming or fatiguing: the size of the body text, the height of each line, and the length of each measure. Get those right and almost any typeface can sing. Get them wrong and the most beautiful font becomes a wall.
Below, the same passage is shown with the styles you've configured. Try changing the line height on P by even 0.1 — the rhythm shifts immediately.
Hierarchy and rhythm
Good hierarchy isn't loud. It's predictable. Readers should be able to glance at a page and know, without thinking, where to land first, where to land second, and where the body begins. You can read more about this in an excellent essay by Robert Bringhurst.
Typography is the craft of endowing human language with a durable visual form.
— Robert Bringhurst, The Elements of Typographic Style
The essentials
- Pick a typeface with a clear voice — not just one that "looks clean".
- Set body text first; let headings react to it.
- Measure (line length) belongs between 45 and 75 characters.
- Test at the smallest size your users will actually see.
Section Label
Use H6 sparingly. It's the quietest voice in your hierarchy — perfect for metadata, captions, or section dividers in long-form content. Captions and fine print live in the SMALL tag. They should still pass contrast.