Typography

Edit on GitHub

The typeface is Volvo Centum. All body text defaults to 1rem (16px). Font sizes always use rem units so text scales with browser settings. Use semantic HTML elements — <h1> for the main heading, <h2> for subheadings, and so on. Read more on accessible structures here.

Using typography

There are three ways to apply type styles. Pick whichever fits your context.

Utility class — the simplest option for sizing text:

<p class="font-20">…</p>
<h1 class="heading-1">…</h1>

CSS custom property — use in custom CSS when utility classes don’t cover your needs:

.my-element {
  font-size: var(--v-font-20-size);
  line-height: var(--v-font-20-lineheight);
}

TypeScript helper — for inline styles in React, values update automatically:

import tokens from '@volvo-cars/css/tokens';

<p
  style={{ fontSize: tokens.font20Size, lineHeight: tokens.font20Lineheight }}
/>;

Body sizes

Fixed sizes for body text, labels, and captions. These do not scale with viewport width.

Class	Size	Token
`micro`	12 px	`--v-font-12-size`
`font-14`	14 px	`--v-font-14-size`
`font-16`	16 px	`--v-font-16-size`
`font-20`	20 px	`--v-font-20-size`
`font-24`	24 px	`--v-font-24-size`

Supports responsive prefixes: md:font-20, lg:font-16.

Volvo — For life

<div class="stack-16">
  <p class="micro">Volvo — For life</p>
  <p class="font-14">Volvo — For life</p>
  <p class="font-16">Volvo — For life</p>
  <p class="font-20">Volvo — For life</p>
  <p class="font-24">Volvo — For life</p>
</div>

Headings

Fluid heading styles that scale between a minimum and maximum size depending on the viewport. Bare <h1>–<h2> elements get these styles automatically — use the class only when the semantic level and visual size need to differ.

Class	Min	Max	Token
`heading-1`	32 px	56 px	`--v-font-heading-1-size`
`heading-2`	24 px	36 px	`--v-font-heading-2-size`

Statements

Large display text for hero banners and feature sections. Like headings, these scale fluidly with the viewport.

Class	Min	Max	Token
`statement-1`	72 px	148 px	`--v-font-statement-1-size`
`statement-2`	56 px	112 px	`--v-font-statement-2-size`
`statement-3`	48 px	72 px	`--v-font-statement-3-size`
`statement-signature`	40 px	84 px	`--v-font-statement-signature-size`

statement-signature uses the Volvo Broad Pro family (--v-font-broad-family).

Volvo

<div class="stack-16">
  <h2 class="heading-2">Volvo</h2>
  <h1 class="heading-1">Volvo</h1>
  <p class="statement-3">Volvo</p>
  <p class="statement-2">Volvo</p>
  <p class="statement-1">Volvo</p>
</div>

Fluid scaling

Sizes up to 24 px are fixed for all viewport sizes. Larger styles — headings and statements — scale fluidly using CSS clamp() without hard breakpoints.

Choose a font style below to inspect how its size curve behaves across the full viewport range.

Read more on how to resize text to see how text scales when the user changes browser text-size settings.

Internationalization

Fonts in different languages

Font files are subset into separate files for different character sets, letting the browser load only the appropriate files based on the text rendered on the page. Languages with unsupported characters fall back gracefully.

Freedom to move.

We want to provide you with the freedom to move in a personal, sustainable and safe way.

<div lang="en">
  <h2 class="heading-2">Freedom to move.</h2>
  <h4 class="font-20">Freedom to move.</h4>
  <p class="font-16">
    We want to provide you with the freedom to move in a personal, sustainable
    and safe way.
  </p>
</div>

لا بد أن أوضح لك أن كل هذه

و سأعرض مثال حي لهذا، من منا لم يتحمل جهد بدني شاق إلا من أجل الحصول على ميزة أو فائدة؟ ولكن من لديه الحق أن ينتقد شخص ما أراد

