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 Medium Font size - 39.056px / 2.441em Line height - 46.8672px / 1.2Heading 2 - The quick brown fox jumps over the lazy dog
Font family - Neutro Medium Font size - 31.248px / 1.953em Line height - 37.4976px / 1.2Heading 3 - The quick brown fox jumps over the lazy dog
Font family - Neutro Medium Font size - 25.008px / 1.563em Line height - 30.0096px / 1.2Heading 4 - The quick brown fox jumps over the lazy dog
Font family - Neutro Medium Font size - 20px / 1.25em Line height - 24px / 1.2Heading 5 - The quick brown fox jumps over the lazy dog
Font family - Neutro Medium Font size - 16px / 1em Line height - 19.2px / 1.2Heading 6 - The quick brown fox jumps over the lazy dog
Font family - Neutro Medium Font size - 12.8px / .8em Line height - 15.36px / 1.2 Letter spacing - .91392px / .0714emBody
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 - Neutro Regular Font size - 16px / 1em Line height - 24px / 1.5Small - The quick brown fox jumps over the lazy dog
Font family - Neutro Regular Font size - 14px / 87.5% Line height - 21px / 1.5Strong - The quick brown fox jumps over the lazy dog
Font family - Neutro Demi Font weight - normalEmphasis - The quick brown fox jumps over the lazy dog
Font family - Neutro 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 - Neutro DemiUsage guidelines
| Dos | Donts |
|---|---|
 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.
|