Typography

The type system

Type scale

Headline-1

Font: 1em
Weight: normal
Size: 42px
Line height: 42px
Letter spacing: 0
Headline-2
Font: 1em
Weight: normal
Size: 42px
Line height: 42px
Letter spacing: 0
Headline-3
Font: 1em
Weight: normal
Size: 42px
Line height: 42px
Letter spacing: 0px
Headline-4
Font: 1em
Weight: normal
Size: 34px
Line height: 34px
Letter spacing: 0.25px
Headline-5
Font: 1em
Weight: normal
Size: 24px
Line height: 1
Letter spacing: 0px
Headline-6
Font: 1em
Weight: normal
Size: 20px
Line height: 1
Letter spacing: 0.15px
Subtitle-1
Font: 1em
Weight: normal
Size: 16px
Line height: 1
Letter spacing: 0.15px
Subtitle-2
Font: 1em
Weight: normal
Size: 14px
Line height: 1
Letter spacing: 0.1px
Body-1
Font: 1em
Weight: normal
Size: 14px
Line height: 1.5
Letter spacing: 0.5px
Body-2
Font: 1em
Weight: normal
Size: 14px
Line height: 1.5
Letter spacing: 0.25px
Button
Font: 1em
Weight: normal
Size: 14px
Line height: 1
Letter spacing: 1.25px
Caption
Font: 1em
Weight: normal
Size: 12px
Line height: 1
Letter spacing: 0.4px
Overline
Font: 1em
Weight: normal
Size: 10px
Line height: 1
Letter spacing: 1.5px

Vertical spacing

Headline 1

Headline 1

Headline 1 Global
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 1

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«.

Headline 1 Followed By Paragraph
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 1

Headline 1

Headline 1 Followed By Heading 1
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 1

Headline 2

Headline 1 Followed By Heading 2
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 1

Headline 3

Headline 1 Followed By Heading 3
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 1

Headline 4

Headline 1 Followed By Heading 4
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 1

Headline 5
Headline 1 Followed By Heading 5
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 1

Headline 6
Headline 1 Followed By Heading 6
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Vertical spacing

Headline 2

Headline 2

Headline 2 Global
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 2

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«.

Headline 2 Followed By Paragraph
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 2

Headline 2

Headline 2 Followed By Heading 1
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 2

Headline 2

Headline 2 Followed By Heading 2
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 2

Headline 3

Headline 2 Followed By Heading 3
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 2

Headline 4

Headline 2 Followed By Heading 4
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 2

Headline 5
Headline 2 Followed By Heading 5
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Headline 2

Headline 6
Headline 2 Followed By Heading 6
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Vertical spacing

Overline

Overline

Overline Global
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Overline

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«.

Overline Followed By Paragraph
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Overline

Headline 1

Overline Followed By Heading 1
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Overline

Headline 2

Overline Followed By Heading 2
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Overline

Headline 3

Overline Followed By Heading 3
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Overline

Headline 4

Overline Followed By Heading 4
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Overline

Headline 5
Overline Followed By Heading 5
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Overline

Headline 6
Overline Followed By Heading 6
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Overline

Subtitle-1

Overline Followed By Subtitle-1
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Overline

Subtitle-2

Overline Followed By Subtitle-2
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

Vertical spacing

Paragraph

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«.

Paragraph Global
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

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«.

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«.

Paragraph Followed By Paragraph
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

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«.

Headline 1

Paragraph Followed By Heading 1
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

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«.

Headline 2

Paragraph Followed By Heading 2
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

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«.

Headline 3

Paragraph Followed By Heading 3
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

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«.

Headline 4

Paragraph Followed By Heading 4
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

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«.

Headline 5
Paragraph Followed By Heading 5
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...

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«.

Headline 6
Paragraph Followed By Heading 6
INPUT/OUTPUT Leading: 8, 12, 16, 20, 24, 28, 32, 36, 40 ...
Accessibility concerns

Use a minimum value of 1.5 for line-height for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.

W3C Understanding WCAG 2.1

The type system

Applying the Type scale

Navdrawer
Single-line list item: Subtitle-1
Single-line list item: Subtitle-1
Single-line list item: Subtitle-1
Single-line list item: Subtitle-1
Single-line list item: Subtitle-1
Two-line list item: Subtitle-1, Caption
Two-line list item: Subtitle-1, Caption
Two-line list item: Subtitle-1, Caption
Two-line list item: Subtitle-1, Caption
Two-line list item: Subtitle-1, Caption
Two-line list item: Caption / Uppercase, Subtitle-1
Two-line list item: Caption / Uppercase, Subtitle-1
Two-line list item: Caption / Uppercase, Subtitle-1
Two-line list item: Caption / Uppercase, Subtitle-1
Two-line list item: Caption / Uppercase, Subtitle-1
Three-line list item: Overline, Subtitle-1, Caption
Three-line list item: Subtitle-1, Caption
Three-line list item: Subtitle-1, Caption
Three-line list item: Subtitle-1, Caption
TODO has-images Three-line list item: Subtitle-1, Caption
Three-line list item: Subtitle-1, Caption

Beanie with Logo

This is a simple product.

23,80 € 21,42 €

inkl. 19 % MwSt. zzgl. Versandkosten

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Color

Red
TEXT
TEXT

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.

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.

Paragraph: Body-1

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.

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.

Paragraph: Body-2
alt
Dies ist ein Typoblindtext.

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.

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.

Figcaption: Caption
alt
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

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.

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.

Figcaption: Caption
alt
Dies ist ein Typoblindtext.

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.

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.

Figcaption: Caption
alt
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

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.

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.

Figcaption: Caption
Bottom navigation label: Caption / Uppercase
Bottom navigation label: Caption / Uppercase
alt

Dies ist ein Typoblindtext.

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.

Headline 2: headline-2
alt

Dies ist ein Typoblindtext.

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.

Headline 3: headline-3
alt

Dies ist ein Typoblindtext.

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.

Headline 4: headline-4
alt
Dies ist ein Typoblindtext.

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.

Headline 5: headline-5
alt
Dies ist ein Typoblindtext.

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.

Headline 6: headline-6

Hint text

Hint text

Error

Hint text

Text field: Body-1, Hint: Caption

Hint text

Hint text

Error

Hint text

Text field without label: Body-1, Hint: Caption

Hint text

Hint text

Error

Hint text

Text field: Body-1, Hint: Caption

Hint text

Hint text

Error

Hint text

Text field without label: Body-1, Hint: Caption