Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

YouTube

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

Video laden

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-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.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 9 Kommentare

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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 (Autor)
      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 :)

  6. 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 (Autor)
      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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: