(click anywhere to close)

[Typography] Hierarchy II

category: Design | course: Typography | difficulty:

Last chapter introduced the common hierarchy used in most projects, and now we will look at a few of them more intensively.

Title Pages

The title page is the first thing most readers will see, and should stand out yet be simple and clear. When it comes to the title page of a complete work, you have a lot of freedom and should simply set it in a style that contributes to the overall design, and conveys the right message and tone. Additionally, there should be some space (empty pages) after the title page to set it apart from the rest of the work.

For the same reason, multiple nearly-empty pages should be left at the end of a book to balance it out and not come to an abrupt stop. When adding preliminaries, which is always a fun thing to do, give them adequate space as well.

When it comes to title pages for chapters or certain levels of the hierarchy, set them in a form that works together with the overall design. If headers stand out or contrast too much, it distracts from the all-important body text. Don’t let the title page oppress the text, but make it a symbol of the importance and presence of the text.


When it comes to the body text, there’s always very subtle changes in hierarchy to be made. Perhaps you want to emphasize a single word in a phrase, or a single phrase within a long piece of text. The visual cues for these changes should not be so subtle that you can’t immediately spot them, but it’s also no good when lots of visual cues add up inside a text block.

Therefore, highlight no more than 10 percent of the text, as the effects of highlighting decrease as the amount increases. Use only a small number of techniques, but apply them rigorously and consistently.


Italics should be preferred, especially for longer phrases, as they fit with the flow of the text. Bolding is the next best option, as it is more detectable or legible. Underlining should be avoided, and reserved for hyperlinks on the web.

Avoid using different typefaces as a highlighting technique, and also avoid making text blink. Adding animation to text can be a wonderful thing, but it should not be annoying, and there should be an option to turn it off.

When it comes to colour, highlighting with very bright colours is actually not recommended. They attract too much attention; a shift in colour is already enough. Highlight using desaturated colours which are clearly distinct.

Inversing elements works extremely well for text, and is underused in my opinion. It’s effective at attracting attention, but adds considerable noise. It doesn’t work that well with icons or shapes, though.


Notes can be anything; a remark about the body text, a complete paragraph with additional information, or a footnote/reference. However, the traditional way of adding notes – at the bottom or top of the page – is actually the worst one. We’re used to reading top to bottom, and notes interfere too much this way.


A better way, is adding the notes in the margin, and perhaps adding footnotes and references as a long list at the end. If you are to use superscripts of any kind within the text, check their weight and spacing, as to not attract too much or too little attention towards them. In the notes themselves, though, always use full-size numbers. And, as always, be consistent.

Another name for adding the notes in the margin is shoulder or run-in heads, which gives us another opportunity here: adding the heading or title of the current section in the margin works wonders as well.

Alternate Hierarchies

With the rise of the web, it’s become common practice for people to use your work on many different devices. Additionally, visually impaired users might make use of a screen reader to read your work aloud to them.

Therefore, the underlying structure of a design is perhaps more important than the final look. Even on the web, it’s important to establish a proper hierarchy before making up any visual ornamentation or extras. If the underlying hierarchy works well, it can easily be adapted to different devices/screen sizes or use cases, and it can be used by the widest possible range of users.

For websites, this usually means a single, proper HTML structure and several CSS style sheets for different screen dimensions. For screen readers (and, well, readers in general) you should still caption your tables, add “alt tags” ( = descriptions) to images, place the navigation at the right spots, make it clear that it’s the navigation, and provide a descriptive title for hyperlinks.

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk