Typography

In our applications, we use a sans-serif system font stack. This means that we have no single typeface, but rather use the default sans-serif font that is installed on a users device. These are the fonts that are typically rendered per device:

Platform/DeviceDefault font

macOS and iOS

SF Pro Display (Font sizes 19px and above)
SF Pro Text (18px and below)

Android

Roboto

Windows

Segoe UI

Firefox OS

Fira Sans

Type scale

Our font measurements are based on the line-height of the text, spacing is measured from the edge of the text box.

ScaleUsed for
ExtraLarge

Main titles, used for things like a page title. Use only once per page or per modal.

Large
Medium

Highlight secondary titles on a page, these should be used sparingly.

Small

Deep headings and for highlighting important pieces of information.

ExtraSmall

Body

Use for the body copy this can we be anything from a couple of words to a paragraph

Link