Weshalb man im Responsive Webdesign die Schrift reaktionsfähig gestalten sollte, wurde im 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 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 Hintergrund Ihrer Website 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:
Die folgenden Abschnitte zeigen Ihnen, wie Sie diese CSS-Anweisungen anwenden.
Ü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:
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.
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;}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;
}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.
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 3vminimmer 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.
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 der Reihe zum Thema Typografie im Responsive Webdesign. Dort stellen wir Ihnen diverse Quellen für kostenlose responsive Webfonts vor und erklären, wie Sie diese auf Ihrer Website einbinden.
Das Internet bietet zahlreiche Texte mit unterschiedlichsten Schriftarten. Die Verbreitung des Responsive Webdesigns wirkt sich auch auf die Webseiten-Typografie aus. Schließlich sollte sich die Schriftdarstellung stets dem Bildausschnitt des verwendeten Geräts anpassen. Reaktionsfähige Typografie muss bei der Darstellung flexibel sein und entsprechende Schriftfonts nutzen. Wir geben Ihnen einen...
Die Typografie war für Webdesigner lange Zeit eine eher uninteressante Angelegenheit. Heutzutage sieht die Lage dank diverser technologischer Fortschritte gänzlich anders aus: Mit kreativen Webfonts setzen Sie auf einfache Art und Weise Highlights, ohne dass die Benutzer die jeweiligen Schriftarten auf ihren Geräten installiert haben müssen. Bei der Suche nach den geeigneten Webfonts gilt es...
Nutzen Sie einen Iconfont, um funktionale Piktogramme auf Vektorbasis in Ihre Webseite einzubinden. Gegenüber klassischen Pixelbildern haben Vektorgrafiken den Vorteil, dass sie sich ohne Qualitätsverlust beliebig skalieren lassen. Zudem bietet die Einbindung über CSS (Cascading Style Sheets) weitreichende Möglichkeiten der einfachen codebasierten Ausgestaltung. Zahlreiche Open-Source-Projekte...
Die Auswahl an Webschriften hat sich mit der Einführung von Webfonts gewaltig erhöht. Viele dieser Schriftarten lassen sich kostenlos herunterladen. Dank ihrer Anpassungsfähigkeit eignen sie sich perfekt fürs Responsive Webdesign – die Schrift Ihrer Webseiten passt sich den Anforderungen der Endgeräte an. Verschiedene Internet-Plattformen bieten reaktionsfähige Webfonts an, die Sie schon mit...
Icons werden in der Regel über CSS-Klassen in HTML eingebettet. Veranschaulichen lässt sich dieses Prinzip an einem der meistgenutzten Iconfonts: Font Awesome. Der mehr als 600 vektorbasierte Piktogramme umfassende Open-Source-Font überzeugt durch eine einfache Handhabung und regelmäßige Aktualisierungen. Das Installationspaket beinhaltet eine nahezu fertig konfigurierte CSS-Datei, die den...