<div lang="ar" dir="rtl">
  <h2 class="heading-2">لا بد أن أوضح لك أن كل هذه</h2>
  <h4 class="font-20">لا بد أن أوضح لك أن كل هذه</h4>
  <p class="font-16">
    و سأعرض مثال حي لهذا، من منا لم يتحمل جهد بدني شاق إلا من أجل الحصول على
    ميزة أو فائدة؟ ولكن من لديه الحق أن ينتقد شخص ما أراد
  </p>
</div>

העתיד שלנו חשמלי

מגוון המכוניות שלנו זמינות עם מערכת הנעה חשמלית. אנו מסייעים לכם לצמצם את השפעת חיי היום יום שלכם על הסביבה.

<div lang="he" dir="rtl">
  <h2 class="heading-2">העתיד שלנו חשמלי</h2>
  <h4 class="font-20">העתיד שלנו חשמלי</h4>
  <p class="font-16">
    מגוון המכוניות שלנו זמינות עם מערכת הנעה חשמלית. אנו מסייעים לכם לצמצם את
    השפעת חיי היום יום שלכם על הסביבה.
  </p>
</div>

ッ警足カメテ氷回ぶにしけ物男

来コ詳下ょゃへ用拠ワケ試究ほンきち惧投即づゅあ奇月は町載ぎえは明夫ムヤツ的主む会

<div lang="ja">
  <h2 class="heading-2">ッ警足カメテ氷回ぶにしけ物男</h2>
  <h4 class="font-20">ッ警足カメテ氷回ぶにしけ物男</h4>
  <p class="font-16">
    来コ詳下ょゃへ用拠ワケ試究ほンきち惧投即づゅあ奇月は町載ぎえは明夫ムヤツ的主む会
  </p>
</div>

Добавяне на пакети

<div lang="bg-BG">
  <h2 class="heading-2">Добавяне на пакети</h2>
  <h4 class="font-20">Добавяне на пакети</h4>
  <p class="font-16">Добавяне на пакети</p>
</div>

Right to Left (RTL) languages

In a right-to-left script (commonly abbreviated RTL), writing starts from the right of the page and continues to the left. Arabic, Hebrew, Persian, and Urdu Sindhi are the most widespread RTL writing systems. Volvo Car operates in several markets where RTL languages are used.

RTL in HTML

You can control the direction of text and interactive elements using the HTML dir and lang attributes. The default value is ltr.

Left to Right (LTR)

Hello World مرحباً بالعالم

من اليمين إلى اليسار (RTL)

Hello World مرحباً بالعالم

<div class="flex flex-col gap-24">
  <div dir="ltr">
    <p class="font-medium mb-4">Left to Right (LTR)</p>
    <p class="font-16">Hello World مرحباً بالعالم</p>
  </div>

  <div dir="rtl" lang="ar">
    <p class="font-medium mb-4">من اليمين إلى اليسار (RTL)</p>
    <p class="font-16">Hello World مرحباً بالعالم</p>
  </div>
</div>

Looking at the English sentence, it will appear as if it’s simply right aligned, but the directional flow of the content has actually changed.

To switch an entire document’s language direction and ensure that Design System components function properly in RTL markets, you must specify both the dir and lang attributes on the <html> tag.

<html dir="rtl" lang="ar"></html>

RTL in CSS

How do we make sure our CSS layouts are bi-directional? Let’s take the example of aligning some text.

.text {
  text-align: right;
  margin-right: 1rem;
}

And for right-to-left languages:

[dir='rtl'] .text {
  text-align: left;
  margin-left: 1rem;
  margin-right: 0;
}

What if we didn’t have to write multiple CSS rules for the same thing? We can use CSS Logical Properties instead.

.text {
  text-align: end;
  margin-inline-end: 1rem;
}

With logical properties, the layout adapts automatically based on the document’s direction:

LTR with logical properties

This text uses text-end

RTL with logical properties

