We use a global type scale for all user interface (UI) designs to help us ensure brand consistency. The global type scale follows a numeric rhythm and offers a range of text sizes. It's the foundation for refinement of local type scales for specific platforms.
How it works
Text sizes across Volvo Cars UI are scaled and sized consistently. To maintain this rhythmic scaling, each text size grows up or down in increments of 4 and 8pt, expressed in code as 0.5 and 1.0.Type scaling logic: Base unit of 8pt = 1x (1), example text sizes in pt (2), equivalent scale factors using base unit (3).
Global and local type scales
The global UI type scale is a large ladder of text sizes to be referenced by designers as they begin creating type scales for specific platforms.
Local UI type scales are groups of text sizes used within specific platforms. These sizes possess a hierarchy, are derived from the global scale, but are selected specifically to meet the requirements of a given platform.
Global type scale
Reference the global UI type scale when creating local UI type scales (that are platform-specific).
The smallest text size on the global scale is 12pt, which is expressed as 1.5x. The complete global UI type scale can be found within the design system foundation library in Figma.
Local type scales
Local type scales are published and accessible for use by enabling the relevant design system platform libraries in Figma.
When creating a local UI type scale, use text sizes that appear within the global type scale. Keep the amount of text styles (and any weight variants) to a minimum. Only add styles when absolutely necessary.
Begin by auditing a range of UI views on the platform. Categorise every typographic variation and its usage. Then pick the ideal text sizes from the global type scale to cover all use cases.
Local type scale - example
For context, here's an example of the local type scale currently used across the mobile native platforms at Volvo Cars. It consists of 11 text styles:Current text styles used across the Volvo Cars mobile native platform. Local type scales are stored (and published for use) from their respective Figma platform libraries.
Text style categories
There are no predefined categories per text size within the global type scale. Therefore, when creating a local type scale, the categories assigned to each text style depend on the needs of the platform. To avoid the risk of introducing too many categories into a local type scale, here are some recommended categories to work with:
Use numeric text styles for displaying numerical information only. Large numbers benefit from a little negative tracking (letter spacing). We suggest a maximum of -4% with adequate testing.
Use headings to introduce pages and set the largest word-based elements of a design. Headings should be smaller than numeric text styles of the same type scale, since they must contain a string of words rather than just numbers.
Use titles to introduce and guide people through the interface. Text styles for titles should lead readers' eyes from the headings down, so they can easily scan sections.
Use a subtitle style to introduce subsections of content. This style is a little larger than body copy, and can be used for smaller titles, or for emphasising a block of copy like a pull quote or lead sentences.
Use an overline text style in cases where the underlying text would benefit from the inclusion of a small label or visual "tag" above it. Overline styles are mainly used for categorisation or with editorialised content such as long-form articles.
Body copy styles are used to set the majority of textual information in UI.
We recommend 3 levels of body copy hierarchy:
- Body primary
- Body secondary
- Body tertiary
Body tertiary is used for microcopy and is always the smallest text size on a given type scale. Use body tertiary for legal disclaimers, e.g. terms and conditions. Body copy may feature inline links across all 3 text sizes. Consider the variants needed per style.
Text style variants
For all body copy text styles, we recommend creating an 'emphasis' (medium), 'standard' (semi-light), and 'link' (underlined) variant. This may result in 9 text styles to cover body copy alone, within a given type scale.
Use a button label text style within all primary call-to-actions. This style can also be used for all secondary button text which is set in uppercase, with positive tracking and a right-pointing chevron icon (>).
We currently have 1 text style for buttons, which serves:
- Button labels (text within primary call-to-actions)
- Button text for secondary actions (outlined or as standalone text)
Always maintain numeric rhythm when forming local type scales. Ensure that all text style sizes are contrasting from one another to support clear visual hierarchy. We recommend 12pt (1.5x) as the smallest accessible text size.