Typography

Our typography system is built on rems where 1 rem = 14px. This is the size of standard body text. All other sizes are defined as relative rems.

We use Open Sans for body text, and Funnel Display for headings.

Standard line height is 1.5 * the text height.

Copy

The default copy size and weight of 14px, with line height 21px, and 400-weight Open Sans. If required the text-base class can be used to reset text back to this.

Bold text

Add the font-bold class to give parts of text a bolder heavier appearance to draw attention to important content.

Lead text

Add the text-lg font-light class for lead text such as heros or other places where an introduction to something might be required.

Text sizes

We provide the following text sizes:

Headings

You should use <h1> - <h6> elements for heading, based on how they are nested to reflect the organization of content in the page. This is generally a best practice and helps for accessibility needs.

By default heading elements do not have any style. This is as designed; the reasoning is that it should be easy to choose the correct semantic element and choose the styling seperately. You should not be forced to use a <h4/> element just because you want smaller text when the structure of the page demands an <h2/>, for instance.

Most headings should use font ‘Funnel Display’. This can be applied using class font-heading.

Page heading

The h1 should only be used in page headers; see Page Headers for more.

Page headings use classes text-4xl font-heading.

Section heading

If pages need a second level of headings to divide the content up, classes text-3xl font-heading is a good default.

Sub section heading

If there is a second level of content structure in a section we recommend using classes text-2xl font-heading.