Headlines
H1 The Quick brown fox jumps over the lazy dog (Seitentitel mit Linie unten)
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 amet, consectetuer adipiscing elit (1.728em = 27,648px)
H2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit (1.440em = 23,04px)
H3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit (1.200em = 19,2px)
H4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit (1.000em = 16px (100%) Größe wie Fließtext Fett)
H5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit (1.000em = 16px)
H6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit (1.000em = 16px)
Schriftgrößen im CSS immer als em setzen, em = Größe relativ zu übergeordnetem Element = bei Browser-Zoom bleibt das Größenverhältnis immer gleich!
- font-family: Montserrat
- font-size: 1.0em (16px = 100%)
- font-weight: 400 (normal)
- font-weight: 500 (semi-bold)
- font-weight: 600 (bold)
- color Fließtext: #444444 (grau-schwarz)
- color H1, H2: #9A785F
- color H3, H4, H5, H6: #444444 (grau-schwarz)