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

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:

@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«.

YouTube

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

Video laden

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 11 Kommentare

  1. Claudia Bruckschwaiger
    schrieb am 09.05.2023 um 15:28 Uhr:

    Hallo Jonas,
    der Post ist ja schon relativ alt.. aber dennoch hoffe ich, dass es ankommt. Mir ist aufgefallen, dass der Text relativ klein wird. Besonders auf mobil haben wir bei barrierefreiheit eine Schriftgröße von min. 16px bzw. mindestens 12px als caption. Geht sich das bei der Verkleinerung der Texte aus? Ich denke es ist notwendig, dass man das unbedingt berücksichtigt.

    Antworten
    • Jonas Hellwig
      schrieb am 09.05.2023 um 16:05 Uhr:

      Hallo Claudia, vielen Dank für deinen Kommentar. Der Beitrag ist nach wie vor aktuell. Es geht hier in erster Linie darum, die Zeilenlänge im Blick zu behalten. Das dient der Lesbarkeit und ist auch ein Success Criterion der WCAG Dazu gibt es verschiedene Herangehensweisen. Eine davon ist die Veränderung der Schriftgröße, die man heute meist mit clamp() definieren würde. Damit legst du dann einen Unterwert (z.B. 12 oder 16px) fest, sowie einen Maximalwert.
      Mit dieser Herangehensweise kann die Schrift nicht kleiner werden als von dir definiert. Die minimale Schriftgröße von 12 bzw. 16 Pixeln ist übrigens kein offizielles Kriterium der Barrierefreiheit, sondern nur ein – sinnvoller – Richtwert.

      Antworten
  2. Martin Ritter
    schrieb am 14.02.2016 um 09:19 Uhr:

    Danke Jonas für die guten Tipps zu einem Thema, dass man sonst nicht unbedingt „auf der Uhr“ hat. Noch wichtiger wird das Thema der Textlängen in Kombination mit internationalen Websites und entsprechend eh schon unterschiedlich Sprachen und Textlängen. Ich hatte dazu auch mal einen Post erstellt: https://www.webneo.de/blog/interkulturelles-webdesign/

    Antworten
  3. Alp
    schrieb am 09.10.2014 um 15:38 Uhr:

    Guter Hinweis. Bei der Entwicklung meines Blogs bin ich ähnlich vorgegangen: http://77elements.com/blog/responsive-lesbar-ded/

    Zur Markierung der optimalen Zeilenlänge habe ich das Bookmarklet von Chris Coyier benutzt: http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/

    Antworten
  4. Jonas Dierhof
    schrieb am 01.09.2014 um 02:08 Uhr:

    Super, danke für die Tipps zum Thema responsive Design. (: Werde ich in Zukunft versuchen so zu verwenden. Ich bin bisher leider nicht nicht so erfahren beim responsive Webdesign aber mit solchen Beitragen fällt der Anfang schon deutlich leichter. (:

    Antworten
  5. Dimitri Weimer
    schrieb am 19.08.2014 um 15:48 Uhr:

    Ein wirklich sehr guter Tipp. Danke. Das muss ich auf meinem Blog noch umsetzen.

    Antworten
  6. Stefan
    schrieb am 14.08.2014 um 07:55 Uhr:

    Nochmal ein Stefan hier☺.
    Gibst du auch einen Zeilenabstand ein und veränderst diesen?

    Grüße
    Stefan

    Antworten
    • Jonas Hellwig
      schrieb am 14.08.2014 um 09:21 Uhr:

      Hallo Stefan, in diesem Beispiel geht es um die Zeilenlängen, aber auch den Zeilenabstand würde ich über die Breakpoints leicht erhöhen und verringern. Allerdings wohl eher nach Augenmaß, je nach gewählter Schriftart.

      Antworten
      • David Hellmann
        schrieb am 18.08.2014 um 14:28 Uhr:

        Ich versuch mir ja gerade anzugewöhnen den Zeilenabstand ohne Einheit zu vergeben somit passt er sich dynamisch mit an. Also im body einfach: line-height: 1.5; fertig.

        Von EM’s halte ich mal gar nichts. Bei Fonts mag es zwar noch OK sein aber wenn ich sehe das die Leute Paddings, Margins und Größen etc. mit EM’s angeben, nein danke :)

  7. Stefan
    schrieb am 13.08.2014 um 21:04 Uhr:

    Vielen Dank für den guten Tipp! Das werde ich gleich mal ausprobieren.

    Du kannst übrigens in Google Chrome den Browser so schmal ziehen wie du willst, bewege dafür das Layout des Chrome-Inspektors einfach nach rechts (anstatt horizontal unten). Oder du wählst im Tab „Emulation“ (ESC drücken) ein beliebiges mobiles Gerät aus und siehst genau die korrekten Ausmaße.

    Antworten
    • Jonas Hellwig
      schrieb am 13.08.2014 um 21:53 Uhr:

      Hallo Stefan, vielen Dank für die Ergänzung!

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →