Typografie im Web: Schriftgröße, Zeilenlänge, Zeilenabstand

Ein Hilfecenter für ein Buchungstool, wie es in vielen Projekten entsteht: Die Artikel sind gut recherchiert, die Screenshots aktuell, die Struktur ist durchdacht. Trotzdem steigen die Supportanfragen, und in Interviews fällt immer wieder dieselbe Beobachtung: Die Artikel werden überflogen, aber nicht wirklich gelesen. Ein Blick auf den Text zeigt schnell, warum. Er steht in 14 Pixeln über die volle Breite eines großen Monitors, die Zeilen liegen dicht übereinander, und im Blocksatz klaffen Lücken zwischen den Wörtern.

Nichts davon ist ein schwerer Fehler. Zusammen machen diese Details aus einem guten Text einen, den niemand gern liest. Die Lösung liegt in drei Werten, die jedes Interface hat, ob bewusst gewählt oder nicht: Schriftgröße, Zeilenlänge und Zeilenabstand.

Dieser Artikel zeigt, welche Werte sich bewährt haben, woher die oft zitierten Zahlen stammen und wie du sie direkt in Figma und im CSS umsetzt. Das Hilfecenter dient dabei als durchgehendes Beispiel. Am Ende steht eine Checkliste für das nächste Design-Review.

Schriftgröße: 16 Pixel sind die Untergrenze, nicht das Ziel

Der Browser-Standard als Ausgangspunkt

Wenn eine Website keine Schriftgröße festlegt, nutzt der Browser seinen Standardwert. Der liegt laut MDN üblicherweise bei 16 Pixeln. Diese Zahl ist kein Naturgesetz, aber ein guter Anker: Sie ist die Größe, für die Browser, Betriebssysteme und viele Schriften optimiert sind, und die Größe, die Menschen gewohnt sind.

Für Fließtext auf Bildschirmen ist 16 Pixel deshalb die sinnvolle Untergrenze, nicht der Idealwert. Matthew Butterick empfiehlt in seinem Online-Buch „Practical Typography“ für das Web eine Spanne von 15 bis 25 Pixeln. Das britische Design-System GOV.UK setzt Fließtext mit 19 Pixeln, auf großen wie kleinen Bildschirmen. Gerade für Inhalte, die wirklich gelesen werden sollen, also Artikel, Dokumentation oder Hilfetexte, lohnen sich 17 bis 20 Pixel.

Ein Blick auf die Plattformen bestätigt das. Apple setzt in den Human Interface Guidelines den Fließtext unter iOS in der Standardeinstellung auf 17 Punkt mit 22 Punkt Zeilenabstand. Wer Apps gestaltet, landet also ganz natürlich in derselben Größenordnung.

rem statt px: Lass die Einstellungen der Menschen wirken

Viele Menschen stellen in ihrem Browser eine größere Grundschrift ein, etwa weil sie schlecht sehen oder an einem weit entfernten Monitor arbeiten. Diese Einstellung greift aber nur, wenn das CSS sie nicht überschreibt. MDN formuliert es deutlich: Schriftgrößen in px sind nicht barrierefrei, weil Menschen die Größe in manchen Browsern dann nicht mehr ändern können.

Die Lösung ist die Einheit rem. Sie bezieht sich auf die Schriftgröße des Wurzelelements, und die folgt der Einstellung im Browser. Ein 1rem entspricht bei Standardeinstellungen 16 Pixeln, bei einer größeren Grundschrift entsprechend mehr. In der Praxis sieht das so aus:

html { font-size: 100%; }
body { font-size: 1.125rem; } /* 18 px bei Standardeinstellung */

Wichtig ist die erste Zeile. Ein html { font-size: 10px; }, um mit runden Zahlen rechnen zu können, hebelt die Einstellung der Menschen genau an der Wurzel aus. Rechnen lässt sich auch mit dem Standardwert: 18 Pixel sind 1,125 rem, 20 Pixel sind 1,25 rem.

In Figma gibt es kein rem. Dort arbeitest du weiter in Pixeln, legst aber Textstile an, die den späteren rem-Werten entsprechen. Wenn das Team ein Design System pflegt, gehört die Umrechnung in die Dokumentation der Textstile, damit Design und Code dieselbe Sprache sprechen.

