kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Web-Typografie: Perfekte Zeilenlängen im Responsive 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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Die ideale Zeilenlänge für Websites

Im Web werden circa. 45 – 75 Zeichen pro Zeile als ideal bezeichnet. Betrachtet diese Werte aber bitte nicht zu dogmatisch – Google spricht beispielweise von maximal 70 – 80 Zeichen je Zeile. Wichtig ist, dass ihr die Zeilenlänge im Blick behaltet und eingreift, sobald der Text den lesbaren Bereich verlässt. Mit zunehmender Erfahrung entwickelt ihr so ein besseres typografisches Gespür.

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 Prototypen. Der technische Hintergrund ist denkbar einfach. Innerhalb des Textes wird der Abschnitt von 45 – 75 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 elitr, sed diam nonumy e</span>irmod 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 mit Hilfe von Media Queries ein Breakpoint gesetzt und der Text optimiert. Normalerweise wird eine der folgenden Methoden verwendet um die Zeilenlänge zu optimieren:

  • Die Schriftgröße wird verändert
  • Die Abstände um den Text herum werden verändert
  • Der Text wird mehrspaltig
  • 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 meinem Video-Training »Modernes Webdesign«.

Links / Quellen

Optimize text for reading
Google-Developers-Bereiche zum Thema optimierte Lesbarkeit von Web-Texten
A More Modern Scale for Web Typography
Dieser sehr lesenswerte Artikel behandelt ausführlich das Verhältnis von Fließtext-Größen zu Überschrift-Größen
Responsive Paragraphs
Ergänzendes, englischsprachiges Video zum Thema

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

9 Kommentare

  1. Stefan

    Verfasst am 13. August 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.

    • Jonas Hellwig

      Verfasst am 13. August 2014 um 21:53 Uhr.

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

  2. Stefan

    Verfasst am 14. August 2014 um 7:55 Uhr.

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

    Grüße
    Stefan

    • Jonas Hellwig

      Verfasst am 14. August 2014 um 9: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.

      • David Hellmann

        Verfasst am 18. August 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 :)

  3. Dimitri Weimer

    Verfasst am 19. August 2014 um 15:48 Uhr.

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

  4. Jonas Dierhof

    Verfasst am 1. September 2014 um 2: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. (:

  5. Alp

    Verfasst am 9. Oktober 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/

  6. Martin Ritter

    Verfasst am 14. Februar 2016 um 9: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/

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.