Vorheriger Artikel Nächster Artikel

Responsive Webdesign: Worauf es beim Einsatz reaktionsfähiger Typografie ankommt

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

Responsive Webdesign: Worauf es beim Einsatz reaktionsfähiger Typografie ankommt
Wooden type blocks for hand typesetting or letterpress printing.

Tipps zum Skalieren

Wenn Anpassungen der Schriftgröße für unterschiedliche Darstellungen nötig sind, ist zu beachten, dass dies nicht willkürlich geschieht. Vielmehr sollte der Webdesigner darauf achten, dass das Verhältnis der Schriftgrade zueinander harmonisch bleibt. Dabei hilft es, sich an einer modularen Skala, einer Art Tonleiter, zu orientieren, die ähnlich einer musikalischen Tonleiter aus harmonischen Proportionen besteht. Eine solche, seit mehreren Jahrhunderten bereits erprobte typografische Zahlenreihe ist auf der folgenden Abbildung zu sehen.

Die Jahrhunderte alte, typografische „Tonleiter“.
Die Jahrhunderte alte, typografische „Tonleiter“.

Diese Abfolge von Schriftgrößen findet man in gleicher Weise – manchmal ergänzt um ein paar Zwischenschritte – in Layoutprogrammen wie InDesign. Statt der traditionellen Schriftgrad-Skala steht es jedem natürlich frei, auch eine eigene zu entwickeln, die den Bedürfnissen möglicherweise besser gerecht wird. Mehr zu diesem Thema über bedeutsame Web-Typografie schreibt Tim Brown in einem lesenswerten Artikel bei „A List Apart“ [5]. Jetzt lässt sich auf Basis der Skala eine Bandbreite von Schriftgraden festlegen, die je nach Bildschirmgröße für die Überschriften genutzt werden kann.

Die modulare Skala ermöglicht es, auf Basis der Zahlenreihe für verschiedene Bildschirmgrößen passende Schriftgrade zu entnehmen.
Die modulare Skala ermöglicht es, auf Basis der Zahlenreihe für verschiedene Bildschirmgrößen passende Schriftgrade zu entnehmen.

Dadurch erhält der Anwender für kleinere Bildschirme entsprechend kleinere Überschriften, deren Schriftgrad nicht zu stark ansteigt und somit den geringen Platz besser ausnutzt. Auf größeren Bildschirmen steigen die Schriftgrade stärker an und erzeugen mehr Kontrast, was aufgrund von ausreichend viel Weißraum unproblematisch ist.

Allerdings müssen Webdesigner noch eine Besonderheit bei mobilen Geräten beachten. Aufgrund der höheren Auflösung im Vergleich zu Desktop-Bildschirmen kann die physische Schriftgröße entsprechend abweichen. Deshalb ist es rastsam, die Schrift auf diesen Geräten auch immer zu testen. So benötigt man bei extrem hohen Auflösungen wie beim iPhone 4 eine HTML-Meta-Angabe, die die Größenangaben im CSS entsprechend abstimmt. Das passiert mit folgendem Codeschnipsel:

HMTL

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Ein Apple-Bug beim Drehen des Geräts in den Landscape-Modus wird öfter durch ein ergänzendes „maximum-scale=1.0“ behoben. Weil das aber jegliches Verändern der Schriftgrößen-Darstellung verhindert, ist zu empfehlen, auf diese Angabe zu verzichten. Wer den Bug beheben möchte, sollte stattdessen auf ein JavaScript-Schnipsel von Scott Jehl zurückgreifen [6].

Um bereits frühzeitig die Typografie auf verschiedenen Geräten zu testen, hat Andy Clarke eine Testdatei zur Verfügung gestellt, die auch die gerade erwähnten Dinge berücksichtigt [7]. Conor MacNeill hat diese Datei aufgebohrt, so dass sich auch recht schnell andere Schriften, zum Beispiel von Typekit, ergänzen lassen [8].

Relative Einheiten verwenden

Unser traditionelles Typografie-Verständnis beruht auf absoluten Einheiten wie „pt“ für Punkt, die im Print-Bereich feste, messbare Größen erzeugen. Im Web wird dafür häufig die Ersatzeinheit „px“ für Pixel verwendet. Diese Einheit kann aber in der tatsächlichen Abmessung variieren und entspricht nur dann tatsächlich einem wirklichen Geräte-Pixel, wenn die Darstellungsgröße genau 100 Prozent beträgt. Auch bei höher auflösenden Displays von einigen Tablets und Smartphones hat die Größe nichts mehr mit den eigentlichen Pixeln zu tun. Schriftgrößen in „px“ lassen also nicht auf eine konkrete, feste Größe schließen.

