Typography

Type scale

The pattern library uses a typograhpical scale to create a set of font sizes linked to each other by a common ratio. This is also responsive so the scale adjusts based on the width of the viewport. The pattern library currently uses Modular Scale to create the various responsive scales.

Override font sizes

You can use the following classes to set font sizes to a specific position on the typographical scale:

The additional .sta-font-scale--reset class also provides an option to set the font size to 1rem and move it out of the scale, sitting between -1 and 0, but with no responsive size changes.

Headings

When using headings these must follow the correct semantic order, for example h2 appearing under h1. By default headings are placed on the typographic scale, but you may override these sizes using the above classes if your design is not visually balanced.

Open example in new window

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Content blocks

Wrap content in a block with the .sta-content class to add basic spacing and styling to the following common elements:

• Headings (levels 1 to 4)
• Paragraphs
• Lists (ordered, unordered and definition)
• Tables
• Figures and figcaptions
• Blockquotes
• and iframes.

Font styles

Bold text

• The class .sta-font-weight--bold element defines bold text, without any extra importance.
• The HTML strong element adds greater semantic importance to text which appears as bold.
• Try to keep items in bold and strong as short as possible and do not write entire sentences or paragraphs in a bold or strong typeface.
• Bold and strong text should not be used as a substitute for headings.

Open example in new window

<div class="sta-content">
  <p>This is example paragraph where <strong>this text has higher importance</strong> compared to the surrounding content.</p>
  <p>This is example paragraph where <span class="sta-font-weight--bold">this text has been styled as bold</span> but has no higher importance semantically.</p>
</div>

Italics and emphasis

• The class .sta-font-style--italic element defines italic text, without any semantic meaning.
• The HTML em element defines emphasised text, with added semantic importance which is displayed in italics.
• For accessibility reasons, avoid the excessive use of italics and emphasis on the web.
• The class .sta-font-emphasis--low changes the colour of the text to have less contrast against the background colour. This can be used to reduce the visual importance of specific sections of text.

Open example in new window

<div class="sta-content">
  <p>This is example paragraph where <em>this text has higher emphasis</em> compared to the surrounding content.</p>
  <p>This is example paragraph where <span class="sta-font-style--italic">this text has been styled as italic</span> but has no higher emphasis semantically.</p>
  <p>This is example paragraph where <span class="sta-font-emphasis--low">this text has been styled with low emphasis</span> but has no lower emphasis semantically.</p>
</div>

Introduction paragraph

• The class .sta-lead can be applied to a paragraph <p> tag to increase the visual importance of the text which can be used to lead the reader into the remainder of the content.
• This should only be used once per page and at the top of a block of content.

Open example in new window

<div class="sta-content">
  <p class="sta-lead">This is the lead paragraph to provide a summary for the article and draw attention when placed above the remainder of the content.</p>
</div>