Schrift im Re­spon­si­ve Webdesign mit CSS rea­li­sie­ren

Re­spon­si­ve Schriften sorgen dafür, dass Texte auf jedem Gerät gut lesbar bleiben. Statt starre Pi­xel­wer­te zu verwenden, passt sich die Ty­po­gra­fie dabei dynamisch an die Bild­schirm­brei­te an. In CSS lässt sich das mit flexiblen Einheiten oder modernen Funk­tio­nen leicht umsetzen.

Welche Schrift eignet sich für Re­spon­si­ve Webdesign?

Damit der Text Ihrer Website auf jedem Bild­schirm optimal dar­ge­stellt wird, nutzen Sie im Re­spon­si­ve Webdesign eine Schrift auf Basis von Vektoren. Dabei können Sie zum Beispiel auf vor­ge­fer­tig­te Webfonts zu­rück­grei­fen. Achten Sie bei der Wahl der Ty­po­gra­fie darauf, dass die Schrift leserlich ist und Ihrer Wir­kungs­ab­sicht ent­spricht. Bei Über­schrif­ten darf die Schrift­art durchaus ver­spiel­ter sein – im Haupttext sollten Sie dies aber unbedingt vermeiden, da es das Lesen auf Dauer unnötig erschwert.

Die Schrift­far­be sollte in Kom­bi­na­ti­on mit dem Website-Hin­ter­grund einen ge­eig­ne­ten Kontrast ergeben. Er darf nicht zu blass sein; ansonsten leidet auch hier die Le­ser­lich­keit. 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 Zu­sam­men­spiel von einer Schrift- und einer Hin­ter­grund­far­be anzeigen lassen und mit den ver­schie­de­nen Farbtönen ex­pe­ri­men­tie­ren.

Re­ak­ti­ons­fä­hi­ge Schriften via Media Queries einbinden

Seit der Ein­füh­rung von CSS Media Queries (Me­di­en­ab­fra­gen) in CSS3 haben Sie eine nützliche Option, an­pas­sungs­fä­hi­ge Schriften zu rea­li­sie­ren. Media Queries erkennen bestimmte Merkmale eines Gerätes, die genutzt werden, um die Dar­stel­lung Ihrer Web­sei­ten­tex­te an die Endgeräte der User an­zu­glei­chen. Zu diesen Merkmalen zählen:

• Bild­schirm­auf­lö­sung
• Breite und Höhe des Brow­ser­fens­ters
• Aus­rich­tung des Bild­schirms

Eine optimal re­spon­si­ve Ty­po­gra­fie 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ß­ein­heit erzeugt ein best­mög­li­ches re­ak­ti­ons­fä­hi­ges Schrift­bild. Deshalb sollten Sie über relative Einheiten wie em, rem oder Pro­zent­an­ga­ben die Größe eines Webfonts bestimmen.

Das Ein­pfle­gen und Aus­rich­ten einer re­spon­si­ven Ty­po­gra­fie über Media Queries gelingt mithilfe dieser CSS-An­wei­sun­gen:

• Mit @font-face betten Sie einen Webfont auf Ihrer Seite ein.
• Über @media-Abfragen können Sie re­ak­ti­ons­fä­hi­ge Schrift erstellen, die sich an ver­schie­de­ne Bild­schirm­brei­ten anpasst, zum Beispiel @media screen and (min-width: 800px).
• Die Anweisung font-size definiert die Dar­stel­lungs­grö­ße der Schrift – in Pixeln oder relativen Maß­ein­hei­ten wie em.

Re­spon­si­ve Über­schrif­ten mit Media Queries erstellen

Über­schrif­ten werden in CSS über die Kürzel h1, h2, h3 etc. aus­ge­zeich­net. Einer Über­schrift können Sie mittels der Einheit em ver­schie­de­ne relative Dar­stel­lungs­grö­ßen zuordnen. Das nach­ste­hen­de Beispiel zeigt, wie Sie von einer hun­dert­pro­zen­ti­gen Ab­bil­dungs­grö­ße der Schrift­art (font-size: 100%) ausgehend die erste Über­schrift (h1) in mehreren relativen Größen dar­stel­len:

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 ver­schie­de­ne Dar­stel­lungs­va­ri­an­ten fest­ge­legt. Wann eine dieser vier Schrift­grö­ßen zum Einsatz kommt, ist von der Fens­ter­brei­te des genutzten Browsers abhängig, die per Höchst­gren­ze (max-width) bestimmt wird.

