Paragraphs

Notes

  • use GDS Transport Website Light
  • avoid using bold and italics
  • use 19px for body copy – 16px for smaller screens
  • use smaller sizes only if there’s a user need (eg 16px, 14px, 12px)
  • make sure lines of text don’t exceed 75 characters, as they become harder to read beyond that point
<!-- Start: @paragraphs--default -->
<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>

<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>
<!-- End: @paragraphs--default -->
 
<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>

<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>
 
/* No context defined for this component. */