OTTODesign System

Foundations

Typography

The typography is divided into headline, copy and display. The different type styles are providing readability and hierarchy, which ensures good usability.

Overview

Typefaces

OTTO has its own typeface called OTTO Sans. The font includes different font weights. Only black, bold and regular are used in the design system. The OTTO sans is a sans serif font which is designed to be minimalistic and simple.

Typeface OTTO Sans
OTTO sans black, bold and regular

Styles

The typography is divided into the following styles:

  • Display: Display300 is intended for desktop use. Meanwhile, display100 and display200 can be used for mobile. This display style is not intended for body text and should only appear once per page.
  • Headline: Use the heading tags in the correct hierarchy (h1, h2, h3, etc.). The heading style is not directly connected with the heading tags, but rather represents their hierarchy. Headline100 is our default headline size.
  • Copy: Copy100 is intended for longer text. Smaller copy styles are acceptable for less important information but should be used sparingly.

Scale

The styles come in different sizes. The sizes are systematized by using a numerical suffix. The value 100 is used for the default size, for example headline100. A higher number stands for a bigger representation, whereas a lower number stands for a smaller font size.

style and size

weight and context
different stylings of the copy

List

There are two types of list: ordered and unordered. Each type of list can have multiple levels. An ordered list can help to sort items in a logical way, such as alphabetically or numerically. Unordered lists can help to keep information short and easy to scan.

ordered and unordered list
ordered and unordered list

Note: For full technical documentation of naming, visit Storybook/List.

Best practices

DoUse copy100 or headline100 for most use cases. Especially use copy100 for longer text. Smaller styles are acceptable for less important information but should be used sparingly. This ensures that the content remains accessible to all our customers.
Don'tDon't use styles below copy100 or headline50 for body text and components, unless the text is short and secondary.
DoUse headline in the correct order to provide structure and support the user.
Don'tDon't use headlines in an incorrect order, as this will confuse screen readers. For example, starting a section with a headline200 or headline100, and placing a headline300 further down in the hierarchy.
DoAdhere to our design tokens and ensure color combinations maintain a 4.5:1 contrast ratio between text and background.
Don'tDon't create text that fails to meet the 4.5:1 contrast ratio when tested with Figma accessibility plugins.
DoLeft align typography.
CautionCenter or right align typography only after careful consideration because it is not as readable and as structured as aligning to the left.
CautionIf necessary, the line height for short texts can be overridden with other line height tokens.
DoUse the intended text styles especially for continuous text.

Accessibility

For the correct use of typography in terms of accessibility, it is important to use a clean headline structure. The correct HTML tags (

, ⁣

,

etc.) should be used for the different headlines in the correct order. This ensures that the typographic hierarchy is also present in other formats, such as the screen reader.

Another important aspect of accessible typography is to ensure a minimum color contrast of 4.5:1 to guarantee readability. The only exception in this regard is large-scale text, which only applies to headline300 and our display font styles - a minimum color contrast of 3:1 can be maintained here.

Furthermore, it must be ensured that text can be increased to a size of up to 200% or that the text spacing can be changed without losing information. Our typography no longer works with px, but with "rem". "rem" is a scalable and relative size unit for text. With a scaling of 100%, 1rem corresponds to 16px.

Status

Implementation

Note: For full technical documentation of typography, visit Storybook/Typography.