Web-Typografie: Perfekte Zeilenlängen im Responsive Web Design

Von Jonas

Die Lesbarkeit von Texten wird u.a. von der Zeilenlänge beeinflusst. Wenn ihr die ideale Zeilenlänge markiert, sehr ihr während der Entwicklung wenn und wo Lesbarkeit verloren geht.

Aktualisiert am 16. März 2023 Lesezeit ca. 3 Min. 9 Kommentare

Das Layout einer Website hat u.a. die Aufgabe, Informationen bestmöglich zugänglich zu machen. Insbesondere die Web-Typografie spielt dabei eine wichtige Rolle. Damit ein Text gut lesbar ist, sollten die Zeilen eine optimale Länge haben. Im Responsive Design muss dazu meist die Schriftgröße über die verschiedenen Displaygrößen hinweg verändert werden, damit die Zeilen auf allen Geräten im optimalen Bereich liegen. Auf Smartphones ist Text daher i.d.R. kleiner als auf großen Monitoren.

Die ideale Zeilenlänge für Websites

Im Web werden circa. 45 – 80 Zeichen pro Zeile als ideal bezeichnet. Auch die Anforderungen hinsichtlich der Barrierefreiheit legen maximal 80 Zeichen pro Zeile fest.

Zeilenumbrüche markieren

Ein beliebter Trick ist das Hervorheben der optimalen Zeilenlänge. Oft geschieht dies zu einem sehr frühen Zeitpunkt des Projekts, also beispielsweise im Prototyp. Der technische Hintergrund ist denkbar einfach. Innerhalb des Textes wird der Abschnitt von 45 – 80 Zeichen mit einem <span>-Element markiert. Über CSS wird das Element eingefärbt, damit es sichtbar ist. Anschließend müsst ihr nur darauf achten, dass die Zeilenumbrüche immer innerhalb der Markierung liegen. Somit ist sichergestellt, dass die Zeilenlänge sich im lesbaren Bereich bewegt.

Lorem ipsum dolor sit amet, consetetur sadip<span>scing elasd adsasditr, sed diam nonumy e</span> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

span {
  background:lime;
}

Breakpoints für die Schriftgröße definieren

Über die verschiedenen Displaygrößen hinweg ändern sich die Zeilenlängen. Der Text bricht anders um. Sobald ihr merkt, dass die Markierung in einem bestimmten Viewport entweder in eine oder in drei Zeilen rutscht, hat der Text den perfekt lesbaren Bereich verlassen. In diesem Fall wird der Text optimiert. Normalerweise wird eine der folgenden Methoden verwendet um die Zeilenlänge zu optimieren:

• Die Schriftgröße wird verändert, z.B. proportional skaliert
• Die Abstände um den Text herum werden verändert
• Der Text wird mehrspaltig, z.B. mit CSS multiple columns
• Das Layout wird mehrspaltig

@media screen and (min-width: 31.25em) {
  body {
    font-size:1.1em;	
  }	
}

@media screen and (min-width: 40.625em) {
  body {
    font-size:1.2em;	
  }	
}

Das folgende Beispiel zeigt die Vorgehensweise mit Hilfe der Schriftgrößenanpassung.

Beispieldatei öffnen

Fließtexte und Überschriften in unterschiedlichem Verhältnis anpassen

Das vorausgegangene Beispiel verändert alle Schriften in gleichem Verhältnis. Durch weniger Freiraum auf kleinen Displaygrößen wirkt die Überschrift dort jedoch zu klobig. Bei viel Platz wirkt sie zu klein.
Ein bestmögliches Ergebnis erhaltet ihr, wenn die Überschriften separat angepasst werden. Auf kleinen Displays sollte das Verhältnis von Überschrift zu Fließtext geringer sein als auf großen Displays. Die folgende Demo zeigt eine optimierte Ansicht.

Beispieldatei öffnen

Den Betrachtungsabstand beachten

An der in diesem Beitrag beschriebenen Technik wird häufig kritisiert, dass der Text auf Smartphones zu klein angezeigt wird. Das ist nicht der Fall. Achtet unbedingt darauf eine realistische Test-Situation herzustellen. Wenn ihr einen Website-Prototypen entwickelt und diesen Prototypen auf einem echten Gerät betrachtet, werdet ihr merken, dass der Text gut lesbar ist. Das hängt mit dem unterschiedlichen Betrachtungsabstand der verschiedenen Geräteklassen zusammen. Ein Smartphone halten wir näher vor die Augen, daher darf der Text auch kleiner sein. Schwierig wird es, wenn die Smartphone-Ansicht am Computer gelayoutet wird. In diesem Fall passen Layoutversion und Betrachtungsabstand nicht zusammen. Ein möglichst früher Test des Layouts auf dem echten Gerät ist daher fast unverzichtbar.

Video-Tutorial zu diesem Beitrag

Das folgende Video zu diesem Thema geht noch etwas mehr in die Tiefe. Das Video ist ein Auszug aus dem Video-Training »Modernes Webdesign«.

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing