Typography

Written content is a key part of our interfaces, from marketing content through to legal data. It is key that is it legible and accessible on any device.

Key points

Update in progress

It's the designer's responsibility to assign the appropriate HTML markup for headings and sub-headings in annotations.

Web and native platforms

Use appropriate brand font families for headings, sub-headings and form legends

Use bold weight for headings

Use medium weight for sub-headings

Use soft-grids by defining space between elements

Body text

Body text differs depending on the platform:

Platform	Font family
Web	Brand Specific
iOS	San Francisco
Android	Roboto

Truncation

Truncation of content should be limited. Text should be allowed to wrap, so it's readable to the user at all times.

Consider how the wrapped text will display when working on designs, particularly components.

Web vs native typography

For brand consistency, we use the same stylistic approach for our fonts.

Although we use a custom Ubuntu font for headings on each platform, our font choice is the default for that platform. Each platform has its own type scale but uses a consistent approach to the naming conventions.

In most cases, the minimum font size we use is 16px, with the exception of smaller fonts on supporting labels.

There are different font size and scales varies between the web and native platforms, web also has size variations based on the viewport size.