# Schrift im Responsive Webdesign mit CSS realisieren 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](https://www.ionos.de/digitalguide/websites/webdesign/responsive-webdesign-und-schrift-grundlagen/) auf Basis von Vektoren. Dabei können Sie zum Beispiel auf vorgefertigte [Webfonts](https://www.ionos.de/digitalguide/websites/webdesign/responsive-webdesign-webfont-tipps/) 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](https://www.ionos.de/digitalguide/websites/webseiten-erstellen/der-perfekte-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](https://snook.ca/technical/colour_contrast/colour.html "Colour Contrast Check") oder dem [Contrast Checker von WebAIM](https://webaim.org/resources/contrastchecker/ "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](https://www.ionos.de/digitalguide/websites/webdesign/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](https://www.ionos.de/digitalguide/websites/webdesign/was-ist-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: ```css 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: ```css 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: ```css 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: ```css 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: ```css 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)`. Hinweis Ähnlich wie die `rem`-Maßeinheiten werden auch die Viewport-Einheiten nicht von allen Browserversionen unterstützt. ### 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: ```css 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: ```css 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. This is a markdown version of: [https://www.ionos.de/digitalguide/websites/webdesign/responsive-webdesign-und-schrift-css-befehle/](https://www.ionos.de/digitalguide/websites/webdesign/responsive-webdesign-und-schrift-css-befehle/) for AI/LLM consumption.