Design System

Typography

This guide explains how to use our typographic styles across The Australian Financial Review. It covers typefaces, sizes, weights, line-heights and tracking recommendations.

Overview

Sueca is used as our main typeface, supported by Sueca-Sans. We use a single type hierarchy that is scaled to work across all devices. We change type sizes based on screen size and device capabilities, such as whether it has a touch screen. Text is the primary way that users digest content and accomplish work, so it’s important to use good typographic principles to establish a clear visual hierarchy and to maximize legibility.

Typeface

These are all our fonts, weights and styles:

Sueca Regular
Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Sueca Bold
Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Sueca Italic
Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Sueca Bold Italic
Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Suecasans Regular
Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Suecasans Bold
Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Sizes

Font size/Line height Serif Regular Serif Italic Serif Bold Serif Bold Italic Sans Regular Sans Bold
82px/102px Aa Aa Aa Aa Aa Aa
50px/60px Aa Aa Aa Aa Aa Aa
42px/52px Aa Aa Aa Aa Aa Aa
32px/42px Aa Aa Aa Aa Aa Aa
26px/32px Aa Aa Aa Aa Aa Aa
20px/26px Aa Aa Aa Aa Aa Aa
16px/22px Aa Aa Aa Aa Aa Aa
12px/16px Aa Aa Aa Aa Aa Aa
10px/14px Aa Aa Aa Aa Aa Aa