Schrift auswählen
Ergebnis
Die font-family-Liste ist ein Rückfall-Stapel: Der Browser nimmt die erste vorhandene Schrift. Am Ende steht immer eine generische Familie (serif, sans-serif, monospace, system-ui).
Eigene Schriften laden
@font-face {
font-family: "Meine Schrift";
src: url("schrift.woff2") format("woff2");
font-weight: 400 700; /* Variable Font: Bereich */
font-display: swap; /* erst Ersatzschrift zeigen, dann tauschen */
}
body { font-family: "Meine Schrift", system-ui, sans-serif; }- Nutze WOFF2-Dateien und hoste sie am besten selbst (Datenschutz, Tempo)
- Lade nur die Schnitte, die du brauchst
- Beachte die Schriftlizenz
Größe, Gewicht, Stil
Ergebnis
Textformatierung
| Eigenschaft | Beispiel | Wirkung |
|---|---|---|
text-align | left, center, right, justify | Ausrichtung |
line-height | 1.5 | Zeilenabstand (ohne Einheit!) |
letter-spacing | .05em | Buchstabenabstand |
word-spacing | .2em | Wortabstand |
text-indent | 2em | Einzug erste Zeile |
text-transform | uppercase, capitalize, lowercase | Groß-/Kleinschreibung |
text-decoration | underline, line-through, underline wavy red | Linien |
text-shadow | 2px 2px 4px #0006 | Schatten |
white-space | nowrap, pre, pre-wrap | Umbruchverhalten |
text-overflow | ellipsis | "…" bei Überlauf (mit overflow: hidden) |
word-break, overflow-wrap | break-word | lange Wörter umbrechen |
hyphens | auto | automatische Silbentrennung (mit lang) |
Ergebnis
Lesbare Texte
- Zeilenlänge: 45 bis 75 Zeichen, also
max-width: 65ch - Zeilenabstand: 1,4 bis 1,7 für Fließtext, bei Überschriften enger
- Schriftgröße: mindestens 16 px (1rem) für Fließtext
- Kontrast ausreichend; Blocksatz nur mit Silbentrennung
- Linksbündig für lange Texte, zentriert nur für kurze
Ergebnis
Variable Fonts und Schriftgröße flüssig anpassen
Ergebnis
Merke
font-familyist ein Stapel mit generischer Familie am Ende; eigene Schriften per@font-faceund WOFF2remfür Größe,line-heightohne Einheit (1,5 bis 1,7)max-width: 65chbegrenzt die Zeilenlängetext-align,letter-spacing,text-transform,text-overflow: ellipsis,hyphens: autoclamp()macht Schriftgrößen flüssig;text-wrap: balanceverbessert Überschriften
Aufgabe
Gestalte einen Artikel mit eigener Überschriftenschrift, gut lesbarem Fließtext (Zeilenlänge, Abstand), einem Zitat und flüssiger Überschriftengröße.
EMZETT.