Typography

Typography covers the predefined font sizing and styling available in the design system.

How to use predefined styles

Our predefined styles consist of a font size, line height, and margin top and bottom. They are designed to be easy to use and bring consistency to all parliament.uk sites.

If you have the design system running on your application, the HTML elements described on this page will be automatically styled.

The styles inherit their colours from the <body> tag. You can change the colour if you need to. For example, if you’re using text on a dark background you can change the font colour to white.

Headings

When setting headings, they must always be ordered properly. For example, a h3 must always follow a h2 and never follow a h1.

Example Open in a new tab: headings

h1 looks like this

h2 looks like this

h3 looks like this

h4 looks like this

h5 looks like this
 
<h1>h1 looks like this</h1>
<h2>h2 looks like this</h2>
<h3>h3 looks like this</h3>
<h4>h4 looks like this</h4>
<h5>h5 looks like this</h5>

Changing the size of a heading

If you want to make a heading display larger or smaller than the predefined size, you can use an override class.

The override classes are:

  • heading-level-1
  • heading-level-2
  • heading-level-3
  • heading-level-4
  • heading-level-5
Example Open in a new tab: heading override

A h3 that uses the h1 size

 
<h3 class="heading-level-1">A h3 that uses the h1 size</h3>

Subheading

If you want to include a more prominent introduction to the page you can add a sub-heading below a h1.

The sub-heading can only be used with a h1.

Example Open in a new tab: subheading

A h1

This is what a subheading looks like

Page content

 
<h1>A h1</h1>
<p class="sub-heading">This is what a subheading looks like</p>
<p>Page content</p>

Paragraphs

Most of the text on a page should use the standard paragraph size.

If you need to make a paragraph larger or smaller you can use a font size override.

Standard paragraph size

Example Open in a new tab: paragraph

Standard paragraph font size

 
<p>Standard paragraph font size</p>

Making a paragraph larger

Only make short blocks of text larger.

Example Open in a new tab: large paragraph

Larger font size

 
<p class="font-size-epsilon">Larger font size</p>

Links

Example Open in a new tab: links

This is what a link looks like.

 
<p>This is what a <a href="#">link looks like</a>.</p>

How to write good link text

Link text should be short, accurate and descriptive. It should tell users where they will go when they click on the link. Do not use phrases like ‘click here’ or ‘read more’. They are inaccessible, particularly for screen reader users.

External links

If you need to link to a website that isn’t on the parliament.uk domain, make that clear in the link text. For example, ‘read advice on writing link text from [name of organisation]’. You don’t need to say explicitly that you’re linking to an external site.

Opening links in a new tab

Avoid opening links in a new tab or window (W3C). 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, include the words ‘opens in new tab’ as part of the link.

Lists

Use lists to make blocks of text easier to read, and to break information into manageable chunks.

Ordered lists

Use an ordered list when the order of the items is relevant.

Example Open in a new tab: ordered list
  1. Delivery address.
  2. Payment.
  3. Confirmation.
 
<ol>
  <li>Delivery address.</li>
  <li>Payment.</li>
  <li>Confirmation.</li>
</ol>

Unordered lists

Use an unordered list when the order of the items is not important.

Example Open in a new tab: unordered list

You can buy:

  • apples
  • oranges
  • pears
 
<p>You can buy:</p>
<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>pears</li>
</ul>

How to write good unordered list text

Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end.

Margins

Our styles all include predefined margins.

Tag Override class Margin top Margin bottom
h1 heading-level-1 None 26px
h2 heading-level-2 30px 22px
h3 heading-level-3 30px 18px
h4 heading-level-4 30px 6px
h5 heading-level-5 25px 3px
p None 18px

Margin collapsing

When two blocks of text are placed next to each other only the largest margin will be used.

For example, if you placed a h2 below a h1 the margin between the two would be 30px (the margin-top of the h2).

Margins when something is the first or last item in a container

When something is the first or last item in a container then margin-top or margin-bottom is automatically removed.

Have a question, suggestion or feedback?

The Improving User Experience cluster manages the design system.

If you work in Parliament, contact us on the #design-system Slack channel.