Font

If your service is on the service.gov.uk subdomain you must use the GDS Transport font.

You should use an alternative typeface like Helvetica or Arial for services that are publicly available on different domains.

If you’re not sure whether you should be using GDS Transport, read the Service Manual guide on making your service look like GOV.UK or contact the Design System team.

Headings

Use headings consistently to create a clear hierarchy throughout your service.

Markup headings semantically using the appropriate <h#> level HTML element and use the corresponding heading class to apply the GOV.UK styling.

Write all headings in sentence case.

<h1>govuk-heading-xl</h1>
<h2>govuk-heading-l</h2>
<h3>govuk-heading-m</h3>
<h4>govuk-heading-s</h4>

<>
  <h1>govuk-heading-xl</h1>
  <h2>govuk-heading-l</h2>
  <h3>govuk-heading-m</h3>
  <h4>govuk-heading-s</h4>
</>

Headings with captions

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

<h1>
  <span class="caption">govuk-caption-xl</span>
  govuk-heading-xl
</h1>
<h2>
  <span class="caption">govuk-caption-l</span>
  govuk-heading-l
</h2>
<h3>
  <span class="caption">govuk-caption-m</span>
  govuk-heading-m
</h3>
<h4>
  <span class="caption">govuk-caption-s</span>
  govuk-heading-s
</h4>

<>
  <h1>
    <span className="caption">govuk-caption-xl</span>
    govuk-heading-xl
  </h1>
  <h2>
    <span className="caption">govuk-caption-l</span>
    govuk-heading-l
  </h2>
  <h3>
    <span className="caption">govuk-caption-m</span>
    govuk-heading-m
  </h3>
  <h4>
    <span className="caption">govuk-caption-s</span>
    govuk-heading-s
  </h4>
</>

Paragraphs

Body

The default paragraph font size is 19px on large screens and 16px on small screens.

<p>govuk-body</p>

<p>govuk-body</p>

You can also add classes to create a lead paragraph or smaller body copy to convey hierarchy in your page.

Lead paragraph

A lead paragraph is an introductory paragraph that you can use at the top of a page to summarise the content. Lead paragraphs use 24px type on desktop and should only be used once per page if needed.

<p class="lead">govuk-body-l</p>

<p className="lead">govuk-body-l</p>

Links

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.

<a href="#">govuk-link</a>

<a href="#">govuk-link</a>

Lists

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

<ul class="plain">
  <li><a href="#">Benefits calculators</a></li>
  <li><a href="#">Benefit overpayments</a></li>
  <li><a href="#">Benefit fraud</a></li>
  <li><a href="#">More</a></li>
</ul>

<ul className="plain">
  <li>
    <a href="#">Benefits calculators</a>
  </li>
  <li>
    <a href="#">Benefit overpayments</a>
  </li>
  <li>
    <a href="#">Benefit fraud</a>
  </li>
  <li>
    <a href="#">More</a>
  </li>
</ul>

Bulleted lists

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.

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

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

Numbered lists

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

You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence.

<ol>
  <li>Delivery address.</li>
  <li>Payment.</li>
  <li>Confirmation.</li>
</ol>

<ol>
  <li>Delivery address.</li>
  <li>Payment.</li>
  <li>Confirmation.</li>
</ol>

Section break

You can use the <hr> element to create a thematic break between sections of content.

<hr />

<hr />