Typography tokens

A typographic scale was used to create a set of font-size and line-height values which have been designed for legibility and can be easily be implemented by designers or developers with a predictable output.

Using the design system’s typography values means any object containing text is more likely to align with another element. This appearance of a baseline grid is created by automatically rounding the line-heights to the nearest grid value 4px, then converting them back to a unit-less value.

To ensure consistency with other components in the system:

• Designers can use font-size and line-height values from the typographic scale.
• Developers can use the `fontSize` and `lineHeight` props available on typographic components which use of the fontGrid function.

Font size

A typographic scale of 1.25 was used to create a limited set of font sizes. This helps ensure that text looks balanced and consistent. Font sizes were rounded to to full pixel values for simplicity.

Line height

A set of predefined line heights that align to a 4px grid. This helps achieve better alignment across website elements.

Font family

The design system uses system fonts to decrease file size and increase page speed.

Government services are provided for everyone, regardless of their situation or location. By choosing to use system fonts, users download less data and make fewer HTTP requests. This means that people on low-end devices or internet connections in remote areas can access government services easier.

Font weight

Use 2 font weights, bold and normal, to help convey visual hierarchy amongst text. Primary text like headings are generally bold to make them more prominent. Use a normal font weight for less important text.