Typography
Typefaces
We use the font Fira Sans because it:
- is easy to read
- is not too formal
- matches the tone of our content
- is open source, and
- has good browser support — that is, it displays well in most browsers.
Example
Fira Sans
Fira Bold
Font stack
Our font stack lists all the fonts that are used, including those for people who can't use Fira Sans. They all have universal browser support and are listed in the order we would like them to appear. We chose these alternative fonts because they provide a similar experience to Fira Sans.
They are:
- Fira Sans
- Helvetica
- Arial
- Sans serif.
Text sizes and spacing
We use the following styles, sizes and spacing for headings and paragraphs.
Text sizes
Text type |
Large screens |
Small screens |
---|---|---|
Heading 1 |
44.8px |
33.2 px |
Heading 2 |
25.9 px |
23 px |
Heading 3 |
21 px |
18 px |
Heading 4 |
18 px |
16 px |
Heading 5 |
16 px |
14 px |
Summary |
25.9 px |
23 px |
Paragraph |
18 px |
16 px |
Spacing
We use multiples of 6 pixels (px) to create consistent spacing. Usually a gap between a heading and paragraph is 36px.
Line height
We use a line height of 1.43 times the font size. Generous line height increases white space, making the page easier to read.
Links
Our links are designed to be accessible and helpful to users. This includes:
- being able to use them without relying solely on their colour
- changing the colour of visited links
- underlining link text that appears in body copy so that people can scan and see them
- showing an underline when you hover over navigation links
- identifying links to external websites.
For people using a keyboard rather than a mouse to navigate, we make it easier to use links by:
- giving links a clearly visible 'focus' so users know where they are on a page
- letting people tab between links
- making sure links can be activated with the 'enter' key.
We have also defined how we select, name and style links.
Examples
This is a link which leads to another page on the website
Code example
This is a link which leads to another page on the website
<a href="/browse/nz-passports-and-citizenship/" class="internal-link">
Get a birth certificate
</a>
This is a link which leads to an external website
<a href="https://www.dia.govt.nz" rel="external" class="external">
<i class="fa fa-external-link"></i>
<span class="external-text" title="External site link">(external site link)</span>
</a>
Print whole guide
Have your say about this page
Is there something wrong with this page?
Last Updated
Page last updated: