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, maecenas sed diam eget risus varius blandit sit amet non magna.

A 19px body copy paragraph, maecenas sed diam eget risus varius blandit sit amet non magna.


  
    <p class="lede">
  A 24px lead paragraph, maecenas sed diam eget risus varius blandit sit amet non magna.
</p>

<p>
  A 19px body copy paragraph, maecenas sed diam eget risus varius blandit sit amet non magna.
</p>

  

Body copy

A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

A 16px supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.


  
    <p>
  A 19px body copy paragraph, maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>

<p class="font-xsmall">
  A 16px supporting text paragraph, maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>

  

A 19px link without surrounding text

A 19px body copy link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Back

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

<p>
  <a href="#">A 19px body copy link</a>. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>

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

  

Lists

  1. This is a numbered list.
  2. This is the second step in a numbered list.
  3. The third step is to 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>vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</li>
  <li>vestibulum id ligula porta felis euismod semper</li>
  <li>integer posuere erat a ante venenatis dapibus posuere velit aliquet</li>
</ul>

<ol class="list list-number">
  <li>This is a numbered list.</li>
  <li>This is the second step in a numbered list.</li>
  <li>The third step is to 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="#">Related link</a></li>
  <li><a href="#">Related 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>

  

Use bold text with an exclamation icon if there are legal consequences - for example, a fine or prison sentence.

Warning 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.

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

Examples