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

Responsive Schriften sorgen dafür, dass Texte auf jedem Gerät gut lesbar bleiben. Statt starre Pixelwerte zu verwenden, passt sich die Typografie dabei dynamisch an die Bildschirmbreite an. In CSS lässt sich das mit flexiblen Einheiten oder modernen Funktionen leicht umsetzen.

Welche Schrift eignet sich für Responsive Webdesign?

Damit der Text Ihrer Website auf jedem Bildschirm optimal dargestellt wird, nutzen Sie im Responsive Webdesign eine Schrift auf Basis von Vektoren. Dabei können Sie zum Beispiel auf vorgefertigte Webfonts zurückgreifen. Achten Sie bei der Wahl der Typografie darauf, dass die Schrift leserlich ist und Ihrer Wirkungsabsicht entspricht. Bei Überschriften darf die Schriftart durchaus 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 dem Contrast Checker von WebAIM das Zusammenspiel von einer Schrift- und einer Hintergrundfarbe anzeigen lassen und mit den verschiedenen Farbtönen experimentieren.

Reaktionsfähige Schriften via Media Queries einbinden

Seit der Einführung von CSS Media Queries (Medienabfragen) in CSS3 haben Sie eine nützliche Option, anpassungsfähige Schriften zu realisieren. Media Queries erkennen bestimmte Merkmale eines Gerätes, die genutzt werden, um die Darstellung Ihrer Webseitentexte an die Endgeräte der User anzugleichen. Zu diesen Merkmalen zählen:

• Bildschirmauflösung
• Breite und Höhe des Browserfensters
• Ausrichtung des Bildschirms

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 einen Webfont auf Ihrer Seite ein.
• Über @media-Abfragen können Sie reaktionsfähige Schrift erstellen, die sich an verschiedene Bildschirmbreiten anpasst, zum Beispiel @media screen and (min-width: 800px).
• Die Anweisung font-size definiert die Darstellungsgröße der Schrift – in Pixeln oder relativen Maßeinheiten wie em.

Responsive Überschriften mit Media Queries erstellen

Überschriften werden in CSS über die Kürzel h1, h2, h3 etc. ausgezeichnet. Einer Überschrift können Sie mittels der Einheit em verschiedene relative Darstellungsgrößen zuordnen. Das nachstehende Beispiel zeigt, wie Sie von einer hundertprozentigen Abbildungsgröße der Schriftart (font-size: 100%) ausgehend die erste Überschrift (h1) in mehreren relativen Größen darstellen:

body {font-size: 100%;}
h1 {font-size: 3em;}
@media screen and (max-width: 64em) {
h1 {
font-size: 2.5em;
}
}
@media screen and (max-width: 50em) {
h1 {
font-size: 2em;
}
}
@media screen and (max-width: 30em){
h1 {
font-size: 1.5em;
}
}

Bei diesem Beispiel werden für die h1 vier verschiedene Darstellungsvarianten festgelegt. Wann eine dieser vier Schriftgrößen zum Einsatz kommt, ist von der Fensterbreite des genutzten Browsers abhängig, die per Höchstgrenze (max-width) bestimmt wird.

Die Breite ist im Beispiel über die Maßeinheit em festgelegt. Da im Vorfeld keine feste Textgröße definiert wurde, richtet sich der Wert nach der standardmäßigen Einstellung des genutzten Browsers – in der Regel 16 Pixel. Da 1em genau 16px entspricht, können Sie die gewünschten Breiten einfach berechnen, indem Sie die Pixelzahl durch 16 teilen. Im Beispiel reagiert die h1-Schriftgröße auf vier Fensterbreiten:

• über 1024 px,
• bis 1024 px (64em),
• bis 800 px (50em) und
• bis 480 px (30em).

Bei einer längeren Überschrift kann es dazu kommen, dass sie in kleineren Bildausschnitten über eine Zeile hinaus umgebrochen wird. Dann sollten Sie auch den Zeilenabstand der Überschrift relativ ausrichten – wie sich dies umsetzen lässt, erfahren Sie im nächsten Abschnitt.

Responsiver Haupttext mit em

Wie bei den Überschriften legen Sie für einen Textabsatz (p) die Schriftgröße mit 100 Prozent fest. Auch hier wird der Schriftgrad mit der Einheit em definiert. Die Implementierung unterschiedlicher Schriftgrößen, die sich an den vier vorher definierten Fensterbreiten orientieren, sieht in CSS folgendermaßen aus:

body {font-size: 100%}
p {font-size: 1.5em;}
@media screen and (max-width: 64em) {
body {
font-size: 90%;
}
}
@media screen and (max-width: 50em) {
body {
font-size: 75%;
}
}
@media screen and (max-width: 30em) {
body {
font-size: 50%;
}
}

Da ein body-Wert von 100 Prozent bei der Darstellung der meisten Browser 16 Pixel entspricht, beträgt die grundlegende Schriftgröße des Textes (font-size: 1.5em) in unserem Beispiel 24 Pixel (1,5 x 16 = 24). Die responsive Typografie setzen Sie mit den font-size-Anweisungen um; in Bezug auf den body passt sich die Schriftgröße an die Fensterbreite an.

