Unsere Typografie im Web Texthierarchien
Kurze Erklärung warum Texthierarchien wichtig sind.
Farbpalette & Designelemente Typografie Web
Brandguide
Navigation
1
topnav link desktop / language switcher desktop
font-size: 16 px @ 1720 px 14 px @ 600 px
line-height: 120 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: non
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
searchbox inputfield desktop
font-size: 16 px @ all
line-height: 120 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;3
menu link desktop
font-size: 20 px @ 1720 px 18 px @ 600 px
line-height: 120 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;4
mega menu headline
font-size: 24 px @ 1720 px 20 px @ 390 px
line-height: 120 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;5
mega menu text
font-size: 13 px @ all
line-height: 150 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;6
submenu link
font-size: 20 px @ 1720 px 18 px @ 390 px
line-height: 120 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;7
sub submenu link
font-size: 16 px @ all
line-height: 120 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;8
special link
font-size: 18 px @ all
line-height: 120 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;9
mega simple link
font-size: 20 px @ 1720 px 18 px @ 390 px
line-height: 120 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;10
menu link mobil
font-size: 24 Px @ all
line-height: 120 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;11
topnav link mobil / language switcher mobil
font-size: 24 Px @ all
line-height: 120 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;12
searchbox inputfield mobil
font-size: 24 Px @ all
line-height: 120 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Hero-Content-Box
1
Topline
font-size: 24 px @ 1200 px 15 px @ 390 px
line-height: 125 @ all
letter-spacing: 0 @ all
font-weight: Regular 400
font-family: IBM Plex Mono
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
Headline hero
font-size: 66 px @ 1720 px 30 px @ 390 px
line-height: 106 @ 1720 px 118 @ 390 px
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;3
Text/list
font-size: 18 px @ 1200 px 14 px @ 390 px
line-height: 150 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Headlines
1
Headline large
font-size: 60 px @ 1720 px 27 px @ 390 px
line-height: 105 @ 1720 px 118 @ 390 px
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
Headline medium
font-size: 54 px @ 1720 px 25 px @ 390 px
line-height: 106 @ 1720 px 118 @ 390 px
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;3
Headline small
font-size: 47 px @ 1720 px 22 px @ 390 px
line-height: 106 px @ 1720 px 118 @ 390 px letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Subline
1
Subline
font-size: 31 px @ 1720 px 24 px @ 390 px
line-height: 120 @ 1720 px 125 @ 390 px
letter-spacing: 0.075 em @ 1720 px 0.05 em @ 390 px
font-weight: Medium Condensed 500
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Links
1
Anchor
font-size: 18 px @ all
line-height: 125 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
CTA small
font-size: 18 px @ all
line-height: 125 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;3
CTA medium
font-size: 28 px @ 1720 px 16 px @ 390
px line-height: 106 @ 1720 px 125 @ 390 px letter-spacing: 0 @ all
font-weight: Demi 600
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;4
CTA large
font-size: 31 px @ 1720 px 16 px @ 390
px line-height: 106 @ 1720 px 125 @ 390 px letter-spacing: 0 @ all
font-weight: Demi 600
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;5
Mobile jobs / events CTA
font-size: 14 px @ 390 px
line-height: 125 @ 390 px
letter-spacing: 0 @ 390 px
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Jobs und Events
1
Jobs/events headline
ont-size: 31 px @ 1720 px 16 px @ 390 px
line-height: 105 @ 1720 px 120 @ 390 px
letter-spacing: 0.075 em @ 1720 px 0.05 em @ 390 px
font-weight: Medium Condensed 500
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
Jobs subline
font-size: 20 px @ 1200 px 14 px @ 390 px
line-height: 125 @ 1200 120 @ 390 px
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;3
Jobs/events date
font-size: 36 px @ 1720 px 15 px @ 390 px
line-height: 105 @ 1720 px 120 @ 390 px
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;4
Events subline
font-size: 20 px @ 1200 px 14 px @ 390 px
line-height: 125 @ 1200 px 120 @ 390 px
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;5
Section indicator
font-size: 24 px @ 1200 px 14 px @ 390
px line-height: 105 @ 1200 px 120 @ 390 px letter-spacing: 0 @ all
font-weight: Medium
font-family: IBM Plex Mono
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Zitate
1
Cite
font-size: 54 px @ 1720 px 19 px @ 390 px
line-height: 106 @ 1720 px 120 @ 390 px
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
Author
font-size: 24 px @ 1200 px 14 px @ 390 px
line-height: 145 @ 1200 px 125 @ 390 px
letter-spacing: 0 @ all
font-weight: Regular 400
font-family: IBM Plex Mono
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;3
Cite blog
font-size: 47 px @ 1720 px 22 px @ 390 px
line-height: 106 @ 1720 px 120 @ 390 px
letter-spacing: 0 @ all
font-weight: Regular 400
font-family: IBM Plex Mono
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;4
Author blog
font-size: 16 px @ 1200 px 10 px @ 390 px
line-height: 110 @ 1200 px 125 @ 390 px
letter-spacing: 0 @ all
font-weight: Demi 600
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Accordion
1
Accordion
font-size: 27 px @ 1720 px 16 px @ 390 px
line-height: 130 @ 1720 px 140 @ 390 px
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Tab menue
1
Tab menue
font-size: 31 px @ 1720 px 16 px @ 390 px
line-height: 130 @ 1720 px 140 @ 390 px
letter-spacing: 0 @ all
font-weight: Demi 600
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
Highlight
font-size: 31 px @ 1720 px 16 px @ 390 px
line-height: 130 @ 1720 px 140 @ 390 px
letter-spacing: 0.075 em @ 1720 px 0.05 em @ 390 px
font-weight: Medium Condensed 500
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Teaser
1
Teaser
font-size: 31 px @ 1720 px 16 px @ 390 px
line-height: 130 @ 1720 px 140 @ 390 px
letter-spacing: 0 @ all
font-weight: Demi 600
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Lightbox
1
Lightbox Headline
font-size: 24 px @ all
line-height: 125 @ all
letter-spacing: 0.075 em @ all
font-weight: Medium Condensed 500
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Slider
1
Slider Headline
font-size: 24 px @ all
line-height: 125 @ all
letter-spacing: 0.075 em @ all
font-weight: Medium Condensed 500
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Blog tag
1
blog tag
font-size: 18 px @ 1720 px 14 px @ 390 px
line-height: 150 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Timeline
1
Timeline-card
font-size: 31 px @ 1720 px 16 px @ 390 px
line-height: 106 @ 1720 px 125 @ 390 px
letter-spacing: 0 @ all
font-weight: Demi 600
font-family: Franklin Gothic FS
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Form
1
Label textfield
font-size: 18 px @ 1720 px 14 px @ 390 px
line-height: 150 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
radio / checkbox / input field / select
font-size: 31 px @ 1720 px 16 px @ 390 px
line-height: 120 @ 1720 px Mobil 125 @ 390 px letter-spacing: 0 @ all
font-weight: Demi 600
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;
Footer
1
Footer headline
font-size: 20 px @ 1200 px 15 px @ 390 px
line-height: 106 @ 1200 px 125 @ 390 px
letter-spacing: 0 @ all
font-weight: Regular 400
font-family: IBM Plex Mono
text-transform: uppercase
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
Footer link
font-size: 18 px @ 1200 px 14 px @ 390 px
line-height: 155 @ all
letter-spacing: 0 @ all
font-weight: Book 400
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;3
Credits
font-size: 16 px @ 1200 px 12 px @ 390 px
line-height: 106 @ 1200 px 125 @ 768 px
letter-spacing: 0 @ all
font-weight: Regular 400
font-family: IBM Plex Mono
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;4
Footer mail
font-size: 20 px @ 1200 px 15 px @ 390 px
line-height: 105 @ 1200 px 110 @ 390 px
letter-spacing: 0 @ all
font-weight: Demi 600
font-family: Franklin Gothic FS
text-transform: none
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;