Typography
Base fonts
Unless otherwise stated, use the following font properties for the default body fonts.
| Propery | Value |
|---|---|
| font-family | Roboto |
| font-size | 18px |
| font-weight | normal |
| color | body |
Responsive text
The Design System uses the Responsive Font Size (RFS) engine to resize font sizes. The engine generates CSS that automatically calculates the appropriate values for your font sizes based on the dimensions of the browser viewport.
See below some examples of how the font-size and line-height changes in different viewports.
1200 px width
| Element | font-size (px) | line-height (px) |
|---|---|---|
| p | 18 | 27 |
| h1 | 45 | 54 |
| h2 | 36 | 43.2 |
| h3 | 31.5 | 37.8 |
| h4 | 27 | 32.4 |
| h5 | 22.5 | 27 |
| h6 | 18 | 21.6 |
833 px width
| Element | font-size (px) | line-height (px) |
|---|---|---|
| p | 18 | 27 |
| h1 | 38.1 | 45.75 |
| h2 | 31.584 | 37.92 |
| h3 | 28.326 | 34.005 |
| h4 | 25.068 | 30.09 |
| h5 | 26.172 | 26.175 |
| h6 | 18 | 21.6 |
373 px width
| Element | font-size (px) | line-height (px) |
|---|---|---|
| p | 18 | 27 |
| h1 | 29.5 | 35.4 |
| h2 | 26.08 | 31.296 |
| h3 | 24.37 | 29.244 |
| h4 | 22.66 | 27.192 |
| h5 | 20.95 | 25.14 |
| h6 | 18 | 21.6 |
If you use the Design System’s CSS for paragraphs and headings CSS, text will resize automatically.
Paragraph
To be used for paragraph text. Use the default fonts described above.
Headings
To be used for headings h1, h2, h3, h4, h5 and h6. Use the default fonts described above with the following differences.
- Font-Weight: 700;
- Font-Size: The size is calculated in relation to the base font size as described in the table below.
| Heading | Size |
|---|---|
| h1 | $font-size-base * 2.5; |
| h2 | $font-size-base * 2; |
| h3 | $font-size-base * 1.75; |
| h4 | $font-size-base * 1.5; |
| h5 | $font-size-base * 1.25; |
| h6 | $font-size-base |
Example
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample HTML Code
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Unordered list
To be used for unordered vertical lists (i.e. bullet points).
Example
- one
- two
Sample HTML Code
<ul>
<li>one</li>
<li>two</li>
</ul>Ordered list
To be used for ordered vertical lists.
Example
- one
- two
Sample HTML Code
<ol>
<li>one</li>
<li>two</li>
</ol>Links
Unless otherwise stated, use the following properties for the links style.
| Property | Value |
|---|---|
| Default state | |
| color | link standard |
| text-decoration | underline |
| Hover state | |
| color | link hover |
| text-decoration | underline |
| Visited state | |
| color | link visited |
| text-decoration | underline |
| Active state | |
| color | link active |
| text-decoration | underline |
Opening links in a new tab
Avoid opening links in a new tab or window. It can be disorienting - and can cause accessibility problems for people who cannot visually perceive that the new tab has opened.
If you need a link to open in a new tab, then include the words ‘opens in new tab’ as part of the link.
Include rel="noreferrer noopener" along with target="_blank" to reduce the risk of reverse tabnabbing as shown in the following example.
<a href="#" rel="noreferrer noopener" target="_blank">some link (opens in new tab)</a>Use the following best practices:
- If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.
- If it’s an external link to a non-government website, make that clear in the link text. For example, read advice on writing link text from [name of organisation]’.
- Avoid opening links in a new tab or window. It can be disorienting - and can cause accessibility problems for people who cannot visually perceive that the new tab has opened.