Die Breite ist im Beispiel über die Maß­ein­heit em fest­ge­legt. Da im Vorfeld keine feste Textgröße definiert wurde, richtet sich der Wert nach der stan­dard­mä­ßi­gen Ein­stel­lung des genutzten Browsers – in der Regel 16 Pixel. Da 1em genau 16px ent­spricht, können Sie die ge­wünsch­ten Breiten einfach berechnen, indem Sie die Pixelzahl durch 16 teilen. Im Beispiel reagiert die h1-Schrift­grö­ße auf vier Fens­ter­brei­ten:

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

Bei einer längeren Über­schrift kann es dazu kommen, dass sie in kleineren Bild­aus­schnit­ten über eine Zeile hinaus um­ge­bro­chen wird. Dann sollten Sie auch den Zei­len­ab­stand der Über­schrift relativ aus­rich­ten – wie sich dies umsetzen lässt, erfahren Sie im nächsten Abschnitt.

Re­spon­si­ver Haupttext mit em

Wie bei den Über­schrif­ten legen Sie für einen Text­ab­satz (p) die Schrift­grö­ße mit 100 Prozent fest. Auch hier wird der Schrift­grad mit der Einheit em definiert. Die Im­ple­men­tie­rung un­ter­schied­li­cher Schrift­grö­ßen, die sich an den vier vorher de­fi­nier­ten Fens­ter­brei­ten ori­en­tie­ren, sieht in CSS fol­gen­der­ma­ß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 Dar­stel­lung der meisten Browser 16 Pixel ent­spricht, beträgt die grund­le­gen­de Schrift­grö­ße des Textes (font-size: 1.5em) in unserem Beispiel 24 Pixel (1,5 x 16 = 24). Die re­spon­si­ve Ty­po­gra­fie setzen Sie mit den font-size-An­wei­sun­gen um; in Bezug auf den body passt sich die Schrift­grö­ße an die Fens­ter­brei­te an.

Sobald Sie den Fließtext Ihrer Webseiten responsiv gestalten, müssen Sie aber nicht nur die Schrift­grö­ße, sondern auch den Zei­len­ab­stand stets an­glei­chen. Laut einem ty­po­gra­fi­schen Grundsatz sollte sich der Zei­len­ab­stand ver­grö­ßern, je breiter die Zeilen eines Textes sind. Eine weitere grobe Richt­li­nie besagt: Der Zei­len­ab­stand sollte beim Fließtext zwischen 120 und 140 Prozent der ver­wen­de­ten Zei­chen­grö­ße betragen (1.2em bis 1.4em) – der Wert ist aber immer auch abhängig von der genutzten Schrift­art. Dies setzen Sie mit der Anweisung line-height (Zei­len­hö­he) um:

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

Re­spon­si­ver Haupttext mit rem

Statt em bietet sich auch der Einsatz der relativen Maß­ein­heit rem („root em“) für einen re­ak­ti­ons­fä­hi­gen Haupttext an. Denn rem ori­en­tiert sich am Wur­zel­ele­ment html (und nicht am je­wei­li­gen Element wie die em-Einheit). Dies hat zur Folge, dass sich die Schrift­grö­ße direkt in Relation zu den kom­plet­ten Wur­zel­ele­ment-Inhalten anpasst, was ins­be­son­de­re bei komplexen Ver­schach­te­lun­gen von Elementen ein Vorteil ist. Die CSS-An­wei­sun­gen für eine re­ak­ti­ons­fä­hi­ge Web­ty­po­gra­fie unter Einsatz von rem können bei­spiels­wei­se 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 al­ler­dings nicht von allen alten Web­brow­ser-Versionen un­ter­stützt. Wenn Sie also auch den Usern alter Brow­ser­ver­sio­nen eine at­trak­ti­ve Ge­stal­tung prä­sen­tie­ren wollen, sollten Sie eine Fallback-Variante unter Nutzung von Pixeln einbauen. Dies sieht bei­spiels­wei­se so aus:

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

Re­ak­ti­ons­fä­hi­ge Schrift per Viewport einbinden

