Page Loading

Text and typography

These guidelines will help to make sure the text across our sites is readable and accessible. If you're a content editor building pages in the CMS, you don't need to worry too much about fonts. They'll be pre-set for you as part of the site styling.

Font type

You should use an accessible font that’s clean, simple and easy to read. Avoid serif fonts.

If you’re designing for one of our brands, you must use the correct font for that brand. You’ll find more information about fonts in our typography guidelines. 

Font size 

Our font sizes are designed to be easy to read on desktop, tablet and mobile. Our standard paragraph font size is 19px on tablet and desktop and 16px on mobile. We use larger font sizes for lead paragraphs and headings.  

See our guidelines for font sizes.  

Fonts should use pixels (px) as this allows the user to magnify the text if they wish to. Some users will have changed their browsers preferences as well and using relative sizes is best for them too. Rem calculates size relative to the <html>  element, where em is calculated by the sizing of its own element.  

Line length and height

A line of text shouldn’t be longer than 80 characters. Some people with reading or visual disabilities have trouble keeping their place when reading long lines of text. An easy way to do this is using max-width: 70em in the CSS.

If you’re adding content to the CMS, you can use the grid span to reduce line lengths. A standard text panel should have a maximum span of 8.

We use 1.5x line height to make text easier to read.