Type Scale🔗

We use a global type scale for our web UI to help us ensure brand consistency. The global type scale follows a numeric rhythm and offers a range of text sizes. The Text component can render different typescale variants with their own sub-styles. These are for use cases where you may need to render a link, or emphasise a portion of text. It will also render different HTML elments based on the variant and sub-style chosen. On top of that, some of those type scales behave differently on different screen sizes where they render different font-size or line-height.

To help visualize the different options, the following visualizer component displays information about the typescale variants and allows switching sub-styles and breakpoints.

Each of the blocks can be expanded for more information.