When a new project arrives, the first thing we make is not a grid, a moodboard or a logo sketch. It is one paragraph of the client's real text, set in two or three typefaces at the size a reader will actually meet it.
It sounds slow. In practice it saves us weeks, because almost every later decision depends on that paragraph.
The paragraph decides the grid
A column is only as wide as a comfortable line. Once we know the type size and how many characters fit on a line, the column width follows, and the grid is simply that column repeated with a gutter between. Drawing the grid first and pouring text into it gets this the wrong way round: the text ends up too wide to read or too narrow to set without ugly gaps.
Start with the reader's eye at the right distance from the page. Everything else is arithmetic.
For the Tidewater Archive, the paragraph was a catalogue entry for a ship's log from 1782. Set at 16 pixels with generous leading, it came to about 66 characters a line, and that measure became the reading column on every screen and every printed form.
What we test in the first week
We print the paragraph, pin it to the wall and look at it from a normal reading distance. Then we change one thing at a time:
- Size, in steps of one point, until the text reads without effort.
- Line height, until the eye finds the next line without searching.
- Measure, until a line feels like one thought rather than two.
Only after that do we set a heading above the paragraph and ask how much bigger it needs to be. Usually the answer is less than the client expects.
A scale with few steps
We keep type scales short. Six sizes cover almost everything a website or a book needs, and fewer sizes mean fewer decisions for the person who updates the site after we leave. In CSS, each size is a variable, so changing the whole scale is one edit:
:root {
--fs-body: 1rem;
--fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
}Why it matters to clients
Clients rarely ask about line length. They notice the effect: reports that people finish, signs that are read at walking pace, a website where the text does not feel like work. The order we work in is how we get there:
- Set the paragraph.
- Derive the column and the grid.
- Design the headings, images and everything else around them.
The grid still matters. It is just the second thing we draw, not the first.
