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 Montserrat semi-bold 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 ‘Montserrat’. 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.