Lyubomir Popov
on 17 February 2025
A deep dive into our grid system and typography for the A4 format
We recently redesigned our whitepapers as part of our broader rebranding project. Let’s look at some of the ideas behind our approach to layout and typography. The goal? A reliable, accessible modular system that communicates with clarity, purpose and precision across mediums — qualities that tie directly back to our brand values.
Context
Format: Our white papers are designed in the A4 portrait format. This article focuses on that format specifically, but the approach outlined here is medium agnostic, and serves as foundation for our web and product design as well.
Writing style: The content we work with, whether for web or print, is highly technical and detailed, often structured with complex hierarchies for a highly knowledgeable audience. These circumstances inform many of the design decisions involved.
Foundation
The rigorous, no-nonsense approach of the International Style suits this kind of writing well, so it serves as our foundation. But we don’t stop there. By combining ideas from multiple disciplines, we’ve created a system that not only supports the content but also embodies clarity and purpose.
Baseline grid
The baseline grid underpins everything — text, images, you name it. Everything aligns to this invisible grid, based on the leading of body text. Think of it like the score lines in sheet music — guiding everything, even if you can’t hear them when the music is playing.
The baseline grid as a foundation of the layout grid
Layout grid
Web and print work under different constraints. A web page is fluid. Most of it isn’t visible at once. Dividing everything into neat, equal-height grid rows? Not that helpful when you can’t see the whole.
In print, page size is fixed, and everything is visible at once. Rows can capitalize on that – they create a rhythm and make room for more deliberate breaks when it helps the content.
Horizontal bias
We split the page into four columns. The first two act as a fast track for headings and titles, while the other two hold most of the body text. This setup helps readers skim through headings and zero in on what matters to them.
Typography
Clarity emerges from restraint. Two ideas guide our choices:
– Massimo Vignelli liked to keep the number of font sizes to a minimum – often just two per document. It’s a creative challenge. You start exploring a typeface’s weights and styles instead of just bumping up the size to make a point. (The Vignelli Canon, p. 68)
– Robert Bringhurst mapped out a grammar of typographic rules on how to step through a heading hierarchy so each step feels natural and logical:
Grammatical roadmap of a large type family, The Elements of Typographic Style, page 55
A simple page template demonstrating how we apply the rules above:
- At the body copy font size, we progress from roman, to bold, to bold small caps. This covers our paragraphs, C-heads and B-heads.
- For the final two members of our heading hierarchy – the A-head and B-head – we double the font-size and limit ourselves to weight variation (thin/bold), echoing the similar transition from roman to bold at the smaller font size.
White space and alignment
Typography works hand in hand with white space. It’s not just emptiness where we run out of content — it has a job. A big margin under a heading, for example, can make it stand out more, the way a large garden adds value to a house.
To make the most of white space, we stick to flush-left alignment (in LTR languages). That way, our blocks of space feel structural, shaping the content. Besides, it makes text easier to read for people with dyslexia or other visual or cognitive impairments.
Centered text? It tends to let white space just… sit there, instead of working for you.
Tension
Back in the ’70s, psychologists Kreitler & Kreitler studied how creating and resolving tension makes things more interesting. Take the spacing above a heading — when you tighten it, you create tension. Then, when you add more space below, you resolve it. That little push-and-pull adds an asymmetric rhythm to the design, giving it more life and energy.
Conclusion
By building on these ideas, we’ve developed a flexible layout system that reflects our commitment to precision, accessibility, and reliability — key values that shape our work. The result? A visual language that communicates with clarity, purpose, and precision, grounded in timeless design principles.
