Overview
All typography options are based on the Neutro font family.
Headings
All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, allowing you to match the font styling of a heading but maintain inline display.
Heading 1 - The quick brown fox jumps over the lazy dog
Font family - Neutro Font weight - Medium Font size - 39.06px Line height - 46.87px / 120%Heading 2 - The quick brown fox jumps over the lazy dog
Font family - Neutro Font weight - Medium Font size - 31.248px Line height - 37.49px / 120%Heading 3 - The quick brown fox jumps over the lazy dog
Font family - Inter Font weight - Semibold Font size - 25.008px Line height - 30px / 120%Heading 4 - The quick brown fox jumps over the lazy dog
Font family - Inter Font weight - Semibold Font size - 20px Line height - 24px / 120%Heading 5 - The quick brown fox jumps over the lazy dog
Font family - Inter Font weight - Semibold Font size - 16px Line height - 19.2px / 120%Heading 6 - The quick brown fox jumps over the lazy dog
Font family - Inter Font weight - Semibold Font size - 12.8px Line height - 15.36px / 120%Body
Base font-size is 100% which inherits from the users browser settings. Default is 16px with a line-height of 1.5. This is applied to the body and all paragraphs. In addition, paragraphs receive a bottom margin of half their computed line-height (12px by default).
Paragraph - The quick brown fox jumps over the lazy dog
Font family - Inter Font weight - Regular Font size - 16px / 1em Line height - 24px / 1.5Small - The quick brown fox jumps over the lazy dog
Font family - Inter Font weight - Regular Font size - 14px / 87.5% Line height - 21px / 1.5Strong - The quick brown fox jumps over the lazy dog
Font family - Inter Font weight - SemiboldEmphasis - The quick brown fox jumps over the lazy dog
Font family - Inter Font weight - Regular Font style - ItalicLists
Ordered lists and unordered use the traditional html markup of <ol> and <ul>. Additionally lists called 'Tick list' and 'Cross list' can be achieved my adding the classes .list--tick or .list--cross to the <ul> element. These are mainly used to display features.
Unordered list
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Ordered list
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Tick list
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Cross list
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Links
The standard text link can be utilised with the HTML markup of <a>. To implement one of the advanced link styles apply the classes .link-advanced, .link-advanced--yellow or .link-advanced--white.
Advanced links
Font family - Inter Font weight - RegularUsage guidelines
| Dos | Don'ts |
|---|---|
 Do keep use of heading variations to a minimum by reserving them to highlight a section.
|
 Don't overuse heading variations to add emphasis to your copy. Use strong or emphasis instead.
|
|
For SEO purposes, use <H1> strategically and idealy only once on a page.
|