هذا النص يستخدم text-end

<div class="flex flex-col gap-24">
  <div dir="ltr">
    <p class="font-medium mb-4">LTR with logical properties</p>
    <p class="font-16 text-end">This text uses <code>text-end</code></p>
  </div>
  <hr />
  <div dir="rtl" lang="ar">
    <p class="font-medium mb-4">RTL with logical properties</p>
    <p class="font-16 text-end">هذا النص يستخدم <code>text-end</code></p>
  </div>
</div>

All utility classes in @volvo-cars/css use logical properties for right/left properties, and the @volvo-cars/stylelint-config will warn you if you use non-logical properties such as margin-left or padding-right.

Utilities

Weight

Class	Effect
`font-medium`	Emphasis weight (600)
`font-light`	Regular weight (400)

Prefer <strong> for semantic emphasis — font-medium is for visual-only weight changes.

Alignment

Class	Effect
`text-start`	Align to start (LTR-aware)
`text-center`	Center
`text-end`	Align to end (LTR-aware)

Supports responsive prefixes: text-center md:text-start.

Wrapping and truncation

Class	Effect
`text-balance`	Even line lengths. Default on headings/statements.
`text-wrap`	Reset to normal wrapping (opt out of balance).
`truncate`	Single-line ellipsis.
`hyphens`	Auto-hyphenation. Needs a `lang` attribute.

Text transform

Class	Effect
`uppercase`	`text-transform: uppercase`
`capitalize`	`text-transform: capitalize`

Numeric variant

Class	Effect
`tabular-nums`	`font-variant-numeric: tabular-nums`

Gives each digit a fixed, equal width. Use it in columns of numbers so decimal points and digits align vertically, and in live-updating numbers like timers or counters to prevent layout shifts as digits change.

1,234.50

<div class="stack-8">
  <p>1,234.50</p>
  <p class="tabular-nums">1,234.50</p>
</div>

Whitespace

Class	Effect
`whitespace-normal`	Collapse whitespace, wrap normally
`whitespace-nowrap`	Collapse whitespace, no wrapping
`whitespace-pre-line`	Preserve newlines, collapse other whitespace
`whitespace-break-spaces`	Preserve all whitespace and newlines

Italic

Use <em> or <i> for italics. If you need a class, use italic — don’t set font-style: italic directly, as it doesn’t work reliably with variable fonts across browsers.

Lists

<ul> and <ol> have default markers only when no class is added. If you add a class, apply list alongside it to restore markers.

Time colon

The Volvo Centum typeface includes a font feature that renders : as a vertically centred separator, optimised for time and datetime displays such as 08:30 or 14:00:00.

This is applied automatically to:

<time> elements
<input type="time"> and <input type="datetime-local"> (<DateTimeInput />)

08:30

<time datetime="08:30">08:30</time>

For custom components that render time strings (e.g. a countdown or clock), apply the feature in CSS:

.my-timer {
  font-variant-alternates: styleset(time-colon);
}

Naming convention

All font tokens follow the pattern --v-font-{scale}-{property}:

Scale — the size or named style: 12, 14, 16, 20, 24, heading-1–heading-2, statement-1–statement-3, statement-signature.
Property — what the token controls: size, lineheight, weight, size-min, size-max.

Other standalone tokens: --v-font-regular-weight, --v-font-emphasis-weight, --v-font-sans-family, --v-font-broad-family.

Type --v-font in your editor to get autocomplete for all available tokens.

Token reference

A complete list of every font token with its resolved value.

