Space is a material. Layout and typography on the web

Most websites don't look alike because of their colors. They look alike because of how they use space: the same centered hero, the same row of three cards, the same small label in capitals above every heading. Layout is the part of design nobody notices and everyone feels.

While building the new sdmk.design, we didn't start with pages. We started with a catalogue: twelve grids and nineteen typographic approaches, each one tied to a rule from someone who earned the right to make rules, from Josef Müller-Brockmann to Robert Bringhurst. Anything we couldn't trace back to a source was marked as our own opinion, or dropped.

This article walks through what we kept and why. The figures are redrawn from those explorations. Red stripes are columns, blue lines are axes, grey blocks stand in for images.

A grid is a decision you make once

In Grid Systems in Graphic Design (1981), Müller-Brockmann describes the grid as a way to order information so a reader can find their way through it, not as a cage for the designer. On the web, the twelve-column grid won for a very practical reason: twelve divides into halves, thirds, quarters and sixths without leftovers.

Our setup is twelve columns on desktop, eight on tablet and four on a phone, with a 24 px margin and gutter on desktop. Every block starts on a column edge. Text that wraps can end inside a column, but it always starts on an edge.

Figure 1. A page on the twelve-column grid. The title spans nine columns, the intro three, the image nine, and nothing floats between the lines. Drawing: sdmk.

The value of a grid isn't the columns. It's that every decision about width has already been made, so the remaining decisions can be about content. Karl Gerstner made the same point in Designing Programmes (1964) with his grid for Capital magazine: 58 units that could be read as two, three, four, five or six columns. One system, many compositions.

Figure 2. Seven ways to divide the same twelve columns: full width, halves, thirds, quarters, an asymmetric 5 + 7, a label column with content (3 + 9), and a modular row with one field left empty on purpose. Drawing: sdmk.

That last row matters. In Müller-Brockmann's modular grids an empty field is part of the composition, not a gap waiting to be filled. A page that leaves one module empty tells the reader that what remains was chosen.

Other grids we tried

Twelve columns are the default, not the only option. We drew alternatives to see what each one would do to the character of the site.

24 columnsGerstner, finer steps that stay compatible with 12

Split screen 7 | 5Verso and recto of a spread, like i-D

Modular 6 × 4Müller-Brockmann, empty fields on purpose

Canon of the pageVan de Graaf and Tschichold, 2 : 3 : 4 : 6

A strong axisTschichold, asymmetric typography

Golden section 8 : 5Fibonacci and Le Corbusier, weakest footing

Figure 3. Six of the twelve grid explorations. Red is the column grid, blue the second grid or axis. Drawings: sdmk, after Karl Gerstner, Josef Müller-Brockmann, Van de Graaf and Jan Tschichold.

Not every one made it. A 24-column grid gives finer steps, but on a phone it collapses into the same four columns anyway. The canon of the page, the proportions Jan Tschichold traced back to medieval books, is beautiful on a fixed sheet and awkward in a browser window that changes width every time someone resizes it. The golden section looks principled, but we found no source showing that it reads better than a plain division, so it stayed an experiment.

What we did keep is the strong axis from Tschichold's Die neue Typographie (1928): labels hang on one vertical line, content starts from another. You can see it on this page. The table of contents sits in the first three columns and the text starts on the fourth.

Space between things is measured too

Bringhurst puts it simply: add and delete vertical space in measured intervals. If the space between a heading and its text is a random 22 px on one page and 30 px on another, readers won't name the problem, but they feel the page is less sure of itself.

We use steps of 4 px and four levels of distance. The closer two things belong together, the less space between them.

Figure 4. The spacing scale on the left, and how four of its steps separate a section, a block, an element and the inside of an element. Drawing: sdmk.

Line length is a reading problem

The widest a paragraph should go isn't a layout question. It's about how far the eye can travel along a line and still find the start of the next one. Bringhurst considers 45 to 75 characters a satisfactory line, with 66 as the ideal, and 40 to 50 when text runs in several columns. Butterick gives a slightly wider range of 45 to 90.

About 40 characters. Fine for a narrow column, tiring in a long text.

Short lines make the eye jump back to the left edge so often that reading turns into a series of small interruptions. It works in a caption or a sidebar, less so in an essay.

About 66 characters. The line Bringhurst calls ideal.

At this length the eye moves comfortably along the line and still finds the start of the next one without searching. Most well-set books land somewhere near here, and so should the main text of a web page, whatever the screen width.

About 120 characters. What happens when text simply fills a wide screen.

Long lines look efficient because they fit more words on the screen, but the return trip to the left edge gets longer with every line, and readers start losing their place, rereading the same line or skipping one entirely without noticing it.

Figure 5. The same text at three line lengths. On a phone all three collapse to the screen width, which is why line length is a desktop problem first. Drawing: sdmk. Ranges from Bringhurst and Butterick.

