Typografie

Die WCAG empfehlen Zeilen mit höchstens 80 Zeichen und einen Zeilenabstand von mindestens 1.5 innerhalb von Absätzen. Zwei CSS-Eigenschaften regeln beides.

Schriften wählen

font-family nimmt eine Liste von Schriften, getrennt durch Kommas. Der Browser nimmt die erste, die auf dem Gerät vorhanden ist, und geht die Liste weiter, wenn sie fehlt. Beende die Liste immer mit einer generischen Familie, serif, sans-serif, monospace oder system-ui, damit etwas Vernünftiges erscheint, egal was installiert ist. Schriftnamen mit Leerzeichen stehen in Anführungszeichen, etwa "Noto Sans KR". system-ui verwendet die Oberflächenschrift des Betriebssystems. Die ist gut gestaltet, schon auf dem Gerät und deckt viele Schriftsysteme ab.

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;          /* 16px unless the reader changed it */
  line-height: 1.6;         /* unitless: 1.6 times the font size */
  color: #222;
}
h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; }
p  { max-width: 65ch; }     /* keeps lines a readable length */
.label { text-transform: uppercase; letter-spacing: 0.08em; }

Du kannst eine Schriftdatei auch mit einer @font-face-Regel von deinem eigenen Server laden oder von einem Schriftdienst. Webfonts geben einer Seite eigenen Charakter, aber jede ist ein Download, der den Text verzögert. Koreanische, chinesische und japanische Schriften können mehrere Megabyte groß sein, weil sie Tausende Glyphen enthalten. Lade nur so viele Schriftstärken, wie du brauchst, und behalte eine gute Ersatzschrift in der Liste.

Größe, Stärke und Zeilenhöhe

font-size setzt die Größe. Wie die Einheit zu Farben und Einheiten gezeigt hat, hält rem den Text im Einklang mit den Einstellungen der Leserschaft. font-weight reicht von 100 (dünn) bis 900 (schwarz), mit 400 als normal und 700 als fett. Die Schlüsselwörter normal und bold bedeuten 400 und 700. Eine Schrift hat nur die Stärken, die ihre Gestalter angelegt haben. Wer also 300 in einer Schrift verlangt, die nur 400 und 700 hat, bekommt die nächstgelegene.

line-height setzt den Abstand zwischen den Zeilen. Gib eine einfache Zahl ohne Einheit an, etwa 1.6: Dann bedeutet sie das 1.6-Fache der Schriftgröße jedes Elements, und Überschriften wie Kleingedrucktes bekommen jeweils einen passenden Abstand. Ein Wert mit Einheit, etwa 24px, wird einmal berechnet und als feste Länge vererbt, und das ist für große Überschriften zu eng. Fließtext liest sich meist gut zwischen 1.4 und 1.7. Das WCAG-Erfolgskriterium 1.4.8 empfiehlt innerhalb von Absätzen mindestens 1.5. Große Überschriften sehen enger besser aus, etwa bei 1.1 bis 1.3.

Zeilenlänge und Ausrichtung

Sehr lange Zeilen ermüden: Das Auge verliert den Faden, wenn es zum Anfang der nächsten Zeile zurückspringt. WCAG 1.4.8 empfiehlt höchstens 80 Zeichen pro Zeile (40 für Chinesisch, Japanisch und Koreanisch). Am einfachsten setzt man das mit max-width in der Einheit ch für Absätze durch, zum Beispiel max-width: 65ch. text-align legt die Ausrichtung fest: left (oder start) ist bei langem Text in Sprachen, die von links nach rechts laufen, am leichtesten zu lesen, center passt zu kurzen Überschriften, und justify kann ungleichmäßige Lücken zwischen Wörtern aufreißen.

Kleiner Feinschliff

text-transform: uppercase zeigt Text in Großbuchstaben, ohne das HTML zu ändern. Der Quelltext behält also seine normale Schreibung, und der Stil lässt sich später an einer Stelle ändern. MDN weist darauf hin, dass lange Passagen in Großbuchstaben für manche Menschen schwerer zu lesen sind, auch für Menschen mit Legasthenie. Nutze das also für kurze Labels und gib etwas letter-spacing dazu, etwa 0.08em. text-decoration zeichnet Linien: underline, line-through oder none, um die Unterstreichung eines Links zu entfernen (lass dann ein anderes Zeichen, dass es ein Link ist). Wer mehr Platz braucht, überschreibt deine Abstände vielleicht. WCAG 1.4.12 verlangt, dass Seiten auch bei Zeilenhöhe 1.5, Zeichenabstand 0.12em, Wortabstand 0.16em und Absatzabstand 2em noch funktionieren. Vermeide also Boxen mit fester Höhe, die Text abschneiden würden.