Skip to main content
Note:

For everything you need to know about COVID-19, go to covid19.govt.nz

Unite against COVID-19

Typography

Govt.nz’s typefaces, text sizes and spacing, and links.

Typefaces

Govt.nz uses the font Fira Sans because it:

  • is easy to read
  • is not too formal
  • matches the tone of the content
  • is open source, and
  • has good browser support — that is, it displays well in most browsers.

Example:

Fira Sans

Fira Bold

Font stack

The Govt.nz font stack lists all the fonts that are used, including those for people who cannot use Fira Sans. They all have universal browser support and are listed in the order they will appear. These alternative fonts provide a similar experience to Fira Sans.

They are:

  • Fira Sans
  • Helvetica
  • Arial
  • Sans serif.

Text sizes and spacing

Govt.nz uses 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

Govt.nz uses multiples of 6 pixels (px) to create consistent spacing. Usually a gap between a heading and paragraph is 36px.

Line height

Govt.nz uses a line height of 1.43 times the font size. Generous line height increases white space, making the page easier to read.

Links

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, Govt.nz:

  • gives links a clearly visible ‘focus’ so users know where they are on a page
  • lets people tab between links
  • makes sure links can be activated with the ‘enter’ key.

Govt.nz also defines how to select, name and style links.

Links

Code example

<pre class="code-sample"><code class="language-html">&lt;a href="/browse/nz-passports-and-citizenship/" class="internal-link"&gt;
This is a link which leads to another page on the website.
&lt;/a&gt;&lt;a href="https://www.dia.govt.nz" rel="external" class="external"&gt;
This is a link which leads to an external website.
&lt;/a&gt;&lt;i class="fa fa-external-link"&gt;&lt;/i&gt;
&lt;span class="external-text" title="External site link"&gt;(external site link)&lt;/span&gt;
&lt;/a&gt;</code></pre>

Notes for code sample:

  • The external icon could be rendered using CSS.
  • The span is used for screenreaders and hidden by default.

Have your say about this page

Is there something wrong with this page?

Last Updated

Page last updated: