Typografie Responsive Web

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

Responsive Webdesign ist in aller Munde. Neben den von Ethan Marcotte ursprünglich definierten drei Hauptbestandteilen „flexibles Raster“, „flexible Bilder und andere eingebundene Medien“ sowie „Mediaqueries“, gibt es noch eine Reihe weiterer Bereiche, die in diesem Zusammenhang wichtig sind. Einer davon betrifft die reaktionsfähige Typografie.

 

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

 

gefunden bei: http://t3n.de/magazin/responsive-webdesign-reaktionsfahige-typografie-230315/2/