CSS Schriften
Sie wissen bereits, wie Text in der Zeile sitzt. Schriften wählen, welche Buchstaben Sie sehen — die Schriftfamilie, die Größe, die Stärke und ob sie kursiv geneigt sind. Das Laden eigener Webfonts kommt in der nächsten Lektion; hier meistern Sie die Kern-Schrifteigenschaften.
Schriftwerkzeuge auf einen Blick
📊 Häufige Schrifteigenschaften
| Eigenschaft | Alltagsjob |
|---|---|
font-family |
Benennt den Schriftstack (plus generischen Fallback) |
font-size |
Setzt die Textgröße |
font-weight |
Setzt die Strichstärke (z. B. 400, 700, bold) |
font-style |
Setzt normal oder italic (und verwandte Stile) |
font (Kurzform) |
Kombiniert Stil, Gewicht, Größe und Familie in einer Deklaration |
Font-family-Stacks
Listen Sie bevorzugte Schriften zuerst, dann sicherere Alternativen, und enden Sie mit einer generischen Familie wie sans-serif oder serif, damit immer etwas gezeichnet wird.
Lesbarer Sans-Serif-Stack
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}Schriftgröße
font-size setzt die Textgröße. Relative Einheiten wie rem skalieren oft ruhiger mit der Seite; px und Schlüsselwörter wie large funktionieren ebenfalls.
Überschrift- und Fließtextgrößen
cssh1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}Schriftgewicht
font-weight steuert die Fettigkeit. Numerische Gewichte (400, 700) oder Schlüsselwörter (normal, bold) sind üblich. Die Schrift muss das gewünschte Gewicht unterstützen.
Betonung durch Gewicht
css.lead {
font-weight: 700;
}
.caption {
font-weight: 400;
}Schriftstil — italic
font-style: italic neigt den Text, wenn eine kursive Variante verfügbar ist. Nutzen Sie es für Zitate oder sanfte Betonung, nicht für jeden Absatz.
Kursives Zitat
cssblockquote {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
}Font-Kurzschreibweise
Die font-Kurzform kann Stil, Gewicht, Größe und Familie gemeinsam setzen. Größe und Familie sind in der von den meisten Browsern erwarteten Form erforderlich.
Font-Kurzform auf einem Kartentitel
css.card-title {
font: italic 700 1.25rem Georgia, "Times New Roman", serif;
}Eine ruhige Fließtext-Gewohnheit
Wählen Sie einen klaren Stack für die Seite, etwas stärkeres Gewicht oder Größe für Überschriften, und halten Sie den Fließtext leicht lesbar.
Schrift-Baseline der Seite
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}
h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
}Selbst ausprobieren
- Setzen Sie
bodyauf einen Sans-Serif-Stack, der mitsans-serifendet. - Geben Sie
h1eine größerefont-sizeundfont-weight: 700. - Stylen Sie ein
blockquotemitfont-style: italicund Serif-Stack. - Schreiben Sie eine Überschrift mit der
font-Kurzform um. - Vergleichen Sie denselben Absatz in Serif vs. Sans-Serif — spüren Sie den Stimmungswechsel.
Häufige Fehler
- Einen Fancy-Namen ohne Fallback (bricht, wenn die Schrift fehlt)
- Überall riesige feste
px-Größen ohne relatives Denken font-weight: 900verlangen, obwohl die Schrift nur regular und bold liefert- Hier in
@font-face/ gehostete Webfonts springen (nächste Lektion) - text-align oder text-decoration nutzen, wenn font-family oder font-weight gemeint war
Kurzfassung
font-familylistet einen Stack und sollte mit einer generischen Familie endenfont-sizesetzt die Größe; relative Einheiten skalieren oft ruhigfont-weightundfont-styleliefern fette und kursive Betonung- Die
font-Kurzform bündelt Stil, Gewicht, Größe und Familie - Halten Sie einen klaren Body-Stack; eigenes Webfont-Laden kommt als Nächstes
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt