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.

Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach

Welche Schrift eignet sich für Responsive Webdesign?

Damit der Text Ihrer Website auf jedem Bildschirm optimal dargestellt wird, nutzen Sie eine responsive Schrift auf 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.

Über CSS Media Queries eine reaktionsfähige Schrift einbinden

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.

Responsive Überschriften mit Media Queries erstellen

Überschriften werden in CSS über die 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-sitze: 1.5em;
    }
}

Bei diesem Beispiel werden für die h1 vier verschiedene Darstellungsvarianten festgelegt: Die jeweilige font-size der h1 (3em; 2.5em; 2em; 1.5em). 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 von em nach der standardmäßigen Einstellung des genutzten Browsers – in der Regel 16 Pixel. Somit ist in diesem Fall 1em = 16px. Hierüber lassen sich verschiedene Breiten errechnen, an die man die Schriftgröße anpassen möchte – die Pixelanzahl der Fensterbreite teilen Sie dabei einfach durch 16. In unserem Beispiel richtet sich die Darstellungsgröße der h1 also nach vier verschiedenen Fensterbreiten:

  • über 1024 Pixel
  • bis zu 1024 Pixel (1024 : 16 = 64em)
  • bis zu 800 Pixel (800 : 16 = 50em)
  • bis zu 480 Pixel (480 : 16 = 30em)

Natürlich können Sie noch viele weitere Anweisungen für die Neuausrichtung (sogenannte Breakpoints) der Schriftart einfügen. So ist es möglich, Ihre Überschrift noch exakter anzupassen.

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). Und anhand der font-size-Anweisungen (90%, 75%, 50%) in Bezug auf den body passt sich die Schriftgröße an die Fensterbreite an. Durch diese wenigen Handgriffe ist Ihr Webfont reaktionsfähig.

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.

Mit der Nutzung der Einheit em können Sie den Zeilenabstand adäquat zur Größe der Zeichen ausrichten. Dies setzen Sie mit der Anweisung line-height (Zeilenhöhe) um:

body {font-size: 100%}
p {
    font-size: 1.5em;
    line-hight: 1.3 em;
}
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 gegenüber der Nutzung von em 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.5 rem;}
h3 {font-size: 2rem;}

Allerdings wird die rem-Einheit nicht von allen alten Webbrowser-Versionen unterstützt. Bei Browsern wie Firefox, Chrome, Safari, Edge oder Opera ist das nicht weiter problematisch, da deren betreffende, längst überholte Versionen ohnehin niemand mehr nutzen dürfte. Aber vor allem die fehlende Unterstützung früherer Versionen des Internet Explorers von Microsoft kann zu Problemen führen. Erst ab der Version 9 gibt es einen Support von rem-Einheiten. Wenn Sie also auch den Nutzern alter Browserversionen eine attraktive Gestaltung präsentieren wollen, sollten Sie eine Fallback-Variante unter Nutzung von Pixeln einbauen. Diese Rückfallebene für Browser ohne rem sieht in unserem Beispiel so aus: 

html {font-size: 100%}
p{
    font-size: 24px;
    font-size: 1.5rem;
}
h1 {
        font-size: 48px;
        font-size: 3rem;
}
h2 {
        font-size: 40px;
        font-size: 2.5rem;
}
h3 {
        font-size: 32px;
        font-size: 2rem;
}

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

Responsive Überschriften und Fließtexte mit CSS 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. Der folgende Codeschnipsel würde den Haupttext (p) und die Überschriften (h1, h2, h3) mit Viewport-Einheiten reaktionsfähig gestalten: 

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

Über diese CSS-Befehle legen Sie 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 gewährleistet, dass die Schrift auch bei kleineren Browserfensterausschnitten jederzeit die gleiche Relation behält.

Weiterhin beträgt die Größe der ersten Überschrift (h1) stets 5 Prozent der Fensterbreite (font-size: 5vw), die zweite (h2) hingegen immer 4 Prozent der Fensterhöhe (font-size: 4vh). Die dritte und letzte Überschrift (h3) ist durch den Wert 3vmin immer um ein Prozent größer als der Haupttext, da dieser den Wert 2vmin besitzt. Durch diese vier CSS-Anweisungen stehen das Schriftbild des Fließtextes und die drei unterschiedlich großen Überschriften stets im gleichen Größenverhältnis – egal wie groß das Browserfenster ist.

Homepage-Baukasten
Die Website-Sensation mit Künstlicher Intelligenz
  • Intuitives Baukastensystem mit KI-Unterstützung
  • Bilder und Texte wie von Profis gemacht, direkt SEO-optimiert
  • Domain, SSL und E-Mail-Postfach inklusive

Resümee: Im Responsive Webdesign darf man Typografie nicht vernachlässigen

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.

War dieser Artikel hilfreich?