Kuratierte Linksammlung für Webdesigner und -entwickler.

Typografie im Responsive Webdesign #3: Responsiver Body-Text

Im vorigen Teil dieser Artikelserie über Typografie im Responsive Webdesign haben wir verschiedene Möglichkeiten erkundet, flüssige und reaktionsfähige Überschriften für Webseiten umzusetzen. Heute stellen wir uns der letzten Herausforderung, zunehmender Komplexität mobiler Geräte gerecht zu werden. Dazu betrachten wir bewährte Methoden, wie zum Beispiel em– und rem-Angaben bei der Zuweisung von Media Queries für den Body-Text zu verwenden, anstatt diese mit Pixelwerten für den zu definieren.

Sprungmarken:

Anzeige
  1. Mit em und Media Queries
  2. Mit rem und Media Queries
  3. Mit CSS Viewport-Einheiten
  4. Mit Hilfe eines jQuery-Plugins
  5. Mit Hilfe von Elementabfragen

Reaktionsfähiger Body-Text

Wenn es darum geht, den Body Text reaktionsfähig zu gestalten, gibt es einige wichtige Hinweise zu beachten: Du solltest daran denken, dass sich nicht nur die Textgröße ändert, um mit einer idealen Zeichenanzahl in seinem Container zu passen und dabei gut lesbar bleibt, sondern auch, flexible Zeilenabstände einzuhalten, sodass Deine Wörter auf hochauflösenden Bildschirmen stets gut skaliert und die Schriftgröße vom Anwender einfach geändert werden kann.

Um diese Punkte zielführend umzusetzen, definiere proportionale und relative Größeneinheiten für die Schriftgröße und Zeilenhöhe.

1. Mit em und Media Queries

Ethan Marcotte, der Mann hinter der „Responsive Webdesign“-Idee, erklärt in einem ausgezeichneten Artikel, warum em für das Definieren der Schriftgröße besser geeignet ist als Pixelangaben.

Bevor ich mit Dir auf die Vorteile von dem Einsatz von em eingehe, möchte ich Dir zeigen, warum der Einsatz von Pixelangaben für die Textgrößenzuweisung nicht die optimale Lösung ist:

Pixel bieten zwar ein hohes Maß an Kontrolle über Schriftgrößen, aber sie haben einen bekannten Nachteil: Die Schriftgröße skaliert nicht, sobald Du diese im Internet Explorer änderst. Es gibt keine Möglichkeit für Anwender, die Schriftgröße auf Deiner Webseite zu erhöhen, wenn Du Pixelangaben verwendest. Zwar unterstützen viele Desktop-Browser, darunter neuere Versionen des IE, irgendeine Form von Seiten-Zoom, nur leider vergrößert es die Größe Deines gesamten Designs, einschließlich der Schrift. Mit em als Schriftgrößenzuweisung dagegen, befreien wir uns von diesem Problem.

1.1 Die flexible Schriftgröße

Ich empfehle, Prozentangaben zu verwenden, um die Schriftgröße im body einzustellen. Proportional zu diesem Wert definierst Du dann die Schriftgrößen für den Inhalt. Die Zuweisung Deiner body-Schriftgröße in Prozent bietet Dir schließlich eine flexible Grundlage, auf der Du mit relativen Einheiten wie em beliebige Anpassungen der Textgröße vornehmen kannst.

Die Einstellung der body-Schriftgröße von 100% setzt die Textgröße auf den Standardwert des Browsers, welcher in der Regel 16px ist.

Eine Vielzahl von Webdesignern neigt dazu, einen body-Ausgangswert von 62.5% einzusetzen. Dieser Wert entspricht 10px Schriftgröße im body, was es einfacher macht, andere Schriftgrößen im Bezug des Ausgangswertes zu definieren. Von nun an ist es einfach in Pixel zu denken, wobei die Werte stets in em angegeben werden: 1em sind 10 Pixel, 1.6em sind 16 Pixel, usw.

Lesetipps:

  • Wenn Du mehr über die 62.5%-Technik nachlesen möchtest, empfehle ich einen Artikel von Richard Rutter.
  • R. Rutter hat außerdem einen weiteren Artikel geschrieben, worin er empfiehlt, 100% als Grundwert zu definieren, da dieser eine bessere Kross-Browser-Kompatibilität gewährleistet.