Eine weitere Variante für die Umsetzung einer re­spon­si­ven Web­ty­po­gra­fie ist die Benutzung von CSS-Viewport-Einheiten. Als Viewport versteht man im Webdesign die Größe des Brow­ser­fens­ters. Auch über CSS Viewport können Sie Sei­ten­in­hal­te auf die vor­lie­gen­de Breite des Fensters reagieren lassen und auf die jeweilige Größe skalieren. Der Vorteil gegenüber der Nutzung von Media Queries ist, dass der An­pas­sungs­vor­gang an eine neue Fens­ter­grö­ße schneller von der Hand geht.

Folgende Viewport-Einheiten stehen zur Verfügung:

• vw („viewport width“) – Breite relativ zum Brow­ser­fens­ter
• vh („viewport height“) – Höhe relativ zum Brow­ser­fens­ter
• 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 pro­zen­tua­le Angaben, z. B. 10vw = 10 Prozent der Fens­ter­brei­te. 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).

Re­spon­si­ve Über­schrif­ten und Fließ­tex­te via Viewport erstellen

Mithilfe der Viewport-Maß­ein­hei­ten können Sie sowohl die Über­schrif­ten als auch den Haupttext aus­rich­ten. Die Im­ple­men­tie­rung der Viewport-An­wei­sun­gen erfolgt ähnlich der Ver­wen­dung von rem-Einheiten bei den Media Queries – beide Maß­ein­hei­ten sind relativ:

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

Über diese CSS-Befehle legen Sie bei­spiels­wei­se fest, dass die Zeichen des Fließ­texts (p) kon­ti­nu­ier­lich 2 Prozent der Fens­ter­brei­te oder -höhe einnehmen (font-size: 2vmin) – je nachdem, welcher Wert der kleinere ist. Damit ist das re­spon­si­ve Webdesign der Schrift auch bei kleineren Brow­ser­fens­ter­aus­schnit­ten jederzeit die gleiche Relation si­cher­ge­stellt.

Re­spon­si­ve Web­ty­po­gra­fie mit clamp()

Eine weitere sehr prak­ti­sche Mög­lich­keit, re­ak­ti­ons­fä­hi­ge Schrift in CSS zu gestalten, ist die Ver­wen­dung der Funktion clamp(). Mit clamp() können Sie eine Schrift­grö­ße festlegen, die au­to­ma­tisch mit der Bild­schirm­brei­te wächst oder schrumpft, aber gleich­zei­tig nicht kleiner oder größer als bestimmte Grenzen wird. Die Syntax lautet font-size: clamp(Minimum, Bevorzugt, Maximum);. Dabei gilt:

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

Ein Beispiel für eine Über­schrift könnte so aussehen:

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

Der Vorteil von clamp() gegenüber Media Queries ist, dass die Schrift­grö­ße fließend skaliert, ohne dass Sie mehrere Break­points de­fi­nie­ren müssen. Sie brauchen also keine separaten @media-Abfragen für un­ter­schied­li­che Bild­schirm­grö­ßen.

Fazit: Ty­po­gra­fie im Re­spon­si­ve Webdesign nicht ver­nach­läs­si­gen

Bereits die Anwendung weniger CSS-Befehle sorgt für ein re­spon­si­ves Webdesign Ihrer Schrift. Nach der Im­ple­men­tie­rung sollten Sie das Ergebnis al­ler­dings noch auf möglichst vielen ver­schie­de­nen Geräten (oder Emu­la­to­ren) testen und ggf. aus­bes­sern, bevor Sie die Webseite ver­öf­fent­li­chen.

Ob Sie bei der Umsetzung auf Media Queries zu­rück­grei­fen oder lieber CSS Viewport anwenden, ist si­tua­ti­ons­ab­hän­gig und letztlich eine Ge­schmacks­fra­ge. Media Queries sind im Vergleich zu Viewport-Einheiten etwas langsamer bei der Ska­lie­rung der Schrift, werden aber auch von mehreren alten Browsern un­ter­stützt. Überdies gibt es weitere Mög­lich­kei­ten, um eine re­ak­ti­ons­fä­hi­ge Web­ty­po­gra­fie zu ge­ne­rie­ren, etwa über Container Queries. All diese Methoden erfüllen die An­for­de­run­gen an eine re­spon­si­ve Web­ty­po­gra­fie: Im Re­spon­si­ve Webdesign muss sich die Schrift immer an den sicht­ba­ren Bild­aus­schnitt an­glei­chen, wobei es auf die (relative) Änderung der Schrift­grö­ße und des Zei­len­ab­stands sowie die Ver­wen­dung von Webfonts auf Basis von Vektoren ankommt.