Skip to content
type

Principles

Successful typography is based on some basic typographical principles. Understanding these principles will ensure legibility and recognition wherever people encounter the Volvo Cars brand.

Hierarchy

A clear hierarchy of type sizes helps people understand the order of importance of the information we're sharing. Use different sizes and weights to establish this order. We use sentence case in titles, headings and labels. That means we capitalise only the first letter of the first word.

4 text sizes are displayed in this graphic. They begin at the bottom as a smaller point size, and increase upwards in scale. The size of each sentence is set in accordance to the type scaling logic we now follow. From bottom to top the sizes are 0.75x, x, 1.5x, and 2.5x. For undefined formats, the designer must decide for themselves what point size constitutes x, then scale up or down using increments of 1x or .5x.
On certain backgrounds, sizes and weights may need to be adjusted for better visibility. Learn more about typographic scaling.
3 lines of copy are presented, from bottom to top they increase in size and weight. The first example at the bottom is a 2 line sentence set as body copy. It is Volvo Novum, SemiLight. The second sentence above, is a single line, a little larger than the body copy size, but still set in SemiLight. And the final sentence at the top of the image is larger still, and now set in Volvo Novum, medium–a heavier font weight, for impact.
3 examples of typographic hierarchy, this visual includes what we call standalone button text. It is set in Volvo Novum, uppercase, blue, with some positive tracking and features a right-facing chevron arrow suffixed. Button text typically sits underneath body copy, to prompt the associated action.
Examples of clear typeface hierarchy.
A title, image and caption are all presented together in this visual. The title sits directly above an image of 3 people standing in front of a Volvo XC40 vehicle. Underneath the image a caption text style is shown. It is the smallest of all the text sizes currently shown throughout this page (12 point or 1.5x).
Several weights provide useful variety for typeface hierarchy.

Type colour

As well as adjusting size and weight, colour can also be applied to type, to help communicate visual hierarchy. For instance, headings can be set in black, body copy set in grey, and interactive button text can be set in blue. Learn more about UI colours.

Letter spacing

Letter spacing is the space between the letterforms of words. The main purpose of letter spacing is to improve readability. We can use the default letter spacing in most cases, and adjust as needed.

Visual demonstrates that in many cases the default letter spacing (tracking) of a typeface will not need adjusting. It is likely highly legible and represents good practice.
This is the default letter spacing.
This visual demonstrates letter spacing that is too tight. The letterforms are clashing, and it becomes difficult to discern one word from another. In short, readability/legibility is poor. This must be avoided.
The letter spacing is too tight.
This example shows text that has extremely open letter spacing. So much so, that it is hard to scan each word quickly. In this case, the designer needs to reduce, or reset the letter spacing to fix the problem.
The letter spacing is too loose.

Line height

Line height is the space between individual lines of text. The main purpose is also to improve readability of the text. The optimal line height value depends on the context. We adjust line spacing based on the number of words in relation to white space, type sizes, and the overall visual expression.

The default line height (leading) of this sentence represents an example of good readability.
This is the default line height.
The line height of this sentence is too tight. When this occurs readability is negatively impacted as descending letterforms begin clashing with ascending forms on the next line. This is bad practice and must be avoided.
This line height is too tight.
If line height becomes too excessive it negatively impacts the readability of the sentence. In this visual one sentence now appears as two separate lines of text. Excessive line height must be avoided.
This line height is too loose.

Alignment

Type alignment defines how lines or paragraphs of text are positioned. Left-aligned text is preferable to optimise readability. When using this alignment, make sure the right edge is well-balanced visually. Avoid single words ("widows") on a single line.

Chunks of text that are associated are typically spaced apart, but not so far as to become disjointed. With proximity addressed, the next point is to left-align the text boxes, creating a vertical line that assists with the rapid scanning from one line down to another by readers.
Left-aligned text is most commonly used with multi-line copy, as it is easier to read.
It is fine to centre-align shorter text strings within their bounding box. But if you are handling multiple lines of text it’s better to use a left-alignment, to prioritise visual scanning and readability.
Centre-aligned text is mainly used for headings or quotes. The type size and length of the rows are important to ensure that balance is maintained and the text is easy to read.

Line length

Line length determines the number of characters per line. For optimum readability, keep within the recommended ranges shown below.

The ideal line length for body copy is around 30-40 characters per line for shorter lines, or 50-75 for longer lines.

Contrast

Ensure the text in your designs has enough contrast with the background to maximise legibility. Use a dark text colour on light backgrounds and a light text colour on dark backgrounds. The minimum acceptable contrast ratio is: 4.5:1 in most cases, and 7:1 for more critical system feedback–like that of in-car UI.

Example of high contrast text, black on a light grey. This is good practice as it clears 4.5:1 web standards.
Example of high contrast text, white on black. This is good practice as it clears 4.5:1 web standards.
Example of low contrast text, grey on a light grey. This is bad practice as it fails web standards.
Example of low contrast text, grey on black. This is bad practice as it fails web standards.

Type on imagery

Black or white typography is used on our images, with the choice being determined by contrast with background colours and tonality. For instance, black typography is used on a light background, and vice-versa. When used in close proximity to our logo, the typography and logo should have the same colour.

Image of a woman leaning on the roof of a car, waterline in the background and sky above. The Volvo Cars word mark is positioned top centre, set in black. Below that there is a black title that reads 'Lorem ipsum dolor'. The point of this visual is to explain that if an image is generally light, then apply black text and black logo marks. Conversely, if an image is dark in nature, then apply white text and white logo marks. This is good practice as it ensure legibility.
Use only black or white typography on images to create contrast.
When brand marks and type are added over the top of imagery we always ensure contrast is optimised and that there is parity between the branding and the type–in terms of colour.
Typography and logo are the same colour.

Incorrect usage

Here are some examples of common typographic mistakes.

Example of a typeface being used which is not owned or approved by Volvo Cars brand and trademark holding. Do not use other typefaces.
Do not use any non-Volvo Cars typefaces.
Example sentence that has multiple font weights within it. Do not over-complicate typesetting with the switching of font weights and/or styles. This is poor practice since it disrupts the task of reading.
Do not use too many typefaces and weights. It will make the text hard to read.
Example text presented in a vertical orientation. To read this simply requires more effort than necessary and should therefore be avoided.
Do not vertically align the typeface.
Example of text that has been converted to outlines (the letterforms no longer have a fill). This must be avoided.
Do not use outline versions of a typeface.
Every text string that appears in Volvo Cars UI will have a specific colour applied to it. These are colours that have been tested for accessibility and contrast compliance. Do not style text with any colours outside of the UI colour palettes we offer.
Do not use colours outside of the brand palette.
We avoid uppercase copy (except for overline and button label text styles). We never communicate with uppercase sentences and/or exclamation marks (avoid shouting).
Do not shout with capitals and/or exclamation marks.

/