The shape of a page

There is a particular pleasure in opening a book and finding the page well-set. The margins are generous. The line is short enough that your eye does not have to travel — but long enough that the prose breathes. The lead-in to a paragraph is a small comma's worth of space. The headings recede instead of shouting.

We tried to get this right.

Measure

A measure — the width of a line of text — has been studied for a hundred years. The consensus, with some quibbling, is that around 65 to 75 characters is best for sustained reading. Wider, and the eye loses the next line; narrower, and the rhythm is too short.

Wat sets its prose to 68 characters, in Source Serif 4 at 19px. It looks like this. You can read for a long time without strain.

Hierarchy

A page has only a few levels of structure: title, section, subsection. We don't believe in five.

Anything finer than that should be done with paragraphs and emphasis.

Code

A blog about programming should treat code as a citizen, not a guest.

public sealed record Page(int Id, string Slug, string Title)
{
    public string Excerpt(int max = 160) =>
        Title.Length <= max ? Title : Title[..max] + "…";
}

We use a monospaced face with programming ligatures (!=, =>, <=), a soft background, a hairline border, and a colored rule on the left to give it just enough weight without becoming a slab. Inline code is treated lightly: a faint tint, a little padding, no shadow.

And a note on color

The accents on this site are red, white, and blue. They're not American. They're Luxembourgish — the same red and blue that flies over the Pétrusse valley every morning. We like that the page is mostly black ink on warm paper, with a single thin stripe of red, white, and blue at the top of the screen.

It's the kind of detail that pays you back every time you open a tab.