Pixelwerte stehen außerdem immer für sich, verschiedene Schriftgrößen in „px“ haben keinen Bezug zueinander. Vor dem Hintergrund eines flexiblen Rasters, bei dem alle Spalten dank der Prozentwerte in Bezug zu ihrem Elternelement stehen, wäre es natürlich auch vorteilhaft, wenn die Angaben der Schriftgrößen relativ zueinander sind. Denn wenn sich die Größe des Darstellungsfensters als äußerster Container ändert, können sich so die darin enthalten Elemente leicht anpassen lassen. Deshalb definieren Webdesigner Schriftgrößen besser in einer relativen Einheit wie „em“:

CSS

body {font-size: 100%:} /* 16px */
h1 {font-size: 2.25 em;} /* 36px, 36/16=2.25 */
h2 {font-size: 1.5 em;} /* 24px, 24/16=1.5 */
h3 {font-size: 1.3125 em;} /* 18px, 18/16=1.3125 */
p {font-size: 1 em;} /* 16px */

Für den „body“ ist die Angabe einer Prozentangabe zu empfehlen, weil das in älteren Versionen des Internet Explorers einen Skalierungs-Bug behebt. Der Prozentwert bezieht sich dabei auf die voreingestellte Standardschriftgröße des Browsers, die in der Regel „16px“ beträgt. „1em“ entspricht also diesen „16px“, sodass sich davon ausgehend die weiteren Schriftgrößen in „em“ errechnen lassen (siehe Listing 2). Die Werte entsprechen dabei denen der typografischen Skala.

So stehen die Schriften in einem direkten Bezug zueinander, die Überschrift „h2“ zum Beispiel ist 1,5 mal so groß wie die Schriftgröße in einem Absatz. Auf diese Weise ist es dem Webdesigner möglich, für kleinere Bildschirme die Schriftgröße für alle Elemente ganz einfach anzupassen, indem er für das Container-Element „body“ den Prozentwert verringert.

CSS

body {font-size: 87.5%:}
...

Der hier angegebene Wert von 87,5 Prozent würde dann für Absätze eine Größe von „14px“ ergeben. „Ems“ haben allerdings einen kleinen Nachteil: Die Größenangabe bezieht sich immer auf die Schriftgröße des Elternelements. Das ist dann ein Problem, wenn das Elternelement eine vom „body“ abweichende Schriftgröße erhält:

CSS

body {font-size: 100%:} /* 16px */
p {font-size: 1 em;} /* 16px */
div {font-size: 1.5 em;} /* 24px */
div p {font-size: 1 em;} /* 24px */

Ein Absatz, der Kindelement eines „div“ ist, wird plötzlich größer dargestellt als ein Absatz, der nicht innerhalb eines „div“ platziert ist, obwohl beiden die Schriftgröße „1em“ zugewiesen wurde. So kann es passieren, dass Inhaltsmodule eine andere Schriftgröße erhalten, wenn sie innerhalb der Seitenstruktur verschoben werden. Um diesen Elementen dann wieder die ursprüngliche Größe zuzuweisen, ist umständlicher Rechenaufwand nötig.

Wegen dieser Schwierigkeiten waren Pixelwerte immer so beliebt. Seit einiger Zeit gibt es aber die neue Einheit „rem“, die sich stets auf die Schriftgröße des Root-Elements bezieht, also auf die im „body“ definierte Schriftgröße, egal welche Schriftgröße für ein eventuelles Elternelement angegeben ist. Die Browser-Unterstützung für diese Einheit ist gut, lediglich ältere Internet Explorer der Version 8 und abwärts können nicht damit umgehen. Als Fallback kann man für diese Browser einfach die Pixelwerte voranstellen:

CSS

body {font-size: 100%:}
h1 {font-size: 36px; font-size: 2.25 rem;}
h2 {font-size: 24px; font-size: 1.5 rem;}
h3 font-size: 18px; {font-size: 1.3125 rem;}
p {font-size: 16px; font-size: 1 rem;}

Alternativ ist es möglich, die Pixelwerte auch in ein separates IE-Stylesheet unterzubringen. Mit „rem“ gibt es nun also eine leicht anzuwendende Schriftgröße, die die Vorteile von Pixelwerten und „em“ vereint und gut auf einen veränderten Kontext im Responsive Design reagieren kann. Ein Tool, das beim Umrechnen von Pixeln in „em“/„rem“ hilft, bietet die Website „pxtoem“ [9].

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von danielahrend am 15.11.2012 (19:13 Uhr)

    Interessanter Artikel! Wichtig finde ich ebenfalls, dass man immer genug Whitespace zwischen Elementen lässt. Gerade bei mobilen Endgeräten wirkt die Webseite ansonsten sehr gequetscht. Dies nur als Ergänzung.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?