Maturity
Overview
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:
- 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.
- 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.
- 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.
- 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.
Typeface
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.
Licenses
Hierarchy
Size
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
Weight
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.
Color
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.
Alignment
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:
- Left aligned: in most cases.
- Right aligned: for balance, compositional solution.
- Center aligned: very rarely. Mostly for headings.
Semantics and styles
Headings
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.
Kicker
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
Lead
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.
Default
The standard body size for content.
Caption
Captions are smaller than the default and are rarely used alone. They give descriptive details or metadata following a more significant element.
Links
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.
Maturity
RC
α · 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.
Acknowledgements
- Typography principles, by Obys agency.
- Link contrast checker, by WebAIM.