We not too long ago redesigned our whitepapers as a part of our broader rebranding venture. Let’s take a look at a number of the concepts behind our strategy to structure and typography. The objective? A dependable, accessible modular system that communicates with readability, function and precision throughout mediums — qualities that tie straight again to our brand values.
Context
Format: Our white papers are designed within the A4 portrait format. This text focuses on that format particularly, however the strategy outlined right here is medium agnostic, and serves as basis for our internet and product design as effectively.
Writing fashion: The content material we work with, whether or not for internet or print, is extremely technical and detailed, usually structured with complicated hierarchies for a extremely educated viewers. These circumstances inform most of the design choices concerned.
Basis
The rigorous, no-nonsense strategy of the International Style fits this sort of writing effectively, so it serves as our basis. However we don’t cease there. By combining concepts from a number of disciplines, we’ve created a system that not solely helps the content material but in addition embodies readability and function.
Baseline grid
The baseline grid underpins every thing — textual content, photos, you identify it. Every little thing aligns to this invisible grid, based mostly on the main of physique textual content. Consider it just like the rating traces in sheet music — guiding every thing, even for those who can’t hear them when the music is taking part in.
The baseline grid as a basis of the structure grid
Format grid
Net and print work underneath totally different constraints. An online web page is fluid. Most of it isn’t seen without delay. Dividing every thing into neat, equal-height grid rows? Not that useful when you possibly can’t see the entire.
In print, web page dimension is mounted, and every thing is seen without delay. Rows can capitalize on that – they create a rhythm and make room for extra deliberate breaks when it helps the content material.
Horizontal bias
We break up the web page into 4 columns. The primary two act as a quick monitor for headings and titles, whereas the opposite two maintain many of the physique textual content. This setup helps readers skim by way of headings and nil in on what issues to them.
Typography
Readability emerges from restraint. Two concepts information our selections:
– Massimo Vignelli favored to maintain the variety of font sizes to a minimal – usually simply two per doc. It’s a inventive problem. You begin exploring a typeface’s weights and types as a substitute of simply bumping up the scale to make a degree. (The Vignelli Canon, p. 68)
– Robert Bringhurst mapped out a grammar of typographic guidelines on learn how to step by way of a heading hierarchy so every step feels pure and logical:
Grammatical roadmap of a big sort household, The Elements of Typographic Style, web page 55
A easy web page template demonstrating how we apply the principles above:
- On the physique copy font dimension, we progress from roman, to daring, to daring small caps. This covers our paragraphs, C-heads and B-heads.
- For the ultimate two members of our heading hierarchy – the A-head and B-head – we double the font-size and restrict ourselves to weight variation (skinny/daring), echoing the same transition from roman to daring on the smaller font dimension.
White house and alignment
Typography works hand in hand with white house. It’s not simply vacancy the place we run out of content material — it has a job. A giant margin underneath a heading, for instance, could make it stand out extra, the way in which a big backyard provides worth to a home.
To benefit from white house, we keep on with flush-left alignment (in LTR languages). That approach, our blocks of house really feel structural, shaping the content material. Apart from, it makes textual content simpler to learn for individuals with dyslexia or different visible or cognitive impairments.
Centered textual content? It tends to let white house simply… sit there, as a substitute of working for you.
Rigidity
Again within the ’70s, psychologists Kreitler & Kreitler studied how creating and resolving stress makes issues extra attention-grabbing. Take the spacing above a heading — while you tighten it, you create stress. Then, while you add extra space under, you resolve it. That little push-and-pull provides an uneven rhythm to the design, giving it extra life and vitality.
Conclusion
By constructing on these concepts, we’ve developed a versatile structure system that displays our dedication to precision, accessibility, and reliability — key values that form our work. The consequence? A visible language that communicates with readability, function, and precision, grounded in timeless design ideas.
