Typography

This guideline explains how to use our typography styles across BBC online. It covers initial guidance for how to use the BBC’s own font, BBC Reith, as well as legacy guidance for teams still using Helvetica.

Overview

The BBC has its own typeface ‘BBC Reith’ which must be used on everything that we do. You can read more about BBC Reith in this article.

Various versions of BBC Reith

The BBC Reith font family consists of a serif, sans serif and condensed sans serif and there are currently four weights available*:

  • Light
  • Regular
  • Medium
  • Bold
  • Extra bold

* Condensed sans serif only available in regular and bold.

BBC Reith font family members

BBC Reith offers both Latin (for example English and French) and Cyrillic (for example Russian) alphabets. The condensed sans serif only contains Latin characters.

Examples of Latin and Cyrillic characters

Font stack 

There are two CSS font stacks to use on the web depending on if you are using serif or sans serif:

Sans serif: BBC-Reith-sans, Helvetica, Arial, sans-serif
Serif: BBC-Reith-serif, Helvetica, Arial, sans-serif

We default to sans serif fonts in place of the serif because these better match the character, style and size of BBC Reith Serif.

Note

For products that have not yet adopted BBC Reith, Helvetica Regular and Bold can be used instead (supported by Georgia italic for short quotes from BBC blogs and third party websites).

On devices that don’t include Helvetica or Georgia as system fonts, we use the best sans-serif and serif alternatives available e.g. Arial for Windows and Roboto for Android.

Type sizes

We’ve developed our type sizes to be suitable for average screen densities and reading comfort under typical conditions.

We size our type across the following four breakpoint groups to suit a range of devices and input methods:

  • Group A - Default sizing 0 - 319 pixels (typically feature phones).
  • Group B - 320 - 599 pixels (typically smart phones).
  • Group C - 600 pixels and above (typically tablet devices).
  • Group D - 600 pixels and above when touch is not available (typically desktop or laptop screens).

To make the type styles reusable across different page-types and contexts, we've set up a naming convention that comes from traditional type measuring techniques.

The sizes shown below correspond to size and line-height (size/line-height) and are in pixels, based on a baseline of 72 pixels per inch (ppi). We recommend you set font sizes using relative units to allow for the changing nature of the user’s browser. This creates uniformity across different screen sizes and capabilities.

Example Usage Group A Group B Group C Group D
CanonHero or blog post title28/3232/3652/5644/48
TrafalgarArticle title or section header20/2424/2836/4032/36
ParagonPrimary headline on indexes20/2422/2628/3228/32
Double PicaSub header20/2420/2426/3024/28
Great PrimerHeadline title or subtitle18/2218/2221/2420/24
Body CopyArticle body copy only15/2016/2218/2416/22
PicaIndex links, titles & headlines15/2016/2018/2216/20
Long PrimerIndex body copy & image captions15/1815/1815/2014/18
BrevierTime stamps and bylines14/1614/1814/1813/16
MinionSmall header capitals12/1612/1613/1612/16

We have created a working demo of our typographic scale.

Note

For products that haven’t adopted BBC Reith and are still using Georgia Italic for 3rd party content across all devices, we recommend using the type groups mentioned above. Here’s how Georgia is sized across the groups:

Applied as a short quote or paragraph:

Group A 15/18 | Group B 16/20 | Group C 16/22 | Group D 14/18

Applied as a blockquote:

Group A 18/24 | Group B 22/28 | Group C 24/32 | Group D 20/24

Some background to our naming convention

As mentioned above, our naming convention comes from traditional type measuring techniques, going back as far as 1582.

Some of the names came from the type of book produced in that size. For example, Primer was used for religious books ordered by Henry VIII.

This helps us easily communicate type choices in the development process, bridging the gap between designers and developers.

Weight, style and tracking

Weight and style

Deciding whether to use the serif or sans serif and in which weight is entirely dependent on what best suits your product and audience. You can mix and match the various options to help create hierarchy and emphasis on key text.

Heavier weights should mainly be used for headlines, titles and links – basically anything interactive or that needs to shout.

Tracking

BBC Reith has been designed with legibility and readability at its core. Because of this it is important to not adjust the tracking (also known as letter spacing).

Note

For products that haven’t adopted BBC Reith and are still using Helvetica we recommend applying a negative change to letter spacing, proportional to -3% for all bold text above 18 pixels.

To apply the tracking adjustment in Adobe software, change your character tracking to -30.

In CSS, letter spacing for bold type above 18px should be set to -0.03em or alternatively -1px.

Considerations

As shown in our Type Sizes section above, we use a limited number of sizes and styles on our typographic scale. This helps with consistency across different contexts and page types.

When using the scale, it’s also important to think carefully about line length and colour contrast.

Here are a few hard and fast rules that will help in this area.

Line length

For body copy, try not to have more than 60 characters per line. Make use of the Grid to optimise your layout to suit.

Colour contrast

All text and background colour combinations must be WCAG 2.0 AA compliant, as specified in the BBC Mobile Accessibility Guideline on Colour Contrast.

This is a ratio of 4.5:1 for text 18 pixels or less in size, and 3:1 for text larger than 18px or text that is bold and larger than 14px.

Type in action

Our typographic scale can be used across all page types, catering for a wide range of content across the BBC.

An example of our type hierarchy used on a promo module.
An example of our type hierarchy used on an article page.
An example of our type hierarchy used on a live text commentary stream.
An example of our type hierarchy used on a blockquote in an article page.

Additional type sizes for larger contexts

Alongside our main set of type sizes, we have created a range of additional 'display type' sizes. 

This display type can give greater impact where neccessary, especially at large screen sizes. It should only be used for immersive storytelling and infographic experiences. 

The sizes use the same set of breakpoint groups as the standard type sizes (Groups A–D) and follow the same weight, line height & tracking rules.

Group A Group B Group C Group D
Atlas78/8496/104192/208140/148
Elephant60/6478/84156/170116/124
Imperial50/5464/72124/13696/104
Royal40/4452/6094/10476/84
Foolscap32/3640/4472/8056/60