Typography
Typography is an essential part of the AEMO visual system. When used consistently, it unifies messaging and creates familiarity.
Avenir typeface
Avenir is the primary font. AEMO communications should use Avenir, including all body copy and headings.
The word Avenir means “future” in French and hints that the typeface owes some of its interpretation to Futura. But unlike Futura , Avenir is not purely geometric; it has vertical strokes that are thicker than the horizontals, an “o” that is not a perfect circle, and shortened ascenders. These nuances aid in legibility and give Avenir a harmonious and sensible appearance for both texts and headlines.
The typeface is made up of multiple weights: Light, Book, Medium, Heavy, and Black. Italicised versions are also included in the family.
Demo
| Weights |
|---|
| Avenir Black |
| Avenir Heavy |
| Avenir Roman |
| Avenir Book |
Scales
Headings
| Headings | Weight | Size | Usage |
|---|---|---|---|
| Heading level 1 | "AvenirLT-Black" | 3.5rem | Display heading |
| Heading level 2 | "AvenirLT-Black" | 2rem | Page level heading |
| Heading level 3 | "AvenirLT-Black" | 1.5rem | Body level headings |
| Heading level 4 | "AvenirLT-Black" | 1.25rem | Container level headings |
| Heading level 5 | "AvenirLT-Black" | 1rem | Spot level headings |
Body Text
| Name | Demo | Weight | Size | Usage |
|---|---|---|---|---|
| Leading text | Lorem ipsum dolor sit amet | "AvenirLT-Book" | 1.5rem | tagline, quote |
| Extra large text | Lorem ipsum dolor sit amet | "AvenirLT-Roman" | 1.25rem | body text |
| Large text | Lorem ipsum dolor sit amet | "AvenirLT-Roman" | 1.125rem | body text |
| Default text | Lorem ipsum dolor sit amet | "AvenirLT-Roman" | 1rem | body text |
| Small text | Lorem ipsum dolor sit amet | "AvenirLT-Roman" | 0.875rem | body text |
| Extra small text | Lorem ipsum dolor sit amet | "AvenirLT-Roman" | 0.75rem | body text |
Inline text elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text will render as underlined.
This line rendered as bold text.
Lists
- This is a list.
- It appears completely unstyled.
- Structurally, it's still a list.
- However, this style only applies to immediate child elements.
- Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
- This may still come in handy in some situations.
Download the font files
Fallback Font
Arial is one of the most web-safe font, and it is available on all major operating systems. Commonly used for body of many websites, Arial can be used as a solid alternative to a website’s sans-serif font.
Arial is the fallback font to Avenir as the sizing between the two fonts gives the least FOUC (flash of unstyled text). is the fallback font to Avenir as the sizing between the two fonts gives the least FOUC (flash of unstyled text).
CSS
@import "@aemo/aemo-design-tokens/dist/_tokens.css";
@font-face {font-family: 'AvenirLT-Black';src: url('../fonts/AvenirLTStd-Black.otf');}
@font-face {font-family: 'AvenirLT-Heavy';src: url('../fonts/AvenirLTStd-Heavy.otf');}
@font-face {font-family: 'AvenirLT-Roman';src: url('../fonts/AvenirLTStd-Roman.otf');}
@font-face {font-family: 'AvenirLT-Light';src: url('../fonts/AvenirLTStd-Book.otf');}
font family: "Avenir LT Std", "Arial", sans-serif;
Monospace font
Courier is a monospace serif font that closely resembles typewriter text. Widely used in emails, Courier is available in both Mac and Windows and web based application as one of the most web safe fonts.
Monospace fonts are used for data ideally numbers. This enables the user to easily see the position(decimal place, tens and thousands)of the number without having to spend considerable time whilst scanning the data cells.