Skip to article body
A geometric composition of intersecting grid lines and charcoal rectangles, broken by one vermilion circle.
A geometric composition of intersecting grid lines and charcoal rectangles, broken by one vermilion circle.

Typography · Process · Field Notes

The Grid Is a Promise

A grid is less a cage than an agreement with the reader, and it is what makes breaking it mean something.

By Cairo Studio, Studio 7 min read

Every layout starts with a decision most people never see: where the lines go. Before a word is set or an image placed, we divide the space into columns, rows and margins. It looks like maths. It works like a promise to the reader about where to look, what matters and what comes next.

A grid is a set of promises

A good grid promises consistency. The most important thing is always in the same place, captions sit where captions sit, and the eye never has to learn the page again. That predictability is not boring. It frees the reader to think about the content instead of the container.

The common mistake is treating the grid as decoration, something you switch on for a moodboard and off when it gets in the way. A grid only pays off when it is kept. Break it carelessly on page three and you have broken the promise you made on page one. Our own landing pages sit on 12 columns, with a 32 pixel margin on desktop and 16 on phones, and every section keeps to it.

The baseline is a heartbeat

Under the columns runs something quieter: the baseline grid, the invisible lines that text sits on. When body text, headings and captions share one rhythm, a dense page still feels calm. When they do not, readers feel a low unease they cannot name, like a picture frame hung slightly off level.

What a good grid gives you

  • Speed, because many decisions are already made.
  • Coherence, so twenty screens look like one product.
  • Hand off, so someone else can extend the work without calling you.
  • Tension, because you cannot break a rule that does not exist.

Breaking it on purpose

Here is what separates a layout from a composition: the deliberate break. One element that runs past the margin, a headline that ignores the column, an image bled to the edge. These moves work because everything around them is disciplined, so the break reads as intent.

So we build the strictest grid the project can carry, live inside it until it feels natural, then break one rule clearly. Readers will never name any of this. They will just feel that the page is easy and that someone was paying attention.

Sunlight through a carved wooden lattice throwing a grid of light across a woman walking past

A grid you can walk through.

A 12 column grid is a good default because it divides into halves, thirds and quarters. Our own landing pages sit on 12 columns with a 32 pixel margin on desktop and 16 on phones. The right grid is the one the whole team actually keeps.

It is the set of invisible lines that text sits on. When body text, headings and captions share one rhythm, a dense page still feels calm. When they do not, readers feel that something is off even if they cannot say what.

When one element needs to be louder than everything else, and only after the rest of the layout follows the grid strictly. One deliberate break reads as emphasis. Several careless ones read as a mess.

We design websites on systems the team can keep using after launch, in Arabic and English.

See our website design work

More from the Journal

view all →