💡 1. Webfonts & Robuste Font-Stacks
Schriftarten transportieren Markenidentität und Lesbarkeit. Externe Webfonts bindest du per @import oder <link> ein. Dahinter steht immer ein robuster Fallback-Font-Stack:
/* 1. Google Font Import: */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');
/* 2. Robuster Font-Stack mit System-Fallbacks: */
body {
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
code, pre {
font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
}📐 2. Type-Scales (rem), line-height & Lesbarkeit
Nutze relative Einheiten (rem) anstelle starrer Pixel. Dadurch respektiert deine Webseite die Schriftgrößen-Einstellungen im Betriebssystem des Nutzers:
/* Harmonische Type-Scale (Basis: 1rem = 16px): */
h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; } /* 36px */
h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; } /* 24px */
p { font-size: 1rem; font-weight: 400; line-height: 1.65; } /* 16px, Lesefreundlich! */
/* Optimale Spationierung für Eyebrow-Header: */
.category-tag {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
}Die Type-Scale ist wie eine Tonleiter in der Musik: Wenn Überschriften und Fließtexte in harmonischen mathematischen Verhältnissen zueinander stehen, wirkt das Gesamtbild automatisch ruhig, professionell und hochwertig.
Zeilenabstand (line-height: 1.6): Zu enge Zeilen lassen das Auge beim Zeilensprung ermüden; zu weite Zeilen zerreißen den Lesefluss.
📑 3. Cheat-Sheet: Typografie-Eigenschaften
| Eigenschaft | Beispielwerte | Wirkung |
|---|---|---|
font-family |
'Inter', sans-serif |
Schriftart und Fallback-Reihenfolge |
font-size |
1.25rem, 20px |
Schriftgröße (bevorzuge rem!) |
font-weight |
400 (Normal), 700 (Bold) |
Schriftschnitt / Strichstärke |
line-height |
1.5, 1.65 (ohne Einheit) |
Zeilenabstand relativ zur Schriftgröße |
letter-spacing |
0.05em, 1px |
Zeichenabstand / Laufweite |
text-transform |
uppercase, capitalize |
Groß-/Kleinschreibung formatieren |
🧠 Diagnostischer Selbst-Check
Überprüfe dein Verständnis der Kernkonzepte und typischen Denkfallen, bevor du den Code in der Web-IDE schreibst.