Reading Time: 5 minutes

Due to learnt expectation of being overloaded, text used for online content, needs to be as clear as possible.

A Clear Visual Hierarchy

Varying a typeface’s font by weight and size provides visual queues, to clarify order of importance of content.

Here, the main headline is in the largest font and clearly separated from the main content. Reading time, whilst reassuring to the reader, is slightly superfluous to the content, so placed in italics.

Then, just before committing to the article, a short opening paragraph, separated out by bold text, gives a bite-size introduction.

Reading Headlines

Having got the reader to this point, what happens next, is less predictable. A coping mechanism online readers often adopt, is to scan any headlines prior to committing to reading the remaining text. So, we need more clues, in the form of subheadings, about the nature of an article. For some, they may only read the headlines, so it’s important they are enticing and clear.

Sentence Case or Title Case?

Deciding how to use capital letters in headlines is more to do with effectiveness, rather than personal choice or strict grammatical rules. ‘Sentence case’ is when you start each sentence with a capital letter. So what is ‘title case’? See the guide here to find out more and decide whether to use it.

Did you know?

Did you know that the term ‘case’ dates back to the old printing presses, when capital letters were stored in the ‘upper case’ and other letters were stored in the ‘lower case’.

Using Fonts. A Design Checklist

Based on the latest UX research and British Dyslexia Association (BDA) official guidelines.

Title Case - What it is and When to Use It

Know Your Audience
For older audiences, for professional publications, this is what they expect.
 
Definition
Capitalise every “big” word (so not an article, preposition, conjunction).
 
Capital letters in title case provide a focal point, marking it out clearly as a heading. This technique works best with short, punchy headlines (4-6 words long).

Note: although some studies show title case is slightly slower to read, the difference is marginal and is a bit of a myth. From an aesthetic perspective, if the headline is more than 6 words, title case can look quite messy. However, if your heading is more than 6 words, it’s probably not a headline! Edit it down to something more succinct.

Use bold for emphasis.

Alternative methods hamper reading due to letter crowding, such as italics or underlining. Underlining is unacceptable online. Called ‘affordance’ in UX design, this makes it unclear what is a link.

BDA also recommends avoiding making EVERYTHING UPPERCASE or SMALL CAPS. Usability studies explain this impairs readability, due to the similarity in shape of uppercase compared to lowercase characters.

  • Headings should be at least 20% larger than the normal text. This good design practice establishes a clear hierarchy.
  • Bold headings will add further emphasis. Bold type can also be used instead of scaling.

  • Add extra space around headings and between paragraphs. Good design practice. Gives enough ‘white space’ around sections for clarity.
  • Line spacing referred to in typography as leading, is the horizontal space between each line. To improve readability, BDA recommend the space between each line should be 150% height of the font.

Shown here, this provides adequate line spacing, without looking too spread out.

The font size here is sixteen pixels with a line height of 150% font size.

This font size is 15 pixels. BDA recommends :

  • a minimum of 16 pixels font size
  • up to 19 pixels font size, depending on typeface.

Visitors may magnify, for fonts set to 13 pixels or even 12 pixels. However, it’s more likely, visitors will abandon reading if type is too small.