Headings

The Eyebrow heading is an uppercase H6 for supporting the following heading. Use it to label headings that are part of a larger group of related pages or categories. The eyebrow heading should be concise and shorter than the main heading.

Subtitles

A subtitle is smaller than a headline and is used in combination with it. It should be between 16 to 32 px.

Captions

Captions are the smallest fonts used on our sites. Use a font size of 12 to 14 px for captions.

Text Styles

Line Height

Line spacing ranges from 1.2 to 1.6 and depends on the font size you want to use. For headings, use a smaller line-height (1.2-1.4). For body text and other small fonts, since they are naturally harder to read, consider using a higher line spacing (1.4-1.6) to allow the eye to follow more easily.

Line Length

Line length describes the width of the content. Comfortable line length allows the reader’s eyes to flow easily from the end of one line to the beginning of the next. For longer body text, the recommended line length is between 50 to 75 characters, including spaces, though lengths may range from 40 to 90 characters.

Alignment

Use left alignment for a large body of text to encourage readability. Right-aligned text is best for distinguishing short typographic elements (such as side notes) within a layout. Use centred text only for a short body of text.

Lists

Lists are used to present information in a structured and easily scannable format.
Use bullet points to introduce each item in an unordered list.
Use numbers (1, 2, 3, etc.) to indicate the order of items in an ordered list.
Align the list with the rest of the body text.
Use the same line height as body text for list items (and their sub-items) to ensure ensuring a harmonious and consistent reading experience.

Nesting

Nest lists when there is a hierarchical relationship between items.
Use consistent indentation for sub-items within a list and increase the indent for each level of nesting.
Visually differentiate nested lists using indentation and alternative bullet styles. When possible, use a different symbol with a reduced weighting or size to avoid distracting user’s attention away from the top-level entries.

<ol> Ordered Lists

1. Vestibulum bibendum ipsum eu viverra pharetra.
   Mauris aliquet eu eros vel porttitor. Aliquam erat volutpat.
   1. Quisque pharetra mi sed lacus hendrerit pharetra.
   2. Cras vulputate condimentum ante, vel sodales purus semper vel.
      1. Nulla facilisi. Integer pulvinar malesuada sem in ullamcorper.
      2. Curabitur sit amet mauris augue.
2. Sed vel interdum neque.
   Integer tempor interdum consectetur.
   1. Donec ac mauris feugiat, dignissim risus id, vestibulum lorem.
   2. Aenean rhoncus vel lectus non varius.
      1. Fusce sit amet pharetra dui.
      2. Nam non lectus sit amet est lacinia eleifend ut vitae neque.

<ul> Unordered Lists

• Vestibulum bibendum ipsum eu viverra pharetra.
  Mauris aliquet eu eros vel porttitor. Aliquam erat volutpat.
  • Quisque pharetra mi sed lacus hendrerit pharetra.
  • Cras vulputate condimentum ante, vel sodales purus semper vel.
    • Nulla facilisi. Integer pulvinar malesuada sem in ullamcorper.
    • Curabitur sit amet mauris augue.
• Sed vel interdum neque.
  Integer tempor interdum consectetur.
  • Donec ac mauris feugiat, dignissim risus id, vestibulum lorem.
  • Aenean rhoncus vel lectus non varius.
    • Fusce sit amet pharetra dui.
    • Nam non lectus sit amet est lacinia eleifend ut vitae neque.