Mobil: Eingabefelder nicht unter 16 Pixel

Auf dem Smartphone gibt es einen weiteren, sehr konkreten Grund für 16 Pixel. Safari unter iOS zoomt automatisch in ein Eingabefeld hinein, sobald dessen Schrift kleiner als 16 Pixel ist. Das wirkt hektisch, und nach dem Tippen bleibt die Seite oft vergrößert stehen.

Manche Teams verhindern das, indem sie im Viewport-Meta-Tag das Zoomen begrenzen. Das ist keine gute Idee, weil es Menschen das Vergrößern der Seite erschwert, die genau darauf angewiesen sind. Der saubere Weg: Eingabefelder bekommen mindestens 16 Pixel, also font-size: 1rem.

Fließende Schriftgrößen mit clamp()

Auf einem großen Monitor darf Text etwas größer sein als auf dem Smartphone. Statt mehrerer Breakpoints kannst du die Schriftgröße mit der CSS-Funktion clamp() fließend anpassen. Sie nimmt einen Mindestwert, einen bevorzugten Wert und einen Höchstwert:

body { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); }

Damit liegt die Schrift nie unter 16 und nie über 20 Pixeln und wächst dazwischen mit der Fensterbreite. Eine Falle gibt es dabei: Verwende die Einheit vw nie allein für Schriftgrößen. web.dev weist darauf hin, dass Menschen den Text dann nicht mehr vergrößern können, weil sich vw nur an der Fensterbreite orientiert. Die Kombination mit rem im mittleren Wert hält die Schrift an die Einstellungen der Menschen gebunden.

Gleiche Größe, unterschiedliche Wirkung

Ein Detail, das in Diskussionen über Pixelwerte oft untergeht: 16 Pixel sind nicht gleich 16 Pixel. Die Schriftgröße beschreibt die Höhe des sogenannten Kegels, also des gesamten Raums, den eine Schrift einnimmt. Wie groß die Buchstaben darin wirken, hängt vor allem von der x-Höhe ab, der Höhe der Kleinbuchstaben ohne Ober- und Unterlängen.

Schriften mit großer x-Höhe wirken bei derselben Pixelzahl deutlich größer als Schriften mit kleiner x-Höhe. Wenn du die Schrift wechselst, prüf die Größe deshalb neu, statt einfach den alten Wert zu übernehmen. Am zuverlässigsten geht das, indem du einen echten Absatz in beiden Schriften nebeneinanderstellst und auf dem Zielgerät ansiehst, nicht im gezoomten Figma-Canvas.

Zeilenlänge: 45 bis 75 Zeichen

Woher die Zahlen kommen

Die bekannteste Faustregel stammt aus dem Buchdruck. Robert Bringhurst schreibt in „The Elements of Typographic Style“, dass Zeilen mit 45 bis 75 Zeichen weithin als angenehm gelten und die Zeile mit 66 Zeichen, Leerzeichen eingerechnet, als ideal. Bei mehrspaltigem Satz nennt er 40 bis 50 Zeichen als besseren Durchschnitt.

Für den Bildschirm kommen andere Quellen zu ähnlichen Werten. Das Baymard Institute empfiehlt für Fließtext 50 bis 75 Zeichen pro Zeile und 80 Zeichen als Obergrenze. Butterick nennt etwas großzügiger 45 bis 90 Zeichen. Und die WCAG, die internationalen Richtlinien für barrierefreie Webinhalte, nennen im Erfolgskriterium 1.4.8 auf der höchsten Stufe AAA eine maximale Breite von 80 Zeichen.

Warum ist das so? Bei sehr langen Zeilen muss das Auge am Zeilenende weit zurückspringen und findet den Anfang der nächsten Zeile schwerer. Die WCAG begründen ihre Grenze genau damit: Manche Menschen mit Lese- oder Sehbeeinträchtigungen verlieren bei langen Zeilen leichter die Position im Text. Baymard hat in Tests beobachtet, dass Menschen bei Zeilen mit 100 und mehr Zeichen schneller ermüden und Text eher ganz überspringen. Zu kurze Zeilen sind aber ebenfalls anstrengend, weil das Auge ständig springen muss und der Lesefluss zerfällt.

Im CSS: Breite in ch begrenzen

