Design System
Basics

Typography

Effective, accessible content relies on a clear font, consistent headings, succinct body text paragraphs, descriptive links, and scannable lists.

Font

We are investigating how font choice will be incorporated into the design system, in order to meet New Zealand language requirements.

Headings

Open this example in a new window

Same heading level varying by size only

Open this example in a new window

Use headings consistently to create a clear hierarchy throughout your content, and to allow people using assistive technology to quickly scan and move through the page.

Mark up headings semantically using the appropriate <h#> level HTML element. In our design system, the font size is independent of the heading hierarchy. This allows for design flexibility.

Write all headings in sentence case, with the exception of proper nouns, which require initial capitals.

Headings with captions

Open this example in a new window

Sometimes you may need to make it clear that content under a heading is part of a larger section or group. To do this, you can use a heading with a caption.

Headings with captions inside the h1

Open this example in a new window

If the caption should be considered part of the page heading, you can also nest the caption within the h1.

Paragraphs

There are three font sizes for paragraphs, giving you:

  • a large size for lead paragraphs
  • a medium size for standard body text
  • a smaller size for small body text.

You can use these text sizes to indicate the relative importance of the content on the page.

Large size for lead paragraph

Open this example in a new window

A lead paragraph, also called a summary or short description, is the introduction at the top of a page that summarises what a user can expect from that page.

Remember that the summary, along with the title, is usually what users see in search results. Keep the content short, or put the key information at the start, as Google usually only shows the first 160 characters.

Only use one lead paragraph per page.

Medium size for standard body text

Open this example in a new window

The majority of your body copy should use medium size.

Small size for small body text

Open this example in a new window

Use it sparingly for 'small print' content, such as notes and references.

Default

Open this example in a new window

Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.

Remember to make link text descriptive of the destination. Just “Read more” is not acceptable.

Lists

Use lists to break up blocks of text into chunks to make them easier to read.

Bulleted lists

Open this example in a new window

Introduce bulleted lists with a partial ‘stub’ sentence ending in a colon. Start each list item with a lowercase letter, and do not use a full stop at the end. Ensure each list item makes grammatical sense when read after the stub sentence above.

Use bulleted lists to highlight options and examples in content, especially when a sentence contains more than three clauses.

Numbered lists

Open this example in a new window

Use numbered lists instead of bulleted lists when the order of the items is relevant.

You do not need a lead-in line for numbered lists, although a summary sentence can be helpful for users. If numbered items are complete sentences, use full stops at the end.

Credit

Guidance, original HTML and CSS derived from GOV.UK Design System.

Get in touch

If you’ve got a question, idea, or suggestion, email the Design System (DS) team at info@digital.govt.nz, use our NZGDS Slack app, or discuss Typography on 'GitHub issues'.