Skip to main content

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

Primary font demo

Weights
Avenir Black
Avenir Heavy
Avenir Roman
Avenir Book

Scales

Headings

HeadingsWeightSizeUsage
Heading level 1"AvenirLT-Black"3.5remDisplay heading
Heading level 2"AvenirLT-Black"2remPage level heading
Heading level 3"AvenirLT-Black"1.5remBody level headings
Heading level 4"AvenirLT-Black"1.25remContainer level headings
Heading level 5"AvenirLT-Black"1remSpot level headings

Body Text

NameDemoWeightSizeUsage
Leading textLorem ipsum dolor sit amet"AvenirLT-Book"1.5remtagline, quote
Extra large textLorem ipsum dolor sit amet"AvenirLT-Roman"1.25rembody text
Large textLorem ipsum dolor sit amet"AvenirLT-Roman"1.125rembody text
Default textLorem ipsum dolor sit amet"AvenirLT-Roman"1rembody text
Small textLorem ipsum dolor sit amet"AvenirLT-Roman"0.875rembody text
Extra small textLorem ipsum dolor sit amet"AvenirLT-Roman"0.75rembody 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.

This line rendered as italicized 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');}

Use case

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.

See also