Eine Eigenschaft für die Zeilenlänge gibt es in CSS nicht. Du begrenzt stattdessen die Breite des Textcontainers. Die passende Einheit dafür ist ch, die Breite der Ziffer Null in der aktuellen Schrift:

.artikel-text { max-width: 66ch; }

Weil ch an der Schriftgröße hängt, wächst die Spalte mit, wenn jemand die Schrift vergrößert. Die Zeilenlänge bleibt in Zeichen gerechnet ungefähr stabil. Eine feste Pixelbreite schafft das nicht, worauf auch web.dev hinweist.

Ein Hinweis zur Genauigkeit: Die Null ist meist breiter als ein durchschnittlicher Buchstabe. 66ch ergeben deshalb in vielen Schriften etwas mehr als 66 Zeichen pro Zeile. Baymard schlägt als Startwert 70ch oder 34em vor und rät, den Wert an die konkrete Schrift anzupassen. Zähl im Zweifel einfach nach: Markiere eine typische Zeile und schau, wie viele Zeichen darin stehen.

In Figma: Die Textbox ist die Spalte

In Figma entspricht der Container der Breite der Textbox. Eine pragmatische Methode: Kopiere einen echten Absatz in die Box, nicht Lorem ipsum, und zieh sie so breit, dass eine typische Zeile etwa 60 bis 75 Zeichen enthält. Notiere die resultierende Breite im Textstil oder als Variable, damit sie bei der Übergabe nicht verloren geht.

Wichtig ist dabei, Layout und Text zu trennen. Eine Artikelseite darf auf einem großen Monitor ruhig 1.200 Pixel breit sein. Der Fließtext darin braucht aber nicht die ganze Breite. Seitenleisten, Inhaltsverzeichnisse oder schlicht Weißraum füllen den Rest.

Auf schmalen Bildschirmen

Auf dem Smartphone ist das Problem meist umgekehrt. Bei 16 bis 18 Pixeln Schrift und üblichen Seitenrändern passen oft nur 35 bis 45 Zeichen in eine Zeile. Das ist in Ordnung und lässt sich kaum vermeiden. Die Seitenränder solltest du deshalb nicht zu großzügig wählen, jeder Millimeter Textbreite zählt hier.

Gerade im Deutschen mit seinen langen Komposita hilft auf schmalen Spalten die automatische Silbentrennung mit hyphens: auto. Sie funktioniert nur, wenn die Sprache im HTML korrekt angegeben ist, also etwa <html lang="de">. Laut MDN trennen Browser nur dann, wenn dieses Attribut vorhanden ist und ein passendes Trennwörterbuch zur Verfügung steht.

Kein Blocksatz

Blocksatz, also Text, der links und rechts bündig abschließt, sieht in Layouts ordentlich aus. Auf Bildschirmen fehlt aber meist die feine Silbentrennung und Wortabstandssteuerung, die im Buchdruck für ein gleichmäßiges Bild sorgt. Das Ergebnis sind unregelmäßige Lücken zwischen den Wörtern, die sich bei schmalen Spalten zu sichtbaren Schneisen durch den Absatz verbinden können. Auch die WCAG nennen in Kriterium 1.4.8 Text ohne Blocksatz als Ziel. Für Fließtext im Interface ist linksbündiger Flattersatz die sichere Wahl.

Zeilenabstand: 1,5 als Startwert

Warum Text Luft braucht

Der Zeilenabstand, im CSS line-height, bestimmt, wie viel vertikaler Raum eine Zeile einnimmt. Ist er zu eng, rutscht das Auge beim Zeilenwechsel leicht in die falsche Zeile. Ist er zu weit, zerfällt der Absatz in einzelne Streifen und wirkt nicht mehr wie ein zusammenhängender Text.

Für Fließtext ist 1,5 ein guter Startwert, also das Anderthalbfache der Schriftgröße. MDN empfiehlt diesen Wert als Minimum für Absätze, weil er Menschen mit Sehbeeinträchtigungen und mit Leseschwierigkeiten wie Legasthenie hilft. Die WCAG nennen den gleichen Wert in Kriterium 1.4.8. Butterick setzt die Spanne etwas niedriger an, bei 120 bis 145 Prozent der Schriftgröße. Beide Empfehlungen widersprechen sich weniger, als es scheint: Wie viel Abstand nötig ist, hängt von Schrift, Größe und Zeilenlänge ab.

