New Zealand Government
New Zealand Government | Te Kawanatanga o Aotearoa
  1. Home /
  2. About this website /
  3. Govt.nz's style and design guide /
  4. Typography
Skip to main content

About this website

  • The scope of Govt.nz
  • Linking to Govt.nz
  • Govt.nz's style and design guide
    • The Govt.nz style guide
    • Creating Govt.nz content
    • Typography
    • Colours and graphics
  • Re-using our content and data
  • Analytics for Govt.nz

About this website

  • The scope of Govt.nz
  • Linking to Govt.nz
  • Govt.nz's style and design guide
    • The Govt.nz style guide
    • Creating Govt.nz content
    • Typography
    • Colours and graphics
  • Re-using our content and data
  • Analytics for Govt.nz

Typography

In this guide
  1. Typefaces
  2. Text sizes and spacing
  3. Links
  1. Typefaces
  1. Text sizes and spacing
  1. Links

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.

Style guide — links

Examples

This is a link which leads to another page on the website

This is a link which leads to an external website

This is a visited link

This is a link with focus

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>
Previous:
Next:

Print whole guide

Have your say about this page

Is there something wrong with this page?

We’ll only use this to reply to your message if we need to. The Govt.nz privacy statement explains how and when we collect personal information.
Privacy statement

Last Updated

Page last updated: 09 December 2016

About us

  • Contact us
  • About Govt.nz
  • Find contacts for government

About this website

  • The scope of Govt.nz
  • Govt.nz's style and design guide
  • Govt.nz analytics

Using this website

  • Terms of use
  • Privacy
  • Copyright

Back to top

New Zealand Government New Zealand Government

Crown Copyright 2018

Creative Commons 4.0 International Licence

Unless indicated otherwise, all content on Govt.nz is licensed for re-use under a Creative Commons 4.0 International Licence