Typography

The styles and spacing of type on the Oranga Tamariki website and how it should be used.

Typeface

We use Roboto, which is the standard Oranga Tamariki font. 

  • It can be used in regular, bold or black (heavy) font weights 
  • Heading 1 and Heading 2 use Roboto Black
  • All other headings use Roboto Bold.

Our font stack is for situations where Roboto cannot be used. The fonts are listed in the order they should appear:

  • Roboto
  • Helvetica
  • Arial
  • sans-serif 

General typography

We use the following sizes and spacing for heading and text styles. All sizes and spacing use rems (based on the body size of 8px) or ems (based on the font size of the element).

Heading 1

Used for page headings.  

Small screens: 5.13rem (41.05px)

Large screens: 10.4rem (83.23px)

Heading 2

Used for block headings.  

Small screens: 4.56rem (32.44px)

Large screens: 5.13rem (41.05px)

Heading 3

Subheadings in text content. ALOT block headings.

Small screens: 3.2rem (25.63px)

Large screens: 3.6rem (28.83px)

Heading 4

Accordion headings. Subheadings in text content.

All screens: 2.85rem (22.78px)
Heading 5

Transcript headings. Subheadings.

All screens: 2.25rem (18px)
Heading 6
 All screens: 2rem (16px)
Paragraph

All screens: 2.25rem (18px)

Published: February 25, 2022

Share