Als Faustregel gilt: Je länger die Zeile, desto mehr Zeilenabstand braucht sie, damit das Auge den Weg zurück findet. web.dev beschreibt genau diesen Zusammenhang. Ein Absatz mit 70 Zeichen pro Zeile verträgt eher 1,6, eine schmale Spalte auf dem Smartphone kommt oft mit 1,4 bis 1,5 gut aus.

Im CSS: ohne Einheit

Für line-height empfehlen sowohl MDN als auch web.dev Werte ohne Einheit:

body { line-height: 1.5; }

Der Grund liegt in der Vererbung. Ein Wert wie 1.5em oder 150% wird einmal berechnet und als fester Pixelwert an alle Kindelemente weitergegeben. Eine Überschrift mit 40 Pixeln erbt dann vielleicht einen Zeilenabstand von 24 Pixeln, und ihre Zeilen überlappen sich. Ein Wert ohne Einheit wird dagegen für jedes Element neu mit dessen eigener Schriftgröße multipliziert.

In Figma: Prozent statt Auto

Figma kennt für den Zeilenabstand drei Varianten: einen festen Pixelwert, einen Prozentwert und „Auto“. Auto übernimmt den Standard, den die Schriftdatei mitbringt, und der unterscheidet sich von Schrift zu Schrift. Für Textstile, die später ins CSS wandern, ist ein Prozentwert die beste Wahl: 150 % in Figma entsprechen line-height: 1.5 im Code. Pixelwerte sind dann sinnvoll, wenn das Team bewusst mit einem Grundraster arbeitet, etwa in Schritten von 4 oder 8 Pixeln.

Überschriften brauchen weniger

Was für Fließtext gut ist, wirkt bei großen Überschriften zu luftig. Eine zweizeilige Überschrift mit 40 Pixeln und einem Zeilenabstand von 1,5 fällt optisch auseinander. Für Überschriften haben sich Werte zwischen etwa 1,1 und 1,3 bewährt, je größer die Schrift, desto enger. Prüf das immer an einer Überschrift, die tatsächlich umbricht, denn einzeilig sieht jeder Zeilenabstand gut aus.

Absatzabstand nicht vergessen

Zwischen zwei Absätzen sollte mehr Raum sein als zwischen zwei Zeilen, sonst verschwimmen die Absätze zu einem Block. Die WCAG nennen in Kriterium 1.4.8 einen Absatzabstand von mindestens dem 1,5-Fachen des Zeilenabstands. Im CSS reicht dafür oft ein Abstand von etwa einer Zeilenhöhe nach jedem Absatz, zum Beispiel p + p { margin-top: 1.5em; } bei einem Zeilenabstand von 1,5.

Barrierefreiheit: Die Werte müssen sich ändern lassen

Gute Standardwerte sind die halbe Miete. Die andere Hälfte ist, dass Menschen sie an ihre Bedürfnisse anpassen können. Für Barrierefreiheit sind dabei zwei Kriterien der Stufe AA entscheidend, die in der Praxis oft übersehen werden.

Text vergrößern (Kriterium 1.4.4): Text muss sich ohne Hilfstechnologie auf 200 Prozent vergrößern lassen, ohne dass Inhalte oder Funktionen verloren gehen. Mit rem-Werten und Containern ohne feste Höhe ist das meist ohne Zusatzaufwand erfüllt. Probleme machen Textboxen mit fester Höhe, abgeschnittene Buttons und Navigationen, die bei größerer Schrift überlaufen.

Textabstände (Kriterium 1.4.12): Wenn jemand per Browser-Erweiterung oder eigenem Stylesheet den Zeilenabstand auf das 1,5-Fache, den Absatzabstand auf das 2-Fache, den Buchstabenabstand auf das 0,12-Fache und den Wortabstand auf das 0,16-Fache der Schriftgröße setzt, darf nichts abgeschnitten werden oder sich überlappen. Das betrifft vor allem Komponenten mit festen Maßen, etwa Karten, Tabs oder Badges.

