Writing on the principles & practice of building digital products

A rule of thumb for working with type

When working with type, only change one element of typographic style for each step in hierarchy.

The above pearl of wisdom was imparted to me during my time at design school. While it’s certainly a guideline rather than a rule, it’s helped me navigate the oft treacherous waters of web typography ever since.

The general idea in creating a typographic hierarchy is to allow you to give typographic elements greater or lesser importance by the attributes you choose for them. For example a 36pt piece of type is larger, and hence visually more up in your business, than a 12pt piece of type.

A type hierarchy is comprised of steps. Working with type on the web there are a whole host of semantic steps given to us by HTML (I.e. h1, h2, p etc). It’s with these steps we give both visual (and in the case of HTML, semantic) importance to content on the page. There’s any number of typographic variations you could apply when moving visually from one level to another, but broadly speaking they could be narrowed down into the following groups:

  • Weight/cut
  • Colour
  • Size

Using these attributes we can give greater or lesser visual importance to the typographic elements on our page. By way of example, let’s say we have a h3 running heading, and we need to decide what attributes our h4 tag should have. We know we want it to be visually less important than the h3 in our hierarchy, so, choosing from the list above we might change it’s weight or color or size to visually diminish it. By just choosing one attribute to change per step it’s easier to keep an even, cohesive feel to your typographic scale. We can then apply the same thought process to other typographic elements.

This is very much a rule of thumb. It serves as a useful baseline to make decisions on type. There are of course occasions where you really want to make a statement about the importance of a piece of information (a feature heading, for example). In such cases it may well make sense to change two or more of above attributes in one step. There’s nothing inherently wrong with doing this, but it’s worth bearing in mind that too many larger jumps like this can lead to a jilted rhythm. And no-one wants that.

Further reading

It goes without saying that there’s been a great deal written by people much better versed than myself on the subject of web typography. Here’s a quick overview of some of my go-tos, all of which I heartily endorse: