Font / Font sizes and Text
- Font is PT
Sans, a licence free google font.
- Typography size scales in correspondence to viewport width. Above 1010px to 1920px it gradually scaled
bigger. Below 764px H1 gradually scales smaller (details below).
- Typography is fluid (line breaks are dynamic).
Stage Teaser Headline: used for stage teaser: The quick brown fox jumps
over the lazy dog.
| Below 764px: |
22px = 1,7em; line-height: 30px = 2,3em |
| Below 1010px: |
28px = 2,15em; line-height: 30px = 2,3em |
| At 1920px: |
36px = 2,78em; line-height: 42px = 3,23em |
| CSS Class: |
font-headline-stage-teaser |
Headline: used as default headline: The quick brown fox jumps over the lazy dog.
| Below 1010px: |
15px = 1,15em; line-height: 21px = 1,6em |
| At 1920px: |
18px = 1,34em; line-height: 24px = 1,85em |
| CSS Class: |
font-headline |
Headline Text Bold (H3): used for tables, lists, paragraphs: The quick brown
fox jumps over the lazy dog. PT Sans Bold
| Below 1010px: |
13px = 1em; line-height: 18px = 1,38em |
| At 1920px: |
15px = 1,15em; line-height: 21px = 1,62em |
| CSS Class: |
font-headline-text-bold |
Text Standard: used for all regular text (Copytext): The quick brown fox jumps over the lazy dog.
| Below 1010px: |
13px = 1em; line-height: 18px = 1,38em |
| At 1920px: |
15px = 1,15em; line-height: 21px = 1,62em |
| CSS Class: |
font-text-standard |
Text Small: used for captions and Cookies: The quick brown fox jumps over the lazy
dog.
| Below 1010px: |
11px = 0,85em line-height = 1em (Auto) |
| At 1920px: |
13px = 1em line-height = 1,38em (Auto) |
| CSS Class: |
font-text-small |
