Test - Headlines
H1 The Quick brown fox jumps over the lazy dog
H2 The Quick brown fox jumps over the lazy dog
H3 The Quick brown fox jumps over the lazy dog
H4 The Quick brown fox jumps over the lazy dog
H5 The Quick brown fox jumps over the lazy dog
H6 The Quick brown fox jumps over the lazy dog
Quelle: https://type-scale.com
typographisch optimales Größenverhältnis festlegen, mit frei skalierbaren Vorlagen
H1 Lorem ipsum dolor sit (1.728em = 27,648px)
H2 Lorem ipsum dolor sit amet (1.440em = 23,04px)
H3 Lorem ipsum dolor sit amet, consectetuer (1.200em = 19,2px)
H4 Lorem ipsum dolor sit amet, (1.000em = 16px (100%) Größe wie Fließtext Fett)
H5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit (0.875em = 14px)
H6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit (0.875em = 14px)
Schriftgrößen im CSS immer als em setzen, em = Größe relativ zu übergeordnetem Element
- font-family: Open Sans
- font-size: 1.0em (16px = 100%)
- font-weight: 400 (normal)
- font-weight: 500 (semi-bold)
- font-weight: 600 (bold)
- color: #444444 (grau-schwarz)