Somit können wir durch em und Media Queries responsive Schriften umsetzen. Das einfachste Beispiel würde wie folgt aussehen:

body {
    font-size:100%; /* Flexibler Ausgangswert */
}

p {
    font-size: 1.25em; /* 1.25em im Verhältnis zu eines 16px body-Ausgangswertes ergibt 20px Schriftgröße */
}

Um die Schriftgröße für kleinere Bildschirme mit Media Queries zu ändern, genügt es fortan, die Größe der body-Schriftgröße anzupassen. Auf diese Weise verändert sich die Textgröße der gesamten Seite proportional zum body-Schriftwert. Dazu brauchst Du lediglich eine Zeile im CSS anzupassen:

@media screen and (max-width: 40em) {
    body {
        font-size:90%;
    }
}

@media screen and (max-width: 30em) {
    body {
        font-size:80%;
    }
}

Damit es uns gelingt, reaktionsfähige Schriftgrößen umzusetzen, erzeugen wir nur noch proportionalen Zeilenabstand für unsere body-Inhalte.

1.2 Der proportionale Zeilenabstand

Genauso, wie wir sicherstellen müssen, dass sich unsere Textgröße beim Ausgeben verschiedender Bildgrößen verändert, müssen wir darauf achten, dass sich ebenfalls der Raum zwischen den Zeilen in der Größe verändert und proportional an die Schriftgröße anpasst.

Zeilenabstände lassen sich ebenso in em definieren. Verwendete man Pixelangaben für den Zeilenabstand und der Leser wollte in die Webseite hineinzoomen, vergrößerte sich die Schriftgröße, der Abstand zwischen den Zeilen hingegen würde sich den Pixelangaben entsprechend orientieren. Dein Text könnte dadurch unleserlich wirken.

Indem wir den Zeilenabstand relativen Einheiten zuweisen, gewährleisten wir, dass der Zeilenabstand entsprechend zur Schriftgröße eine optimale Lesbarkeit ermöglicht.

Ein geeigneter Wert für einen gut lesbaren Zeilenabstand ist 1.4em für den Haupttext und 1.2em für Überschriften. Je nachdem, welche Schriftart Du verwendest, können die Werte leicht variieren.

Um also proportionale Zeilenabstände zu vergeben, nutzen wir folgenden CSS-Code:

body {
    font-size: 100%; /* Flexibler Ausgangswert */
}

p {
    font-size: 1.25em;
    line-height: 1.4em;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2em;
}

Einen noch bessereren und flexibleren Weg, um die Zeilenabstände proportional einzustellen, bevorzugt Eric Meyer, indem er die Zeilenabstände ohne Einheit definiert.

2. Mit rem und Media Queries

