Make content easier to scan and read, establishing hierarchy.




FYQ2 target




A clear and well-considered typographic system is the base of high-quality design.

Web Design is 95% Typography
— Oliver Reichenstein, iA

Related content

Our principles in practice

Our identity principles guide how we define our foundations to create a better experience for everyone. Here’s how they apply to typography:

  1. Coherent: Context is essential, and a rigid set of styles won’t cover all our audience’s needs. We define different scales with the same foundational rules.
  2. Empowering: Establishing a hierarchy is one of the most vital goals of typography. It helps people scan and find content based on its importance and determine where they are.
  3. Clear: Text is not decoration; its primary goal is to be read. While our typeface’s attributes determine the text’s legibility, its readability relates to how the type is arranged or set in the design. We have carefully crafted the type size, line height, line length, and color contrast to maximize readability.
  4. Inclusive: We don’t create or apply styles by their look but by their hierarchical role in the content context. We are sensible of the significant impact of the heading structure on accessibility. We give people control over how fonts are displayed using relative units.


Roobert PRO, from Displaay Type Foundry

Roobert PRO, from Displaay Type Foundry

We use Roobert PRO across the brand and product experience, a mono-linear geometrical sans-serif font family. The PRO version supports Latin Central European languages newly, Greek & Cyrillic.



Information and visual hierarchy

Information and visual hierarchy

A summary of our visual emphasis levels to provide a good visual hierarchy


Font size contrast creates a visual hierarchy

Font size contrast creates a visual hierarchy

This example uses a 1.250—Major third—modular scale

Size contrast is essential to creating a hierarchy. We compose sets using modular scales—a series of proportional values, where each is a factor of the others.

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
— Robert Bringhurst, The elements of typographic style

Related content


Bold text represents strong importance, seriousness, or urgency.

Generally, we should avoid emphasizing elements within the content using weight to prevent them from competing with other more critical elements in the content hierarchy, like headings and buttons.

Alternatively, we can use other ways of highlighting text by using a different font style (italic) or emphasizing/de-emphasizing using color.

⛔️ Don’t

⛔️ Don’t

Emphasize values using bold weight, as they’ll compete directly with headings and buttons.

✅ Do

✅ Do

De-emphasize labels using Secondary text color to guide the attention toward the values.


Most of the elements will use the Primary text color. We can use color contrast to emphasize/de-emphasize elements, details, words, etc.

Related content

Line height & tracking

Line height and tracking will depend on the size, weight, and purpose—headings, body text, etc.


Text alignment helps manage people’s attention and makes the text more readable.

We often use left alignment because it is more readable. Left alignment creates a clearer vertical baseline which helps in reading the text.

How we use text alignment:

  1. Left aligned: in most cases.
  2. Right aligned: for balance, compositional solution.
  3. Center aligned: very rarely. Mostly for headings.

Semantics and styles


We use headings to separate sections of content. When introducing an important concept, we usually introduce a heading to let people know the topic changes, which helps with readability, scannability, and accessibility.

They are always set in bold weight and come in different sizes to establish hierarchy and structure the content.


A Kicker is an introduction to a heading that makes it easier to scan. It’s usually only a word or two, maybe slightly longer. It can also be used as a type of section heading in places where the space is compromised, like tables. It comes in uppercase to distinguish it from the rest of the headings.

Body text


The lead content is larger than the default and summarizes or emphasizes the most significant points. They are typically used only at the beginning of the content.


The standard body size for content.


Captions are smaller than the default and are rarely used alone. They give descriptive details or metadata following a more significant element.

Following our Foundations first principle, we’ve decided to keep links underlined by default for usability and accessibility. Otherwise, link text must have at least 3:1 contrast with surrounding body text and present a non-color indicator (typically underline) on mouse hover and keyboard focus.

Quality checklist

This element passes the following requirements described in our Component lifecycle.



α · Design tokens

It uses Ariane design tokens.

α · Accessible use of color

Its color contrast ratio is at least 4.5:1 for text and interactive areas.

α · Naming agreement

Its name is agreed upon and shared between design and development.

β · Docs L1

It has essential documentation with at least primary usage.

β · Use cases

All the uses are audited and refined.

RC · Definition agreement

Its naming and properties are audited and aligned in design and code.

RC · Accessible L1

Its accessibility is manually audited, and any significant issues are fixed.

RC · Docs L2

The documentation covers the most common use cases and is expected to be iterated during the Release Candidate phase.


  1. Typography principles, by Obys agency.
  2. Link contrast checker, by WebAIM.