Sobald Sie den Fließtext Ihrer Webseiten responsiv gestalten, müssen Sie aber nicht nur die Schriftgröße, sondern auch den Zeilenabstand stets angleichen. Laut einem typografischen Grundsatz sollte sich der Zeilenabstand vergrößern, je breiter die Zeilen eines Textes sind. Eine weitere grobe Richtlinie besagt: Der Zeilenabstand sollte beim Fließtext zwischen 120 und 140 Prozent der verwendeten Zeichengröße betragen (1.2em bis 1.4em) – der Wert ist aber immer auch abhängig von der genutzten Schriftart. Dies setzen Sie mit der Anweisung line-height (Zeilenhöhe) um:

body {font-size: 100%}
p {
font-size: 1.5em;
line-height: 1.3em;
}
h1, h2, h3 {line-height: 1.2em;}

Responsiver Haupttext mit rem

Statt em bietet sich auch der Einsatz der relativen Maßeinheit rem („root em“) für einen reaktionsfähigen Haupttext an. Denn rem orientiert sich am Wurzelelement html (und nicht am jeweiligen Element wie die em-Einheit). Dies hat zur Folge, dass sich die Schriftgröße direkt in Relation zu den kompletten Wurzelelement-Inhalten anpasst, was insbesondere bei komplexen Verschachtelungen von Elementen ein Vorteil ist. Die CSS-Anweisungen für eine reaktionsfähige Webtypografie unter Einsatz von rem können beispielsweise so aussehen:

html {font-size: 100%;}
p {font-size: 1.5rem;}
h1 {font-size: 3rem;}
h2 {font-size: 2.5rem;}
h3 {font-size: 2rem;}

Die rem-Einheit wird allerdings nicht von allen alten Webbrowser-Versionen unterstützt. Wenn Sie also auch den Usern alter Browserversionen eine attraktive Gestaltung präsentieren wollen, sollten Sie eine Fallback-Variante unter Nutzung von Pixeln einbauen. Dies sieht beispielsweise so aus:

html {font-size: 100%}
p{
font-size: 24px;
font-size: 1.5rem;
}

Reaktionsfähige Schrift per Viewport 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.

Folgende Viewport-Einheiten stehen zur Verfügung:

• vw („viewport width“) – Breite relativ zum Browserfenster
• vh („viewport height“) – Höhe relativ zum Browserfenster
• vmax („viewport maximum“) – größerer Wert von Breite oder Höhe
• vmin („viewport minimum“) – kleinerer Wert von Breite oder Höhe

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; also wäre der Wert 10vmax = *64px* (640 : 10).

Responsive Überschriften und Fließtexte via Viewport erstellen

Mithilfe der Viewport-Maßeinheiten können Sie sowohl die Überschriften als auch den Haupttext ausrichten. Die Implementierung der Viewport-Anweisungen erfolgt ähnlich der Verwendung von rem-Einheiten bei den Media Queries – beide Maßeinheiten sind relativ:

p {font-size: 2vmin;}
h1 {font-size: 5vw;}
h2 {font-size: 4vh;}
h3 {font-size: 3vmin;}

Über diese CSS-Befehle legen Sie beispielsweise fest, dass die Zeichen des Fließtexts (p) kontinuierlich 2 Prozent der Fensterbreite oder -höhe einnehmen (font-size: 2vmin) – je nachdem, welcher Wert der kleinere ist. Damit ist das responsive Webdesign der Schrift auch bei kleineren Browserfensterausschnitten jederzeit die gleiche Relation sichergestellt.

Responsive Webtypografie mit clamp()

Eine weitere sehr praktische Möglichkeit, reaktionsfähige Schrift in CSS zu gestalten, ist die Verwendung der Funktion clamp(). Mit clamp() können Sie eine Schriftgröße festlegen, die automatisch mit der Bildschirmbreite wächst oder schrumpft, aber gleichzeitig nicht kleiner oder größer als bestimmte Grenzen wird. Die Syntax lautet font-size: clamp(Minimum, Bevorzugt, Maximum);. Dabei gilt:

• Minimum ist die kleinste Schriftgröße, die erlaubt ist.
• Bevorzugt ist die flexible Größe, die sich dynamisch an die Viewport-Breite anpasst.
• Maximum ist die größte Schriftgröße, die erreicht werden darf.

Ein Beispiel für eine Überschrift könnte so aussehen:

h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}

Der Vorteil von clamp() gegenüber Media Queries ist, dass die Schriftgröße fließend skaliert, ohne dass Sie mehrere Breakpoints definieren müssen. Sie brauchen also keine separaten @media-Abfragen für unterschiedliche Bildschirmgrößen.

Fazit: Typografie im Responsive Webdesign nicht vernachlässigen

Bereits die Anwendung weniger CSS-Befehle sorgt für ein responsives Webdesign Ihrer Schrift. 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 Container Queries. 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.