Ein schneller Test: Vergrößer die Seite im Browser auf 200 Prozent, stell die Grundschrift in den Browser-Einstellungen auf „sehr groß“ und klick dich durch die wichtigsten Seiten. Was dann bricht, ist ein Kandidat für das nächste Ticket. Dazu gehört natürlich auch ausreichender Kontrast zwischen Text und Hintergrund. Was genau das Kontrastverhältnis misst und welche Werte gelten, erklärt das Glossar.

Vorher und nachher: Das Hilfecenter

Zurück zum Hilfecenter vom Anfang. So sahen die Textwerte vor der Überarbeitung aus:

Schriftgröße: 14 px, fest in Pixeln, auch in der Suche und den Eingabefeldern
Zeilenlänge: volle Containerbreite von 1.100 px, auf großen Monitoren grob geschätzt etwa 150 Zeichen pro Zeile
Zeilenabstand: „Auto“ in Figma, im Code etwa 1,2
Ausrichtung: Blocksatz
Absätze: 8 px Abstand

Nach der Überarbeitung:

Schriftgröße: clamp(1rem, 0.9rem + 0.5vw, 1.125rem), also 16 bis 18 px je nach Fensterbreite, Eingabefelder durchgehend 1rem
Zeilenlänge: max-width: 68ch für den Artikeltext, die frei gewordene Fläche nimmt ein Inhaltsverzeichnis auf
Zeilenabstand: 1,6 im Fließtext, 1,2 in Überschriften, in Figma als Prozentwerte in den Textstilen hinterlegt
Ausrichtung: linksbündig, mit hyphens: auto für schmale Bildschirme
Absätze: 1,5em Abstand

An Inhalt und Struktur hat sich nichts geändert. Der Text ist trotzdem ein anderer, weil er sich jetzt lesen lässt, statt nur überflogen zu werden. Ob das auch die Supportanfragen senkt, zeigt sich erst im Betrieb. Ein kurzer Test mit fünf Menschen, die eine konkrete Frage mit Hilfe des Artikels beantworten sollen, gibt aber schon vorher ein gutes Gefühl dafür.

Ein Nebeneffekt, der oft unterschätzt wird: Lesbare Typografie senkt die kognitive Last. Wer nicht mit der Form des Textes kämpfen muss, hat mehr Aufmerksamkeit für seinen Inhalt.

Fazit

Gute Bildschirmtypografie braucht keine besondere Schrift und kein aufwendiges Layout. Sie braucht drei bewusst gewählte Werte: eine Schriftgröße ab 16 Pixeln in rem, eine Zeilenlänge zwischen etwa 45 und 75 Zeichen, begrenzt mit ch, und einen Zeilenabstand um 1,5 ohne Einheit. Dazu linksbündiger Text, genug Abstand zwischen Absätzen und Werte, die Menschen an ihre Bedürfnisse anpassen können.

Keine dieser Zahlen ist ein Gesetz. Sie sind gut begründete Startwerte, die du an deine Schrift, deine Inhalte und deine Zielgeräte anpasst. Am Ende entscheidet nicht der Wert im Inspector, sondern ob ein echter Absatz auf einem echten Gerät angenehm zu lesen ist.

Checkliste

Fließtext ist mindestens 16 px groß, für längere Texte eher 17 bis 20 px.
Schriftgrößen stehen im CSS in rem, das Wurzelelement überschreibt die Browser-Einstellung nicht.
Eingabefelder haben mindestens 16 px, Zoomen ist nicht per Viewport-Meta-Tag gesperrt.
Fließende Schriftgrößen kombinieren vw immer mit rem, etwa in clamp().
Textcontainer sind auf etwa 60 bis 75 Zeichen begrenzt, zum Beispiel mit max-width in ch.
Fließtext ist linksbündig, nicht im Blocksatz, mit Silbentrennung und korrektem lang-Attribut.
Zeilenabstand im Fließtext liegt um 1,5, in Überschriften zwischen etwa 1,1 und 1,3, im CSS ohne Einheit.
In Figma sind Textstile mit Prozentwerten statt „Auto“ angelegt.
Absätze haben sichtbar mehr Abstand als Zeilen.
Die Seite funktioniert bei 200 Prozent Zoom und mit vergrößerten Textabständen.

Typografie für Bildschirme: Schriftgröße, Zeilenlänge und Zeilenabstand