Updated on: 23 October 2017

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>