Baseline (vertical rhythm)
All text is on an 8px vertical baseline and uses a 24px line height. This helps achieve consistent vertical spacing between text and patterns. Zell Liew discusses the benefits of implementing a baseline.
How does a baseline work?
All elements are on the 8px baseline. For example:
- This is a list item
- Each item appears on a horizontal line…
- … even this one
<h1 class="margin-bottom-md--0">How does a baseline work?</h1>
<p>All elements are on the 8px baseline. For example:</p>
<ul>
<li>This is a list item</li>
<li>Each item appears on a horizontal line…</li>
<li>… even this one</li>
</ul>
Font
Open Sans is the prioritised font for the website. If that is not available, Helvetica, Arial or sans serif will be used instead.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Body text
Body text can be written as standard markup, without the need for extra classes. However, if there are large blocks of text (for example, in an article) the class 'markdown' will help to remove extra space and bunch the text up.
Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
- Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
- Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula
- Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
<!-- Text with extra space removed -->
<div class="markdown">
<p>Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p>
<ul>
<li>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</li>
<li>Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula</li>
<li>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque
nec, egestas non nisi.</li>
</ul>
</div>
Links
Links have no underline and use the ‘matisse’ colour. Underlining is used in cases where a link needs to stand out.
External links should be followed by the external icon. Any links with the attribute "target='_blank'" will get an external link icon automatically.
<!--Normal link-->
<a href="https://www.ons.gov.uk">ONS website</a>
<!--External link with icon-->
<a href="https://bbc.co.uk">BBC<span class="icon icon-external--dark-small"></span></a>
<!--External link with '_blank' target attribute-->
<a href="https://www.gov.uk" target="_blank">GOV.UK</a>