rem ist, genau wie em, eine relative CSS Einheit (w3.org/TR/css3-values/#rem-unit). Ihren Unterschied zeigt das „r“; es steht für „root em“: Die Schriftgröße richtet sich mit rem relativ zur Schriftgröße des Root-Elements, dem html, anstelle des body aus.

Anstelle des body-Elements setzt Du bei rem die Schriftgröße auf 100% des html-Elements. Dann kannst Du die Schriftgrößen Deines Textes über Media Queries anpassen, indem Du den Wert über das html-Elemet änderst, ähnlich wie wir es vorhin mit em beim body-Element gemacht haben.

Aber, wenn rem und em nun so ähnlich sind, warum sollten wir dann rem nutzen? Was für einen Vorteil hat rem gegenüber em?

Das Tolle beim Einsatz von rem ist, dass es die Schriftgröße des gesamten Inhaltes in Zusammenhang des Root-Elements definiert, nicht im Zusammenhang des Containers.

Beispielsweise können schlicht verschachtelte Listen mit em ziemlich chaotisch und CSS-lastig werden.

Szenario: Nehmen wir mal an, Du entscheidest Dich, die Listenelemente mit font-size: 1.1em zu definieren. Hat die Liste nun verschachtelte Listen, werden die Child-Listen kaskadieren und die Schriften „wachsen“. Vermutlich möchtest Du das nicht. Du kannst es mit li li { font-size: 1em; } fixen, jedoch fängt es hier an, unschön zu werden. Das ist der Punkt, an dem rem ins Spiel kommt.

Einen Nachteil hat der Einsatz von rem dennoch – es bietet eine beschränkte Browser-Unterstützung (IE 9+).

Lesetipp:
Chris Coyier schreibt in seinem Blogartikel, warum er den Einsatz von em bevorzugt.

Obwohl die Browser-Unterstützung für rem sich allmählich durchsetzt, solltest Du dennoch einen Pixel-Fallback für ältere Browser anbieten.

Falls Du einen Präprozessor wie Sass verwendest, kannst Du auf Mixins zurückgreifen, die alle Fallback-Berechnungen für Dich vornimmt. Es gibt mehrere Mixins für rem, wodurch Du Deine bevorzugte Methode wählen kannst.

3. Mit CSS Viewport-Einheiten

Außerdem wird der body-Text auch durch CSS Viewport-Einheiten reaktionsfähig. Lies meinen vorigen Artikel. Darin begründe ich deren Verwendung und erkläre die Umsetzung.

CSS Viewport-Einheiten zu verwenden hat einen offensichtlichen Vorteil gegenüber den vorigen Methoden, bei denen em und rem für 100% flüssigen Text genutzt wurden. Um die Schriftgröße zu definieren, muss nicht mehr auf eine Reihe von Media-Abfragen zurückgegriffen werden – die Größenänderungen werden auf Grundlage der Containergröße vorgenommen, egal wie und wann die Breite sich ändert.

Ein Beispiel für die Verwendung von Viewport-Einheiten zur Erstellung von flüssigem Text siehst Du im nächsten Abschnitt.

4. Mit Hilfe eines jQuery-Plugins

Zeilen, die zu lang oder zu kurz sind, führen zu einem schlechten Leseerlebnis. Um das auszuschließen, definieren wir eine Wortanzahl pro Zeile, die stets gut lesbar ist. Dies verdeutlichen Dir zwei Beispiele:

  1. Wenn die Textzeilen zu lang sind, ist das Auge des Besuchers sehr damit beschäftigt, den Schwerpunkt des Textes zu fokussieren. Gerade bei größeren Textblöcken ist es schwierig, das Lesen in der korrekten Zeile fortzuführen. Ermögliche dem Leser ein Gefühl zu erhalten, wo die Zeile beginnt und wo sie endet.
  2. Sind Zeilen hingegen zu kurz, werden diese nicht vollständig gelesen, weil der Fokus des Lesers vorzeitig zum Anfang der nächsten Zeile gelenkt und der Leserhythmus unterbrochen wird.


Eine ideale Zeilenlänge erlaubt Lesern, den Text bis zum Ende einer Zeile und den Anfang der Nächsten Zeile auf natürliche und einfache Weise zu erfassen. Die optimale Zeilenlänge für den Textkörper beträgt etwa 50 bis 60 Zeichen, inklusive Leerzeichen. Einige sagen, dass sogar 75 bis 80 Zeichen pro Zeile akzeptabel sind.

Wenn sich die Schriftgröße auf verschiedene Geräte einstellt, sollten wir bedenken, dass größere Schriften auf kleinen Bildschirmen ziemlich kurze Zeilen erzeugen. Kleinere Schriften auf großen Monitoren führen dagegen zu einer Länge, die die empfohlene Anzahl der Wörter für optimale Lesbarkeit übersteigt. Also riskieren wir in beiden Szenarien eine schlechte Lesbarkeit und damit eine schlechte Benutzererfahrung.

Daher ist es am besten, einen Weg zu finden, die Schriftgröße auf kleinen Bildschirmen zu verringern und auf größeren Formaten zu erhöhen. In Folge dessen wird die Zeichenanzahl pro Zeile zugunsten der Lesbarkeit auf großen Bildschirmen ab- und auf kleinen zunehmen.

Wenn wir die Zeichenlänge pro Zeile durch Schriftgrößenänderungen automatisch (ohne manuelle Änderungen) in den Media Queries in Kombination mit relativen Zeilenabständen zuweisen (also 100% flüssigen body-Text), haben wir gute Bedingungen für eine großartige Lesererfahrung geschaffen.

CSS Viewport-Einheiten können uns also dabei helfen, Texte so zu gestalten, dass sie sich jedem Bildschirm optimal anpassen. Das Problem jedoch bleibt: je kleiner der Bildschirm wird, desto kleiner wird auch die Schriftgröße, und am Ende könnte die Schrift auf sehr kleinen Displays unleserlich wirken. Umgekehrt würde die Schrift bei immer größeren Monitoren immer größer werden. Es gibt also nur eine Möglichkeit, eine minimale oder maximale Grenze für die Schriftgröße zu setzen, nämlich die Verwendung von Media-Queries.

Lass uns uns einen Blick auf ein visuelles Beispiel werfen, das unter Verwendung von CSS Viewport-Einheiten flüssige Texte erstellt:

Responsiver body-Text mit CSS Viewport-Einheiten.

Wie Du siehst, wird die Schrift immer kleiner, je kleiner der Bildschirm bzw. das Browserfenster skaliert wird. Sobald eine Bildschirmgröße von 480px Breite erreicht wird, wirst Du sehen, dass die Schrift kaum lesbar ist. Also benötigen wir einige Medien-Anfragen, um die Schriftgröße auf kleinen Bildschirmen anzupassen.

Folgende CSS-Anweisungen habe ich vorgenommen und kommentiert, sodass Du sehen kannst, dass die Schrift immer weiter in Größe abnimmt bis es unleserlich wird. Befreie die auskommentierten Media-Queries, wenn Du die Schrift auf kleineren Bildschirmen für eine bessere Lesbarkeit anpassen möchtest:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
    background-color: #3498db;
    color:white;
    font-family: 'Open Sans', sans-serif;
    padding:50px 30px;
    font-size:100%;
}

