type

Scaling

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

Link copied

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 at Volvo Cars begins with the base unit of 8 points. In code we express 8 points as 1x, 12 points as 1.5x, and 16 points as 2x and so on. We always follow this scaling logic when choosing text sizes.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

Link copied

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

Link copied

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.

Use the global type scale to create local type scales for any given platform.The global UI type scale begins at 12pt (1.5x) and currently extends up to (but is not limited to) 128pt (16x).
Phone and laptop screens showing how type scales vary from one platform to another.Use the global UI type scale to create local type scales for use across specific platforms.

Local type scales

Link copied

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:

The current Volvo Cars mobile native type scale includes 5 categories of text styling: headings, titles, body primary, body secondary (including button labels), and body tertiary (the smallest text size).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

Link copied

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:

Numerics

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.

Numeric text styles may be used to present car statistics, such as range or vehicle speed. Low fidelity mockup.In this example, numeric text styles are used to display the time (1), battery percentage (2), and battery range (3) within car UI.
Numeric text styles used within in-car UI to display large numbers for the time, car battery percentage, and overall range. Real-world example.Real-world example of numeric text styles as used within car UI. Numeric styles help accentuate important data and statistics.

Headings

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.

Heading shown in the context of a website view on a laptop. Low fidelity mockup.Use headings to anchor the narrative of a view.
An example of a heading text style, as it appears on the Volvo Cars website (shown on a laptop screen over an image of a car). Real-world example.Headings set the context of the entire view, like signposts.

Titles

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.

Title text style shown in the context of a mobile phone layout. Low fidelity mockup.Use titles to facilitate visual scanning.
A title text style shown as it appears on the Volvo Cars website (shown centre-aligned on a mobile phone screen). Real-world example.Titles typically operate as more elaborate headings.

Subtitles

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.

Subtitle text style show in context of a website. Low fidelity mockup.Use subtitles to clarify smaller blocks of content.
Subtitle text styles shown as they appear on the Volvo Cars website (shown on a laptop screen with 3 small columns of body copy). Real-world example.Subtitles are mostly used for introducing chunks of body copy.

Overlines

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.

Overline text style shown in the context of a mobile phone screen. Low fidelity mockup.Use overlines in cases where categorisation may be helpful.
An overline text style shown as it appears on the Volvo Cars website (shown on a mobile phone screen above a title text style). Real-world example.In this example overlines help categorise the types of cars.

Body copy

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.

Website view on a laptop, showing the 3 body copy text styles and where they are commonly used. Low fidelity mockup.Use body copy styles when setting navigation links (1), descriptive text (2), and legal disclaimers (3).
3 body copy text styles as they appear on the Volvo Cars website. They are used for website navigation links, descriptive text, and smaller legal disclaimers at the very bottom of the view (shown on a laptop screen). Real-world example.Body copy text styles tend to be the most widely used of any platform type scale.

Button labels

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)
3 button styles are shown in a single mobile phone view. Low fidelity mockup.Primary call-to-action button label (1), secondary outlined button label (2), standalone tertiary button text (3).
3 button styles are shown in a single mobile phone view of the Volvo Cars website. The first button (top right) is blue with a white label. The second button (lower centre) features a blue outline with a blue label, no fill. And the third button style (bottom centre) is blue text only, with a right-pointing chevron arrow suffixed. Button text is set in uppercase for all 3 examples. Real-world example.Use a button label text style to visually differentiate interactive from non-interactive text.

Guidance

Link copied

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.

Visual containing 5 text sizes, from the bottom up they read 12, 16, 20, 24, and 28 point. These sizes represent the right way to scale type, since they are sized rhythmically and possess adequate size differentiation/hierarchy.Type scaling with numeric rhythm.
Visual containing 5 text sizes, from the bottom up they read 8, 11, 12.5, 13, and 15 point. These sizes represent the wrong way to scale type, since they are sized irregularly and lack adequate size differentiation/hierarchy.Type scaling without numeric rhythm.
Copyright © 2021 Volvo Car Corporation (or its affiliates or licensors)