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.

Body text

Text forming the main content of a web page.

Do's

Use the appropriate font families for your brand

Allow text to wrap so it's readable

Don'ts

Avoid using type scale less than 14-pixels for body text

Avoid using the Italics type style

Avoid truncating the content

Italics can make text difficult to read for users with dyslexia or dyspraxia, as it makes text appear to run together and cause crowding. Screen readers also may not pick up the emphasis, so we should instead find a way to emphasise text that is accessible to all users.

Line-height

Aim to keep the line length to around 90 characters per line for readability. Context and type size will be factors in the value you select.

White-space

Link styles

Link styles for Light surface

Link text is underlined

On hover, the colour changes based on the state

Focus outline located around the text element