Schriftarten in CSS
Nichts prägt den Charakter einer Seite so sehr wie die Schrift. CSS regelt sie über eine Handvoll Eigenschaften, allen voran font-family.
font-family: immer mit Ersatzliste
CSS-Code
body {
font-family: Georgia, 'Times New Roman', serif;
}
code {
font-family: 'Courier New', monospace;
}Du gibst eine Wunschliste an: Der Browser nimmt die erste Schrift die auf dem Gerät vorhanden ist. Am Ende steht immer eine generische Familie als Sicherheitsnetz: serif (mit Füßchen), sans-serif (ohne), monospace (alle Zeichen gleich breit, für Code). Namen mit Leerzeichen kommen in Anführungszeichen.
Serif: Mit Füßchen liest sich langer Text angenehm.
Sans-Serif: Klar und nüchtern, der Standard für Oberflächen.
Monospace: Jedes Zeichen gleich breit, wie am Terminal.
Größe und Zeilenabstand
body {
font-size: 1.1rem; /* relativ zur Grundgröße */
line-height: 1.6; /* das 1,6-fache der Schriftgröße */
}Für Größen haben sich rem-Einheiten bewährt: Sie beziehen sich auf die Grundschriftgröße des Browsers und respektieren damit, wenn jemand die Schrift systemweit größer gestellt hat. Pixel funktionieren auch, ignorieren diese Einstellung aber teilweise. Der Zeilenabstand line-height steht am besten als nackte Zahl ohne Einheit, 1.5 bis 1.7 liest sich bei Fließtext angenehm. Dazu kommen die Schnitte: font-weight: bold, font-style: italic, und für Feinheiten letter-spacing.
Systemschriften: die unterschätzte Wahl
Webfonts (per @font-face oder von Font-Diensten geladen) eröffnen gestalterisch alles, kosten aber Ladezeit und werfen beim Laden von Drittanbieter-Servern Datenschutzfragen auf. Die Alternative: Schriften nehmen die sowieso auf jedem Gerät liegen. Genau das tut dieses Wiki, Times, Arial und Courier, null Bytes Font-Download, null externe Anfragen. Zugegeben, bei uns ist das auch Stilmittl. Aber schnell ist es obendrein.
Typische Fehler
- Die generische Familie am Listenende vergessen.
- Schriftgrößen unter 16 Pixel für Fließtext, auf dem Handy wird das Augenpulver.
- Sechs verschiedene Schriftarten mischen. Zwei reichen fast immer: eine für Überschriften, eine für Text.