Typografie im Responsive Webdesign - Teil 3: Technische Umsetzung mit CSS

Weshalb man im Responsive Webdesign die Schrift reaktionsfähig gestalten sollte, wurde in  "Typografie im Responsive Webdesign - Teil 1: Grundlagen", dem ersten Teil unseres Mehrteilers über responsive Typografie behandelt. Hier nun rückt die technische Seite in den Mittelpunkt – nach einem Überblick über die grundlegende Funktionsweise des Responsive Webdesigns sowie geeigneter Web-Schriftarten geben wir Ihnen einen Leitfaden zur Implementierung responsiver Schrift via CSS-Anweisungen.

Damit der Text Ihrer Website auf jedem Bildschirm optimal dargestellt wird, nutzen Sie eine responsive Schriftauf Basis von Vektoren. Dabei können Sie auf einen vorgefertigte Webfonts zurückgreifen: Google Fonts und Font Squirrel beispielweise bieten Ihnen eine gute Auswahl und sind zudem kostenfrei. Achten Sie bei der Wahl der Typografie darauf, dass die Schrift leserlich ist und Ihrer Wirkungsabsicht entspricht. Bei Überschriften darf die Schriftart durchaus etwas verspielter sein – im Haupttext sollten Sie dies aber unbedingt vermeiden, da es das Lesen auf Dauer unnötig erschwert.

Die Schriftfarbe sollte in Kombination mit dem Website-Hintergrund einen geeigneten Kontrast ergeben. Er darf nicht zu blass sein, ansonsten leidet auch hier die Leserlichkeit. Falls Sie bei der Wahl des Kontrasts unsicher sind, können Sie sich mithilfe von Browser-Tools wie Colour Contrast Check oder Contrast-A das Zusammenspiel von einer Schrift- und einer Hintergrundfarbe anzeigen lassen und mit den verschiedenen Farbtönen experimentieren.

Mit der Einführung von Media Queries (Medienabfragen) in CSS3 haben Sie eine neue nützliche Option, anpassungsfähige Schriften zu realisieren. Media Queries erkennen bestimmte Merkmale eines Gerätes wie die Bildschirmauflösung, die Breite und Höhe des Browserfensters oder ob das Display im Hoch- oder Querformat ausgerichtet ist. Diese Informationen werden genutzt, um die Darstellung Ihrer Webseitentexte an die Endgeräte der Nutzer anzugleichen.

Eine optimal responsive Typografie ist in CSS nicht durch die Angabe von Pixel-Werten zu erreichen, da es sich bei einem Pixel um eine statische Größe handelt. Erst die Anwendung einer flexiblen Maßeinheit erzeugt ein bestmögliches reaktionsfähiges Schriftbild. Deshalb sollten Sie über relative Einheiten wie em, rem oder Prozentangaben die Größe eines Webfonts bestimmen.

Das Einpflegen und Ausrichten einer responsiven Typografie über Media Queries gelingt mithilfe dieser CSS-Anweisungen:

• Mit @font-face betten Sie zunächst einen Webfont auf Ihrer Seite ein.
• Um die Schrift an das verwendete Gerät anzupassen, benötigt man die Medienabfrage, die über @media ausgeführt wird. Für die geräteabhängige Darstellung sind außerdem die Maße des Browserfensters bzw. Viewports von Belang. Wenn Sie @media mit screen kombinieren und entweder min-width (minimale Breite) oder max-width (maximale Breite) ergänzen, können Sie für bestimmte Breiten des Bildausschnittes das Format der Schrift festlegen, z. B.  @media screen and (min-width: 800px). So grenzen Sie ein, ab welcher Größe des Browserfensters eine andere Schriftgröße eingesetzt wird.
• Die Anweisung font-size definiert die Darstellungsgröße der Schrift – in Pixeln oder relativen Maßeinheiten wie em (vom Schriftgrad abhängiges Maß der Zeichenbreite). Die Einheit em richtet sich dabei nach der im Vorfeld bestimmten Größe desjenigen Elements, das mit einem em-Wert dargestellt wird. Falls die Schriftgröße allein mit em definiert wird, richtet sich der Wert nach dem Schriftgrad des Elternelements.

Die folgenden Abschnitte zeigen Ihnen, wie Sie diese CSS-Anweisungen anwenden.

Über CSS Viewport eine reaktionsfähige Schrift einbinden

Eine weitere Variante für die Umsetzung einer responsiven Webtypografie ist die Benutzung von CSS-Viewport-Einheiten. Als Viewport versteht man im Webdesign die Größe des Browserfensters. Auch über CSS Viewport können Sie Seiteninhalte auf die vorliegende Breite des Fensters reagieren lassen und auf die jeweilige Größe skalieren. Der Vorteil gegenüber der Nutzung von Media Queries ist, dass der Anpassungsvorgang an eine neue Fenstergröße schneller von der Hand geht.

Über die CSS-Viewport-Einheiten vw („viewport width“) und vh („viewport height“) legen Sie die Breite und Höhe im Verhältnis zur Größe des Browserfensters fest. Ebenfalls stehen mit vmax („viewport maximum“) und vmin(„viewport minimum“) zwei Einheiten zur Verfügung, die die Größe entweder in Relation zur Höhe oder zur Breite des Fensters bestimmen. Welches Maß als Anpassungsgrundlage verwendet wird, hängt von der jeweiligen Einheit ab: Bei vmin bestimmt der kleinere und bei vmax der größere Wert, welcher Viewport maßgebend ist. Bei allen vier Viewport-Einheiten handelt es sich um prozentuale Angaben (z. B. 10vw = 10 Prozent der Fensterbreite). Bei einem Viewport von 640 x 480 Pixel würde sich vmax auf die 640 Pixel (den größeren der beiden Werte) beziehen – bei einem Browserfenster dieser Größe entspricht der Wert 10vmax = 64px (640 : 10).

Ähnlich wie die rem-Maßeinheiten werden auch die Viewport-Einheiten nicht von allen Browserversionen unterstützt – im diesem Fall sind es sogar noch mehr. Eine Übersicht dazu finden Sie hier.

Bereits die Anwendung weniger CSS-Befehle sorgt für ein responsives Design Ihres Webfonts. Nach der Implementierung sollten Sie das Ergebnis allerdings noch auf möglichst vielen verschiedenen Geräten (oder Emulatoren) testen und ggf. ausbessern, bevor Sie die Webseite veröffentlichen.

Ob Sie bei der Umsetzung auf Media Queries zurückgreifen oder lieber CSS Viewport anwenden, ist situationsabhängig und letztlich eine Geschmacksfrage. Media Queries sind im Vergleich zu Viewport-Einheiten etwas langsamer bei der Skalierung der Schrift, werden aber auch von mehreren alten Browsern unterstützt. Überdies gibt es weitere Möglichkeiten, um eine reaktionsfähige Webtypografie zu generieren, etwa über Element Queries oder die Nutzung eines jQuery Plug-ins. All diese Methoden erfüllen die Anforderungen an eine responsive Webtypografie: Im Responsive Webdesign muss sich die Schrift immer an den sichtbaren Bildausschnitt angleichen, wobei es auf die (relative) Änderung der Schriftgröße und des Zeilenabstands sowie die Verwendung von Webfonts auf Basis von Vektoren ankommt. Letzteren widmen wir uns im zweiten Teil unserer Reihe zum Thema Typografie im Responsive Webdesign „Responsive Webdesign - Webfont-Tipps“. Dort stellen wir Ihnen diverse Quellen für kostenlose responsive Webfonts vor und erklären, wie Sie diese auf Ihrer Website einbinden.