Token	Value
`--v-font-12-size`	`0.75rem`
`--v-font-12-lineheight`	`1.667`
`--v-font-14-size`	`0.875rem`
`--v-font-14-lineheight`	`1.572`
`--v-font-16-size`	`1rem`
`--v-font-16-lineheight`	`1.5`
`--v-font-20-size`	`1.25rem`
`--v-font-20-lineheight`	`1.4`
`--v-font-24-size`	`1.5rem`
`--v-font-24-lineheight`	`1.334`
`--v-font-heading-2-weight`	`400`
`--v-font-heading-2-size`	`round(down, clamp(var(--v-font-heading-2-size-min), 0.714vw + 1.286rem, var(--v-font-heading-2-size-max)), 2px)`
`--v-font-heading-2-size-min`	`1.5rem`
`--v-font-heading-2-size-max`	`2rem`
`--v-font-heading-2-lineheight`	`calc(1em + 0.5rem)`
`--v-font-heading-1-weight`	`400`
`--v-font-heading-1-size`	`round(down, clamp(var(--v-font-heading-1-size-min), 2.143vw + 1.357rem, var(--v-font-heading-1-size-max)), 2px)`
`--v-font-heading-1-lineheight`	`calc(1em + 0.5rem)`
`--v-font-heading-1-size-min`	`2rem`
`--v-font-heading-1-size-max`	`3.5rem`
`--v-font-statement-3-weight`	`400`
`--v-font-statement-3-size`	`round(down, clamp(var(--v-font-statement-3-size-min), 2.5vw + 1.5rem, var(--v-font-statement-3-size-max)), 2px)`
`--v-font-statement-3-size-min`	`2.25rem`
`--v-font-statement-3-size-max`	`4rem`
`--v-font-statement-3-lineheight`	`calc(1em + 0.5rem)`
`--v-font-statement-2-weight`	`400`
`--v-font-statement-2-size`	`round(down, clamp(var(--v-font-statement-2-size-min), 6.429vw + 1.571rem, var(--v-font-statement-2-size-max)), 2px)`
`--v-font-statement-2-size-min`	`3.5rem`
`--v-font-statement-2-size-max`	`8rem`
`--v-font-statement-2-lineheight`	`calc(1em + 0.5rem)`
`--v-font-statement-1-weight`	`400`
`--v-font-statement-1-size`	`round(down, clamp(var(--v-font-statement-1-size-min), 15.714vw + 0.286rem, var(--v-font-statement-1-size-max)), 2px)`
`--v-font-statement-1-size-min`	`5rem`
`--v-font-statement-1-size-max`	`16rem`
`--v-font-statement-1-lineheight`	`calc(1em + 0.5rem)`
`--v-font-statement-signature-weight`	`400`
`--v-font-statement-signature-size`	`round(down, clamp(var(--v-font-statement-signature-size-min), 3.929vw + 1.321rem, var(--v-font-statement-signature-size-max)), 2px)`
`--v-font-statement-signature-size-min`	`2.5rem`
`--v-font-statement-signature-size-max`	`5.25rem`
`--v-font-statement-signature-lineheight`	`calc(1em + 0.5rem)`
`--v-font-regular-weight`	`400`
`--v-font-emphasis-weight`	`600`
`--v-font-sans-family`	`"Volvo Centum", "Helvetica Neue", "Helvetica", "Noto Sans", "Segoe UI", "Arial", sans-serif`
`--v-font-broad-family`	`"Volvo Broad Pro", "Volvo Broad", "Arial Black", sans-serif`
`--v-font-mono-family`	`monospace`

Typography

Using typography

Body sizes

Headings

Statements

Volvo

Volvo

Fluid scaling

Internationalization

Fonts in different languages

Freedom to move.

Freedom to move.

لا بد أن أوضح لك أن كل هذه

لا بد أن أوضح لك أن كل هذه

העתיד שלנו חשמלי

העתיד שלנו חשמלי

ッ警足カメテ氷回ぶにしけ物男

ッ警足カメテ氷回ぶにしけ物男

Добавяне на пакети

Добавяне на пакети

Right to Left (RTL) languages

RTL in HTML

RTL in CSS

Recommended reading

Utilities

Weight

Alignment

Wrapping and truncation

Text transform

Numeric variant

Whitespace

Italic

Lists

Time colon

Naming convention

Token reference