Foundation
Type
The ansarada typography is simple and sophisticated using only two typefaces with a minimal range of sizes and weights. There are two sets of formatting that specifies how type is displayed within product elements and within a text editor. Type is set to a size and line height that conforms to the baseline grid of 6px.
Gravur
Gravur Condensed Light is our display typeface which is used in headings and only ever set in upper case.
Trade Gothic Light
Trade Gothic Light is our body typeface which is used in all interface elements and to display paragraphs of text.
Product typography
| Example | Colour | Size | Line height | Description |
|---|---|---|---|---|
Heading 1 |
Green | 30px | 36px | The main heading of a page or dialog |
Heading 2 |
Black | 18px | 24px | Second level heading |
|
Body |
Charcoal | 14px | 18px | Used in all interface elements and in paragraphs of text |
|
Emphasis |
Black | 14px | 18px | Emphasis is used within body type to highlight important information |
| Fine Print | Black | 12px | 15px | Used to display less important information |
| example.com | Forest | inherited | inherited | All text links |
Editor typography
| Example | Colour | Size | Line height | Description |
|---|---|---|---|---|
Heading 1 |
Green | 30px | 36px | The main heading |
Heading 2 |
Charcoal | 24px | 30px | Second level heading |
Heading 3 |
Charcoal | 21px | 24px | Third level heading |
Heading 4 |
Charcoal | 18px | 24px | Fourth level heading |
Heading 5 |
Black | 16px | 24px | Fifth level heading |
Heading 6 |
Black | 16px | 18px | Sixth level heading |
|
Body |
Charcoal | 14px | 18px | Paragraphs of text |
|
Emphasis |
Black | 14px | 18px | Used in body text to highlight important information |
Typography in lists
Unordered list
- Pears
- Apples
- Oranges
Ordered list
- Number One
- Number Two
- Number Three
Definition list
- Definition list term
- Definition list description
- Definition list term
- Definition list description
- Definition list term
- Definition list description