Authored by Primate

A rather awesome, informative
and witty blog about all things web

Responsive Type, part 3: Headers and hiearchy

Four t's arranged in a rectangle, the third one highlighted.

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.

Vertical rhythm

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.

Typographic modules

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.

Diagram of typographic modules

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.

Scaling

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 GeometryI 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.

fig-11

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.

Screenshot of email with different typographic styles.

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!

If you liked this article then why not subscribe to our RSS feed.

Author: Espen Brunborg

Espen can easily ruin conversations with questions about chimneys.

Comments

Showing 2 Comments

Leave a comment
  1. […] Responsive Type, part 3: Headers and hiearchy – 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. Type hierarchies don’t just make themselves. […]

  2. Al Lemieux December 10, 2014 at 8:47 pm

    I recently stumbled on Modularscale.com and thought it was a great starting point. Have you heard of Typecast.com? It’s pretty awesome. You can set up all of your type hierarchy and then output a style guide.

    I’m enjoying the articles. Keep ‘em coming.

Leave a Reply