p {
    font-size:2.5vw;
}

/* Befreie die auskommentierten Media-Queries, wenn Du die Schrift auf kleineren Bildschirmen für eine bessere Lesbarkeit anpassen möchtest.*/

/*
@media screen and (max-width:600px) {
    p {
        font-size: 3vw;
    }
}

@media screen and (max-width:480px) {
    p {
        font-size: 4vw;
    }
}
*/

Und zu guter Letzt lösen wir noch das Problem mit der Browser-Unterstützung, um wirklich flüssige Texte in allen Browsern zu erreichen.

4.1 FlowType.JS Plugin

FlowType.JS ist ein Plugin, das flüssige Textgestaltung unterstützt. Dies erreicht es mittels Anpassung der Schriftgröße und Zeilenhöhe, welche sich auf die Breite eines bestimmten Elements beziehen, wie durch Viewport-Einheiten.

FlowTypeJS hat jedoch ein paar Vorteile gegenüber der Verwendung von CSS Viewport-Einheiten:

  • Cross-Browser-Unterstützung.
  • Optionen zum Festlegen minimaler und maximaler Schriftgrößen.

Responsiver Body Text mit FlowType.JS Plugin

Die Verwendung von FlowType.JS ist unkompliziert:

  • Verlinke innerhalb Deiner Webseite zum Plugin und füge einige Standardschriftstile für Nutzer ein, die JavaScript nicht aktiviert haben.
  • Spreche nun das Plugin an, für jedes Text-Element, das Du durch das FlowType.JS-Plugin flüssig gestalten möchtest.
  • Über die verfügbaren Plugin-Optionen kannst Du zum Schluss noch Einstellungen vornehmen.
FlowType.JS Anleitung:
Eine ausführliche sowie leicht nachvollziehbare Anleitung kannst Du auf der Homepage des Plugins nachlesen.

Anstelle der Verwendung von Viewport-Einheiten bezieht sich folgendes Beispiel auf den Einsatz des FlowType-Plugins, worin Spezifikationen für die maximale und minimale Schriftgröße vorgenommen wurden.

Responsiver body-Text mit FlowType.JS-Plugin (Demo-URL)

Du siehst also, wie einfach es ist, den body-Text flüssig zu gestalten, ohne sich um weitere extra Regeln für Media-Queries kümmern zu müssen.