On our grid body text never spans more than six of the twelve columns. The column you are reading right now is six columns wide, and at 16 px it holds close to 90 characters per line. That is inside Butterick's range but above Bringhurst's, and it's one of the things we are still tuning. Rules like these are most useful when you measure your own pages against them.

Two sizes are usually enough

The Vignelli Canon recommends using as few type sizes as possible on a page, ideally two, with the larger one usually about twice the smaller. Butterick's advice on headings points the same way: separate a heading from the text with space first, then with weight, and only then make it bigger by the smallest step that works.

Hierarchy doesn't need size. It can come from weight, from position, and from tone: grey and black at the same size are enough to tell an introduction from the point. The only condition is that the grey stays readable. WCAG asks for a contrast of at least 4.5 : 1 for normal text. Our grey, #6B7473, has 4.8 : 1 on white.

Common pattern, seven sizes

Our approach

Design that lasts

Strategy, brand and product

We help teams build visual systems that grow with the company.

Trusted by teams across Europe

Learn more

Sample text for comparison

What we use, two sizes

Design that lasts

Strategy, brand and product

We help teams build visual systems that grow with the company. The difference between the point and the context is carried by tone, not by another size.

Learn more

Figure 6. The same content twice. On the left, seven sizes, capitals and a pill button compete for attention. On the right, 32 px and 16 px, with weight and tone doing the rest. Drawing: sdmk, after the two-size rule in The Vignelli Canon.

This journal bends the rule a little on purpose. Titles, intros and quotes are set in Fraunces, a second typeface next to Plus Jakarta Sans. A magazine is allowed a second voice. A product interface usually isn't.

Labels are sentences

Some patterns repeat so often across generated and template websites that they start to look like typography itself: labels in tracked monospace capitals, an eyebrow like “01 — Services” above every heading, an arrow after every link. None of them is wrong on its own. They just shouldn't be the default.

The sources are clear about why. Butterick recommends all caps only for text shorter than a line, and always with extra letterspacing. A monospaced font is harder to read and is meant for code, not for labels. Bringhurst says to letterspace strings of capitals and not to letterspace lowercase without a reason.

Common pattern

01 — Case study

A brand system for a growing product

2024 / Branding / Read more →

What we use

A brand system for a growing product

Case study, branding, 2024

Capitals without spacing

UX and AI for EAA compliance

Capitals tracked by 8 %

UX and AI for EAA compliance

Figure 7. Top: the same case study label twice, once in tracked monospace capitals and once as a sentence in the text typeface, told apart by tone and position. Bottom: abbreviations are the one place where capitals belong, and they read better with a little extra space. Drawing: sdmk.

A label works best when it reads like a short sentence: the text typeface at 14 to 16 px, sentence case, set apart by a grey tone and its place on the grid.

Small things that make text look set, not typed

The last group of rules is the least visible, and the one that most often separates a typeset page from a typed one.

Numbers in columns use tabular figures. In running text, proportional figures look better. In a column of values that should line up, Butterick recommends tabular figures, where every digit has the same width. That needs one line of CSS, font-variant-numeric: tabular-nums, not a monospaced font.

Proportional figures

Phase	Days	Hours
Discovery	11	111.5
Brand system	48	808.0
Design system	71	1,170.5
Handover	10	41.0

Tabular figures

Phase	Days	Hours
Discovery	11	111.5
Brand system	48	808.0
Design system	71	1,170.5
Handover	10	41.0

Figure 8. The same table in the same typeface. With tabular figures the digits line up by place value, so the numbers can be compared at a glance. The values are a sample, not a real project. Drawing: sdmk.

Numbers stay with their units. Bringhurst asks to keep short numerical expressions together. A non-breaking space between “24” and “px”, or between a day and a month, keeps a line break from splitting them.

Punctuation can hang. Opening quotes and bullets can sit outside the text edge so the letters, not the marks, line up with the grid. CSS has hanging-punctuation for this, though so far only Safari supports it. Elsewhere it takes a negative indent.

Capitals are for abbreviations. Plus Jakarta Sans has no real small caps, so we don't fake them. Capitals are kept for abbreviations, tracked slightly as in Figure 7.

Space is the cheapest brand asset

Generated layouts tend toward the same average: the most probable hero, the most probable card, the most probable label. We wrote about that sameness in Recognizable, or invisible. Typography and space are where it shows first, and where it is cheapest to fix. They don't need a new illustration style or a bigger budget. They need a few decisions and the discipline to keep them.

If you want a short version to pin above your desk:

Pick a grid and let every block start on a column edge. Twelve columns, because they divide every way you'll need.
Measure space in steps. The closer things belong together, the smaller the step between them.
Keep body text between 45 and 75 characters. Measure it on the real page, in the real typeface, not in the layout file.
Use two sizes before you reach for a third. Let weight, tone and position carry the rest of the hierarchy.
Write labels as sentences. Save capitals for abbreviations and monospace for code.
Leave a field empty when nothing belongs there. Empty space is a decision, not a leftover.

None of this is new. Most of it is older than the web. That is exactly why it still works.