Understanding Typographic Hierarchy
Typographic hierarchy is extremely important and is something that your designer will take care of when designing your publications. However, it is often the case that when we receive content from a client, it is not always obvious what is what.
This article explains what a typical typographic hierarchy is for something like a magazine or annual report.
Anyone who knows how website text is styled or uses the settings in Microsoft Word will have seen the ‘tags’ H1, H2, etc. These are established hierarchies that users can use to define, for instance, what is a subhead and what is a heading etc. H1 tags are very important for search engines which place more importance on an H1 – a headline. Anyway, we are not talking about SEO in this article.
Below is what we consider to be a robust set of styles that you might use in a publication. Bear in mind that we are governed by the blogs' own embedded styles, so they may not be as visually appealing as they would be in InDesign.
The typesetting above makes it very clear what is the most important piece of content; the headline and what is of lesser importance, ie. the credit and footer.
The example above uses font-weight as well as size to establish the hierarchy. Note that the standfirst, whilst being bigger than the text uses a lighter font, this technique creates more balance. Generally using bold fonts should be avoided. In the example, the subhead leaps off the page and visually is too prominent.
The second tool in the typographic hierarchy style is spacing. This is often overlooked or poorly applied.
The first thing to get right is the spacing of subheads. A subhead ‘belongs’ to the text below it, it should not ‘float’ within the paragraphs.
This is wrong:
This is correct:
As a general rule avoid using caps (uppercase). Using uppercase* text reduces legibility.
There are some things that are worth looking out for and are the marks of a good typographer, or a bad one.
If you see a full paragraph space (a hard return) between paragraphs. It is a schoolboy error. The ideal space after a paragraph is 1.5mm.
If the document, say an annual report, has been designed with equal margins, left and right, then your designer, perhaps isn’t the best they could be.
I’ve already spoken about floating subheads. Other things to look out for are huge spaces after a bullet point, which tends to be a default setting in Word and even in InDesign.
Reduce the space, it should be about an EM space at most, an EN space would be better.
* The terms 'uppercase’ and ‘lowercase’ come from the days of hot metal typesetting when each individual letter was made out of a metal slug and had to be individually composed in rows to make up the body of text.
These metal letters were stored in trays called cases. The capital letters were stored in the cases at the top, the lowercase, yes you guessed it.