5. Mit Hilfe von Elementabfragen (Element Queries)

Elementabfragen ähneln Medienabfragen: wenn eine Bedingung erfüllt ist wird ein wenig CSS angewendet. Anstelle von bildschirmbasierten Abfragen werden hierbei elementbezogene Abfragen zugewiesen (wie beispielsweise min-width, max-width, min-height und max-height). Das Problem dabei ist, dass Elementabfragen noch gar nicht in CSS existieren.

Elementabfragen:
Das Konzept der Elementabfragen wird in einem Artikel von Ian Storm Taylor genauer beschrieben.

Eine Element-Abfrage würde etwa wie folgt aussehen:

.main-nav (max-width: 30em) {
    font-size: 0.75em;
}

Element-Abfragen sind sehr nützlich, da sie uns erlauben, reaktionsfähige CSS-Stile für Elemente zu vergeben, unabhängig von der Umgebung oder dem Layout, in dem diese Elemente untergebracht sind.

Durch die Definierung von modularen Stilen für Elemente können wir diese überall wiederverwenden, sodass Du einfach in der Lage bist, das Layout anzupassen, in dem die Elemente verwendet werden.

Angenommen, Du hast eine Navigation und möchtest, dass sie sich unabhängig vom Header reaktionsfähig verhält: Anstatt die Stile entsprechend der Breite seines aktuellen Containers zu definieren, könntest Du die Stile so zuweisen, dass sich die Abfragen auf die Breite der Navigation selbst beziehen. Somit brauchst Du keine Rücksicht mehr auf margins, paddings oder andere Container-Eigenschaften zu nehmen, die Du in der Regel bei der Festlegung von Breakpoints für Deine Inhalte nimmst.

Je nachdem wie sich die Breite der Navigation verändert, kannst Du deren Stile definieren, um sie flexibel und reaktionsfähig zu gestalten.

Lass uns konkreter werden: Unabhängig davon, wo die Navigation positioniert wird (ob im Kopfbereich oder innerhalb der schmalen Sidebar), möchtest Du nun, dass die Menüpunkte nebeneinander stehen und eine Schriftgröße von 1em erhalten, sobald die Navigation breit genug ist, um die nebeneinander gereihten Menüpunkte darstellen zu können (zum Beispiel, wenn die Navigation breiter oder gleich 400px ist). Und soabald sie schmaler als 400px ist, sollen sich die Menüpunkte stapeln und die Schriftgröße auf 1.2em erhöhen.

Du siehst also, dass diese Methode der vorigen ähnelt, bei der em und rem mit Media-Abfragen genutzt wurden, diese Methode jedoch Media Queries durch Element Abfragen ersetzt.

Fazit

Zukunftsorientierte Designer sehen eine Tendenz dazu, dass das reaktionsfähige Web aus 99,9 Prozent Typografie bestehen wird. Und um der zunehmenden Komplexität mobiler Geräte gerecht zu werden, liegt unser Fokus auf einfachen, meist auf Schrift ausgerichteten, Layouts. Diese werden schließlich zuerst wahrgenommen und gelesen. Darum ist reaktionsfähige Typografie heutzutage einer der wichtigsten Aspekte beim Responsive Webdesign.

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART und Instagram.
PayPal-Kaffeespende.

Eine Antwort auf "Typografie im Responsive Webdesign #3: Responsiver Body-Text"
  • Avatar

    Hallo Jonathan,

    Gratulation über deinen Artikel. Du hast alle wichtigen und wissenswerte Punkte über das reponsive Webdesign erwähnt und ausführlich dargestellt. Viele Webdesigner unterschätzen die geeignete Schriftgröße auf den verschiedenen Devices. Mit em und rem ist man flexible dabei und das ist auch gut so! Ich bevorzuge auch rem, weil es generell weniger „Ungereimtheiten“ beim Testing und der Entwicklung gibt (meiner Erfahrung nach). Viele Frameworks bieten bereits Unterstützung für RWD, nur mit der Schrift harpert es dann noch. Aber jetzt zusätzlich noch ein weiteres Plugin einzubinden… Ich löse sowas gerner über die CSS.

    Viele Grüße

    Christoph

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige