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.

OTTO Sans

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

LiveOTTO sans black, bold and regular

HTML

<div style="display:grid;gap:20px;padding:8px 0">
<p class="oc-display-300" style="margin:0 0 8px">OTTO Sans</p>
<p style="margin:0;font-size:1.5rem;line-height:2.25rem;font-weight:var(--oc-base-font-weight-black)">Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>
<p style="margin:0;font-size:1.5rem;line-height:2.25rem;font-weight:var(--oc-base-font-weight-bold)">Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>
<p style="margin:0;font-size:1.5rem;line-height:2.25rem;font-weight:var(--oc-base-font-weight-regular)">Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>

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

size

lineheight

display300

48px/3rem

56px/3,5rem

display200

40px/2,5rem

48px/3rem

display100

32px/2rem

40px/2,5rem

headline300

24px/1,5rem

32px/2rem

headline200

20px/1,25rem

28px/1,75rem

headline100

16px/1rem

24px/1,5rem

headline50

14px/0,875rem

20px/1,25rem

headline25

12px/0,75rem

16px/1rem

headline10

10px/0,625rem

12px/0,75rem

copy125

16px/1rem

24px/1,5rem

copy100

14px/0,875rem

24px/1,5rem

copy75

12px/0,75rem

16px/1rem

copy50

10px/0,625rem

16px/1rem

Livestyle and size

HTML

<div style="display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:0">
<p class="oc-copy-100" style="color:var(--oc-semantic-color-text-secondary);padding-bottom:8px;border-bottom:1px solid var(--oc-semantic-color-divider)">style</p>
<p class="oc-copy-100" style="color:var(--oc-semantic-color-text-secondary);padding-bottom:8px;border-bottom:1px solid var(--oc-semantic-color-divider)">size</p>
<p class="oc-copy-100" style="color:var(--oc-semantic-color-text-secondary);padding-bottom:8px;border-bottom:1px solid var(--oc-semantic-color-divider)">lineheight</p>
<p class="oc-display-300" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">display300</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">48px/3rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">56px/3,5rem</p>
<p class="oc-display-200" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">display200</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">40px/2,5rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">48px/3rem</p>
<p class="oc-display-100" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">display100</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">32px/2rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">40px/2,5rem</p>
<p class="oc-headline-300" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">headline300</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">24px/1,5rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">32px/2rem</p>
<p class="oc-headline-200" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">headline200</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">20px/1,25rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">28px/1,75rem</p>
<p class="oc-headline-100" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">headline100</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">16px/1rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">24px/1,5rem</p>
<p class="oc-headline-50" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">headline50</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">14px/0,875rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">20px/1,25rem</p>
<p class="oc-headline-25" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">headline25</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">12px/0,75rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">16px/1rem</p>
<p class="oc-headline-10" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">headline10</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">10px/0,625rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">12px/0,75rem</p>
<p class="oc-copy-125" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">copy125</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">16px/1rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">24px/1,5rem</p>
<p class="oc-copy-100" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">copy100</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">14px/0,875rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">24px/1,5rem</p>
<p class="oc-copy-75" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">copy75</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">12px/0,75rem</p><p class="oc-copy-125" style="align-self:stretch;display:flex;align-items:center;border-bottom:1px solid var(--oc-semantic-color-divider)">16px/1rem</p>
<p class="oc-copy-50" style="padding:16px 16px 16px 0">copy50</p><p class="oc-copy-125">10px/0,625rem</p><p class="oc-copy-125">16px/1rem</p>

weight

Context

copy100

regular

body text, default text …

copy100

bold

highlighting in text

copy100

underline

links on color

~~copy100~~

strikethrough

strikethrough price

Livedifferent stylings of the copy

HTML

<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;column-gap:0">
<span style="padding-bottom:8px;border-bottom:1px solid var(--oc-semantic-color-divider);align-self:stretch"></span>
<p class="oc-copy-100" style="color:var(--oc-semantic-color-text-secondary);padding-bottom:8px;border-bottom:1px solid var(--oc-semantic-color-divider)">weight</p>
<p class="oc-copy-100" style="color:var(--oc-semantic-color-text-secondary);padding-bottom:8px;border-bottom:1px solid var(--oc-semantic-color-divider)">Context</p>
<p class="oc-copy-125" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">copy100</p><p class="oc-copy-125" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">regular</p><p class="oc-copy-125" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">body text, default text …</p>
<p class="oc-copy-125 oc-copy--bold" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">copy100</p><p class="oc-copy-125" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">bold</p><p class="oc-copy-125" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">highlighting in text</p>
<p class="oc-copy-125" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)"><span style="text-decoration:underline">copy100</span></p><p class="oc-copy-125" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">underline</p><p class="oc-copy-125" style="padding:16px 16px 16px 0;border-bottom:1px solid var(--oc-semantic-color-divider)">links on color</p>
<p class="oc-copy-125" style="padding:16px 16px 16px 0"><s>copy100</s></p><p class="oc-copy-125" style="padding:16px 16px 16px 0">strikethrough</p><p class="oc-copy-125" style="padding:16px 16px 16px 0">strikethrough price</p>

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 list

Lorem ipsum dolor sit amet.
1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

unordered list

Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Liveordered and unordered list

HTML

  <p style="margin:0;font:400 0.8125rem/1.25rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--oc-semantic-color-text-brand)">ordered list</p>
  <ol class="oc-list--ordered oc-copy-125" style="margin:0 0 0 24px;padding:0">
    <li>Lorem ipsum dolor sit amet.
      <ol><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li></ol>
    </li>
  </ol>
  <p style="margin:0;font:400 0.8125rem/1.25rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--oc-semantic-color-text-brand)">unordered list</p>
  <ul class="oc-list--unordered oc-copy-125" style="margin:0 0 0 24px;padding:0">
    <li>Lorem ipsum dolor sit amet.
      <ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li></ul>
    </li>
  </ul>

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

Best practices

Headline

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.

Headline

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.

Don'tDon't use styles below copy100 or headline50 for body text and components, unless the text is short and secondary.

Headline

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Headline

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

DoUse headline in the correct order to provide structure and support the user.

Headline

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Headline

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

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.

Headline

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

DoAdhere to our design tokens and ensure color combinations maintain a 4.5:1 contrast ratio between text and background.

Headline

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Don'tDon't create text that fails to meet the 4.5:1 contrast ratio when tested with Figma accessibility plugins.

Headline

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

DoLeft align typography.

Headline

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

CautionCenter or right align typography only after careful consideration because it is not as readable and as structured as aligning to the left.

headline100 → 16px (1rem) / 24px (1.5rem)

Das ist ein Typoblindtext – an ihm kann man sehen, ob alle Buchstaben da sind.

headline100 → 16px (1rem) / 20px (1.25rem)

Das ist ein Typoblindtext – an ihm kann man sehen, ob alle Buchstaben da sind.

CautionIf necessary, the line height for short texts can be overridden with other line height tokens.

copy100 → 14px (0.875rem) / 24px (1.5rem)

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

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.