Typography

Our typography principles

Our type system

Each brand that uses our type system has its own individual font. But they are all applied to our type system, which maps the font to a hierarchy from smallest (‘caption’) to largest (‘Display 6’) with a consistent line height.

Responsive behaviour

In line with mobile first principles, the table below shows how type appears on smaller screens. Each display option has a responsive alternative, which is the size it will adopt on screens larger than 720px.

Whilst these styles are responsive by default, you can prevent this behaviour if needed.

Our native type stack

You can use our native type stack in our Sainsbury's, Argos and Nectar brand libraries. At the moment, this is a basic type stack that reduces the need for surplus fonts, but we'll be weaving in more system capabilities over time.

If you're working on native products, you should be using the brand fonts for Label 2 to Display 6 and the native system fonts for everything else (Caption to Label 1).

Accessing our fonts

Display sizes in action

Below we’ve set out some sensible starting points for when to use different display sizes. You’ll see that the largest size suggested is Display 5.

But remember that these are recommendations. There may be times when there’s a case to use different display sizes for headings, including Display 6 or 7. You’re free to do so according to the needs of your design and your users.

Suggested mapping of display sizes to headers

The table below shows how the type scale can be mapped to common HTML elements. There’s an alternative ‘small’ size mapping which may work better for more information dense screens (for example, some colleague applications).

Tips for engineers implementing type

Using HTML

Writing scalable CSS for a component using Tailwind involves using its utility classes, creating reusable components, using @apply to create custom classes, customizing Tailwind's configuration, and using responsive design.

When building out HTML there is a utility class for each of the type options. You can use the ds-u-[insert display here]classname to apply the typography styles to a custom component, which will include the font family, font size, font weight, and line height.

For example, making use of .ds-u-display-1 will apply MaryAnn ExtraBold and the relevant font sizing to the element. In React you can similarly use the ≤Display1≥ component to apply this styling to its children.

Controlling the responsive style variant

If you want to prevent text from scaling when using the React components you can apply the ‘sFixed’ prop (<Display1 isFixed/>) to achieve this.

Was this page helpful?