Headings

  • use GDS Transport Website Bold
  • use sentence case for headings
  • use headings consistently to create a clear hierarchy
  <h1 class="gv-u-heading-xxlarge">A 48px heading</h1>

  <h2 class="gv-u-heading-xlarge">A 36px heading</h2> 

  <h3 class="gv-u-heading-large">A 27px heading</h3> 

  <h4 class="gv-u-heading-medium">A 24px heading</h4> 

  <h5 class="gv-u-heading-small">A 19px heading</h5>

Bold text

<div class="gv-u-text-bold-xxlarge">48px bold text</div> 

<div class="gv-u-text-bold-xlarge">36px bold text</div> 

<div class="gv-u-text-bold-large">27px bold text</div> 

<div class="gv-u-text-bold-medium">27px bold text</div> 

<div class="gv-u-text-bold-small">19px bold text</div> 

<div class="gv-u-text-bold-xsmall">16px bold text</div>