GOV.UK elements Typography

For GOV.UK domains, always use the GDS Transport Website font in Light and Bold.

Contents:

Font

Use the GDS Transport Website font in Light and Bold. It’s licensed for use on the GOV.UK domains only.

For services publicly available on different domains, use an alternative typeface like Arial.

Headings

A 48px Bold heading

A 36px Bold heading

A 24px Bold heading

A 19px Bold heading


  
    <h1 class="heading-xlarge">A 48px Bold heading</h1>

<h2 class="heading-large">A 36px Bold heading</h2>

<h3 class="heading-medium">A 24px Bold heading</h3>

<h4 class="heading-small">A 19px Bold heading</h4>

Lead paragraph

A 24px lead paragraph with some longer text so that you can see how it wraps.

A 19px body copy paragraph with some longer text so that you can see how it wraps. 


  
    <p class="lede">
  A 24px lead paragraph with some longer text so that you can see how it wraps.
</p>

<p>
  A 19px body copy paragraph with some longer text so that you can see how it wraps.
</p>

Body copy

A 19px body copy paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.

A 16px supporting text paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping. 


  
    <p>
  A 19px body copy paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.
</p>

<p class="font-xsmall">
  A 16px supporting text paragraph.  This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.
</p>

A 19px link without surrounding text

A 19px body copy link with surrounding text which shows the link in more context.

Back 

  
    <p>
  <a href="#">A 19px link without surrounding text</a>
</p>

<p>
  <a href="#">A 19px body copy link</a> with surrounding text which shows the link in more context.
</p>

<a href="#" class="link-back">Back</a>

Lists

  • here is a bulleted list
  • this is another item in the list
  • and another item with a bit more text
  1. Understand that this is a numbered list.
  2. Follow the second step in this numbered list.
  3. Make sure each item is a full sentence ending with a full stop.

  
    <ul class="list list-bullet">
  <li>here is a bulleted list</li>
  <li>this is another item in the list</li>
  <li>and another item with a bit more text</li>
</ul>

<ol class="list list-number">
  <li>Understand that this is a numbered list.</li>
  <li>Follow the second step in this numbered list.</li>
  <li>Make sure each item is a full sentence ending with a full stop.</li>
</ol>

<ul class="list">
  <li><a href="#">Related link</a></li>
  <li><a href="#">Another related link</a></li>
  <li><a href="#">And another link</a></li>
  <li><a href="#" class="bold-xsmall">More</a></li>
</ul>

Inset text

Use bordered inset text to draw attention to important content on the page.

It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. 


  
    <div class="panel panel-border-wide">
  <p>
    It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
  </p>
</div>

Warning text

Use bold text with an exclamation icon to warn people about something important, for example if there are legal consequences like a fine or prison sentence.

Use this sparingly. And remember that the hidden text (here: 'Warning') might need to be rewritten to be appropriate for your case.

You can be fined up to £5,000 if you don’t register. 

  
    <div class="notice">
  <i class="icon icon-important">
    <span class="visually-hidden">Warning</span>
  </i>
  <strong class="bold-small">
    You can be fined up to £5,000 if you don’t register.
  </strong>
</div>

Hidden text (progressive disclosure)

Use this to make your page easier to scan, only showing contextual information when required.

Click on "Help with nationality" to see how this works.

Help with nationality

If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post. 


  
    <details>

  <summary><span class="summary">Help with nationality</span></summary>

  <div class="panel panel-border-narrow">

    <p>
      If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.
    </p>

    <p>
      We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
    </p>

  </div>

</details>

If you’re using the HTML5 details and summary elements, you’ll need a polyfill for not-so-modern browsers.

You’ll need to ensure that your markup matches the example above. GOV.UK elements uses this polyfill from GOV.UK frontend toolkit.

Take a look at example page which demonstrates conditionally revealing information, using the HTML5 details and summary elements.

Examples