Typography

Key points

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:

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.