This guideline explains how to use our typographic styles across BBC online. It covers typefaces, sizes, weights, line-heights and tracking recommendations.
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.
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.
The CSS font stack used on the web should be specified as Helvetica, Arial, and then sans-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 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
We use regular and bold weights of Helvetica. Bold should mainly be used for headlines, titles and links – basically anything interactive.
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.
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%.
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.
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.
For body copy, try not to have more than 60 characters per line. Make use of the Grid to optimise your layout to suit.
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.
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|