This third instalment of this basic introduction to responsive typography focuses on how best to use size, contrast and style changes to create a strong typographic hierarchy.
Our base font has been defined. So far, so good – but what about the rest? Type hierarchies don’t just make themselves. (That said, the default hierarchy defined in modern browsers isn’t half bad. Despite looking generic and ‘un-designed’ – an obvious misconception – it does a very good job of separating different headings from each other, and from the paragraph. But I’m digressing).
A type hierarchy can be described as a visual distinction of different typographic elements in order to communicate the structure of your content; for example making sure any heading stands our from the paragraph, that your main heading appears more distinct than your secondary heading(s), and so on. This visual distinction is based on design considerations such as positioning and space, size, styles and colours.
More often than not, a typographic hierarchy uses a combination of many visual indicators, but there are examples of hierarchies where few, or only one type of distinction is used. Just take look at your average page of code. There’s only one typeface, only one size, no text styles and colours are indicative of syntax as opposed to structural hierarchy. But code usually applies a very effective hierarchical tool – namely lots and lots of indentations – and this little trick alone helps millions of developers every day.
Indentation is one way to use space and positioning to create hierarchy, but a more common method is vertical rhythm, which plays a huge role in any typographic hierarchy. Consider the frequent use of margin between paragraphs. Each paragraph is followed by the same vertical margin, which separates them from each other and assigns equal importance to them in context of the typographic hierarchy.
Vertical rhythm also defines divisions between related groups of content, or *typographic modules*. That is to say, if a typographic module is defined by a heading + paragraph, making the space before and after the module larger than the space between the heading and paragraph will increase the module’s visual definition from other modules on the page.
Whether utilising a baseline or not, it is useful to base the vertical rhythm on a consistent unit. When I redesigned the Primate site my vertical units were roughly defined by the baseline of the body text (1.4 ems ≈ 25px) and the idea was to make any vertical spacing between elements a multiple – or close to it – of this unit. For example, any module would be preceded and succeeded by a vertical space of ≈100px, whereas spaces inside the module would be confined to ≈50px or ≈25px. This way margins and padding all appear consistent throughout the design, and modules are easily distinguishable from each other.
This figure shows the typographic module with space above and below. As is shown in the figure, the space between each module is 4x, whereas the spaces within modules are 1x or 2x (i.e. ≈100px, ≈50px or ≈25px)
Size and scale
Headings are typographic elements that add context to the following content and, as such, they need to stand out. Traditionally, there were established conventions on how to do this – the first level should be bold, the second should be bold italic, the third italic and the fourth small caps. But then what?
Today, there are no hard and fast rules as long as the headings are clearly distinguishable from the rest of the content, and an increase in size usually does the job. As a result, the concept of each heading being larger than its successor has become the norm.
As headings generally grow proportionately larger at every level, many designers use intuition to gauge the appropriate scale. Backed by a well developed sense of proportion there’s nothing wrong with doing it by eye, however there are techniques and tools that can help make the decision-making easier. Modular scale, for example.
Developed by Tim Brown, modular scale is a nifty little tool that lets you choose a scale or ratio – for example the Golden Section – along with an ideal font-size and produces a comprehensive list of complementary font-sizes for you. By basing the typographic scale on a simple ratio all the font-sizes in a given hierarchy will attain a certain consistency which, although invisible to the untrained eye, strengthens the overall foundations of your typography. If you think that sounds too airy, choosing and sticking to a specific scale (modular or not) makes, at the very least, defining the hierarchy a little less arbitrary.
Side note: on the Primate site I took the idea of a modular scale a little further. Inspired by Owen Gregory’s talk on Antiphonal Geometry, I based my entire hierarchy on a set of musical harmonies – great fun, but I hardly recommend going to such lengths.
Colour and styles
Naturally, size isn’t the only way to denote hierarchy. Colour, for example, can be just as effective. On the cover of the aforementioned book called “Twenty-two tips…”, all the type is set in the same size, yet the contrasting colours makes it obvious what’s what. Granted, the cover utilises two typefaces and different weights to increase the contrast, but the colour is the key differentiator.
This cover of “Twenty-two tips…” shows how colour can be a great visual aide in denoting hierarchies.
Keep in mind, though, that all monitors are not born alike and some viewers may be visually impaired, so one has to be be very careful with your choice of palette if relying on colour alone.
Weights and styles also help differentiate between types of content. Bold, underline and italics are all useful when size and colour are either unavailable, inappropriate or too time-consuming. I often revert to these simple attributes when writing emails that require a hierarchy, and I don’t see why they wouldn’t work elsewhere.
Keeping with the times: email hierarchy using bold, underline and italic to denote hierarchy.
…and that’s it for establishing a hierarchy. Next up – our fourth and final instalment which looks at everything in a responsive context. Stay tuned!