When type is doing the layout

On the smallest sites, typography is the layout.

The studio has been shipping a few sites recently with no images, no illustrations, no decorative elements. Pages that consist of a wordmark, a navigation, and several blocks of text. The typography is doing all of the work. There is nothing else.

This sounds like a constraint. It is, in practice, a discipline. A site that strips out everything except the type forces a different kind of attention from the designer. The decisions that get hidden by good photography (line length, vertical rhythm, type pairing, scale relationships) cannot be hidden any more. They are the design.

A few patterns I have settled on for sites where type is doing the layout.

Treat the page as a stack of type sizes. Three sizes, sometimes four. Display for headlines. Lede for the first paragraph after a headline. Body for everything else. Caption for metadata. The number of sizes is small. The decisions about what gets which size are explicit.

The mistake most designers make on type-only sites is to introduce a fifth or sixth size to “create variety”. The variety is in the rhythm, not in the size set. A site with three sizes used with discipline reads more interesting than a site with seven sizes used loosely.

Use the vertical rhythm as the grid. A type-only site does not need a column grid. It needs a vertical grid, set by the line-height of the body type. Every block of text is a multiple of the line-height. The space between blocks is a multiple of the line-height. The page reads as a single connected piece of writing rather than as a series of disconnected sections.

The cleanest implementation, in CSS, is to set the body line-height as a custom property and use it as the unit for vertical spacing. --rhythm: 1.6rem (or whatever the body line-height computes to). All margins, paddings, and gaps in the layout are multiples of --rhythm. The discipline is invisible to the user and substantial to the feel of the page.

Pick one paired typeface and resist adding a third. Display and body, in two faces or two cuts of the same family. Adding a third (a “decorative” face for accents, a mono face for code) is, on most type-only sites, the wrong move. The discipline of two faces produces a calmer page. The third face is almost always doing work that better contrast or weight could do without the additional file.

Set the measure deliberately. Most type-only sites I see set the measure either too narrow (for “readability”) or too wide (because the designer has not thought about it). The right measure, on most body type, is between 60 and 75 characters per line. The studio’s default is around 68, which is close to the traditional newspaper measure and reads at a comfortable pace.

Resist the urge to break the page up. Type-only sites can run for a long time without any visual interruption. Designers tend to want to add divider lines, spacer blocks, or rule ornaments to “give the eye a rest”. The eye does not need a rest if the typography is doing its job. The interruptions are usually a sign that the typography is not.

A few sites I keep open as references for type-only design.

Frank Chimero’s site, the older essays. The typography is doing the layout. There is almost nothing else.

Robin Rendle’s notes. Type-only. The numbered archive is the entire visual identity.

Are.na’s blog. Mostly type. The sparing use of images is the exception that proves the rule.

The London Review of Books website. Editorial design, mostly type, that has held up substantially better than the design-press sites that have redesigned themselves several times in the same period.

The single book on this that I keep coming back to is The Elements of Typographic Style by Robert Bringhurst. Almost everything in this post is in there, said better.

If you are stuck on a layout decision, on a site that does not have a strong photographic component, try removing every visual element until only the typography is left. The layout problem you were stuck on is, more often than not, a typography problem in disguise. The solution is upstream of where you were looking.