Typography

This guideline explains how to use our typographic styles across BBC online. It covers typefaces, sizes, weights, line-heights and tracking recommendations.

Updates

Contributors

  • Simon Rooney
  • Al Jones
  • Dario Ramalho

Overview

Helvetica is used as our main typeface, supported by Georgia italic for short quotes from BBC blogs and third party websites.

We use a single type hierarchy that is scaled to work across all devices. We change type sizes based on screen size and device capabilities, such as whether it has a touch screen.

Demo of sans-serif single hierarchy Try the working demo

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.

Font stack

The CSS font stack used on the web should be specified as Helvetica, Arial, and then sans-serif.

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 reuseable 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
Canon Hero or blog post title 28/32 32/36 52/56 44/48
Trafalgar Article title or section header 20/24 24/28 36/40 32/36
Double Pica Sub header 20/24 20/24 26/30 24/28
Great Primer Headline title or subtitle 18/22 18/22 21/24 20/24
Pica Index links, titles & headlines 15/20 16/20 18/22 16/20
Long Primer Index body copy & image captions 15/18 15/18 15/20 14/18
Brevier Time stamps and bylines 14/16 14/18 14/18 13/16
Minion Small header capitals 12/16 12/16 13/16 12/16

Body copy within article pages should be sized specifically to the sizes as described below.

Usage Group A Group B Group C Group D
Body Copy Specifically article body copy 15/20 16/22 18/24 16/22

Using Georgia Italic

We recommend you use Georgia Italic for 3rd party content across all devices, using the type groups mentioned above. Here’s how Georgia is sized across the groups:

Usage of Georgia Group A Group B Group C Group D
Applied as a short quote or paragraph 15/18 16/20 16/22 14/18
Applied as a blockquote 18/24 22/28 24/32 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, line height & tracking

Weight
We use regular and bold weights of Helvetica. Bold should mainly be used for headlines, titles and links – basically anything interactive.

Line height
Where possible, line height measures are divisible by 4, so they still align to the 8 pixel baseline grid. For line heights that don't align to the 8px baseline grid (e.g. 16/22), allow enough space after this type element to realign the next item. This helps maintain the vertical rhythm and consistency.

Tracking
Our typographic style depends on tight tracking for large bold headers. For all bold sans-serif type sizes above 18 pixels, we make a negative change to letter spacing, proportional to -3%.

 Note

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 colour combinations must pass the WCAG 2.0 AA-compliant colour contrast check in accordance with the Snook colour contrast checker (external link).

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 nessessary, 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
Atlas 78/84 96/104 192/208 140/148
Elephant 60/64 78/84 156/170 116/124
Imperial 50/54 64/72 124/136 96/104
Royal 40/44 52/60 94/104 76/84
Foolscap 32/36 40/44 72/80 56/60