Font sizes

Overview of the default font size settings and how to use them.

Overview

Our approach to font sizes is inspired by BBC's gel typography guidelines.

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.

Settings for the default font-sizes can be found in stylesheets/settings/_settings.font-sizes.scss.

Size matrix

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

• Group A - Default sizing 0 - 319px (typically small phones)
• Group B - 320px - 767px (smart phones & small tablets)
• Group C - 768px and above (typically large tablets and touch enabled laptops)
• Group D - 768px and above when touch is not available (desktops and laptops)

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.

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

Mixins

For each font-size there is a mixin to make it easy for you to set font-sizes.

.Element {
  @include trafalgar;
}