Typography

The BBC has its own typeface 'BBC Reith' which must be used on everything that we do. For more about BBC Reith see Introducing Reith - the new face of the BBC.

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 offers both Latin (for example English and French) and Cyrillic (for example Russian) alphabets. The condensed sans serif only contains Latin 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.

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.

We have created a working demo of our typographic scale.

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 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).

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.

Normal text (18px and below) should achieve a minimum contrast ratio of 4.5:1 - Level AA.

Large text should achieve a minimum contrast ratio of 3:1 - Level AA.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

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

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 and tracking rules.