Typografie im Responsive Webdesign - Teil 1: Grundlagen
Die richtige Anwendung von Schriftarten spielt im Webdesign eine große Rolle – das gilt auch fürs Responsive Webdesign, bei dem die Schrift ebenfalls einen starken Einfluss auf die Wahrnehmung einer Website hat.
- DSGVO-konform & sicher gehostet in Deutschland
- Produktivität steigern – weniger Aufwand, mehr Output
- Direkt im Browser starten – ohne Installation
Ursprünglich bezeichnete Typografie das Handwerk des Druckens von Texten mit beweglichen Lettern, den sogenannten Typen. Der Begriff ist historisch gesehen eng mit der Entwicklung der Schrift und ihrer technischen Reproduzierbarkeit durch die Druckerpresse verknüpft. Mittlerweile ist die Bezeichnung sehr viel weiter gefasst: Unter Typografie versteht man die Gestaltung von Schriften und deren Anwendung im weitesten Sinne – auch der digitalen Schrift, wie sie auf Websites oder in Computerprogrammen verwendet wird.
Es wird zwischen Mikro- und Makrotypografie unterschieden:
- Mikrotypografie: Ausgestaltung der Schriftart als solcher sowie die Zeichen- und Wortabstände
- Makrotypografie: Alle Merkmale der Gestaltung einer gedruckten oder digitalen Textseite inklusive Seitenformat, Satzspiegel, Schriftgröße, Zeilenabstände, -anzahl und -breite sowie die Platzierung anderer grafischer Elemente (z. B. Bilder).
Typografie in digitalen Medien und im Internet
Der Begriff Font bezeichnet einen digitalen Zeichensatz, also eine bestimmte Computerschrift. Die Gestaltung einer Schrift innerhalb digitaler Textdokumente und im Web nennt man Webtypografie. Diese orientiert sich grundsätzlich an der klassischen Typografie – auch bei der Webtypografie hängt die Leserlichkeit unter anderem von der Schriftgröße, Zeilenlänge und dem Zeilenabstand ab. Darüber hinaus sind bei Internetschriften die Dateiformate und die Darstellungstechnik der Fonts zu berücksichtigen.
Die Anwendung verschiedener Schriftarten im Web hat sich im Laufe der Zeit stark geändert. Früher war die Darstellbarkeit von Schriftarten in einem Browser deutlich begrenzt – nur wenige Schriften wie Times New Roman oder Arial galten als universell kompatibel, da sie auf den meisten Computern installiert waren und für eine Website abgerufen werden konnten. Inzwischen werden ganz unterschiedliche Schriften in Form von Webfonts genutzt. Webfonts sind Schriftarten, die der Rechner per CSS zusammen mit der anzuzeigenden Website aus dem Netz lädt.
Egal ob Webfonts oder lokal installierte Fonts: Bei den Schriften, die heute zum Einsatz kommen, handelt es sich fast ausschließlich um Vektorfonts, die in jeder Vergrößerungsstufe gleich gut aussehen und im Browser über eine Pixelmatrix dargestellt werden. Die gängigsten Formate für Vektorfonts sind TrueType (TTF), OpenType (OTF) und Web Open Font Format (WOFF2).
Variable Fonts
Eine Weiterentwicklung von Vektor- und Webfonts sind sogenannte Variable Fonts. Dabei handelt es sich um Schriftarten, die mehrere Schriftschnitte wie unterschiedliche Strichstärken (Gewicht), Breiten, Neigungen oder andere typografische Eigenschaften in einer einzigen Fontdatei bündeln. Im Gegensatz zu klassischen Fonts, bei denen jeder Schriftschnitt als separate Datei geladen werden muss, lassen sich Variable Fonts stufenlos und flexibel anpassen.
Diese Technik ermöglicht es, Schrift flexibel an unterschiedliche Bildschirmgrößen, Auflösungen oder Layoutanforderungen anzupassen, ohne zwischen festen Schriftvarianten wechseln zu müssen. Besonders im Responsive Webdesign bietet das Vorteile: Schriftgrößen und -stärken können fließend skaliert werden, wodurch sich das Schriftbild harmonisch in verschiedene Bildausschnitte einfügt. Gleichzeitig profitieren Websites von einer reduzierten Anzahl an Fontdateien, was sich positiv auf die Ladezeiten und die Performance auswirken kann.
Was macht Schrift im Responsive Webdesign aus?
Die Webtypografie hat sich bereits enorm weiterentwickelt, allerdings stellt das responsive bzw. reaktionsfähige Design von Internetauftritten Webdesigner vor neue Herausforderungen. Responsive Webdesign ist eine heute verbreitete Webdesign-Technik, bei der sich die Darstellung des Bildausschnitts einer Webseite an das verwendete Gerät und die Größe des Bildschirms anpasst. Die Anpassung aller Seiteninhalte an die jeweilige Bildschirmgröße betrifft dabei natürlich auch die Schrift – auch sie sollte sich in den Bildausschnitt sinnvoll eingliedern. Das bedeutet, dass auch das Schriftbild anpassungsfähig sein muss.
Die Größe der Schrift und die Zeilenumbrüche des Textes passen sich im Optimalfall an jeden beliebigen Ausschnitt an. CSS-Funktionen ermöglichen außerdem eine sogenannte fluid typography, bei der sich Schriftgrößen stufenlos an die Viewportgröße anpassen. Mit Funktionen wie clamp() lassen sich dabei Mindest-, Ideal- und Maximalwerte für die Schriftgröße definieren, sodass Texte weder zu klein noch übermäßig groß dargestellt werden. Es gibt neben der flexiblen Größe auch noch einige weitere Faktoren, die man bei der Webtypografie berücksichtigen muss:
- Die Schriftgröße muss nicht nur zur Displaygröße passen, sondern auch auf die durchschnittliche Distanz zum Display abgestimmt sein. Bei Smartphones ist der Bildschirmabstand des Users beispielsweise geringer als bei externen Monitoren eines Desktop-PCs.
- Die Schriftgröße ist zudem abhängig von der Bildschirmauflösung.
- Der Zeilenabstand sollte stets an den Bildausschnitt angepasst sein – der für gute Lesbarkeit notwendige Zeilenabstand hängt unter anderem mit der Zeilenlänge zusammen.
- Das Seitenlayout benötigt ausreichend typografische Freiräume (unbeschriebene Flächen des Hintergrunds). Dies kommt ebenfalls der Leserlichkeit eines Textes zugute.
Weiterhin sollte bei der Darstellung auf kleinen Bildschirmen die Schriftfarbe ein wenig greller und der Kontrast etwas stärker als bei einem PC-Monitor sein. Im Gegensatz zu großen Displays nutzt man die kompakteren Bildschirme mobiler Geräte nicht nur innerhalb abgeschlossener Räume, sondern auch viel unterwegs. Somit lassen sich die Lichtverhältnisse kaum beeinflussen. Schrift sollte auf kleinen Displays aber auch bei starker Hellig- oder Dunkelheit und bei Spiegelungen noch leserlich sein, was über ein satteres Schriftbild erreicht wird.
Diese Aspekte spielen auch im Kontext der Barrierefreiheit und Accessibility eine zentrale Rolle. Gut lesbare Schriftgrößen, ausreichende Kontraste und skalierbare Schrift sind wichtige Voraussetzungen, um Inhalte für möglichst viele Nutzerinnen und Nutzer zugänglich zu machen.
- Der einfache Weg zur professionellen Internet-Präsenz
- Mit eigener Domain und E-Mail-Adresse
- Inklusive: Pflege und Aktualisierung nach Livegang
Auf Responsive Webdesign reagieren und die Schrift anpassen
Um im Responsive Webdesign die Schrift auf allen Endgeräten bestmöglich abzubilden, werden Vektorfonts eingesetzt. Vektorfonts sind frei skalierbar und verlieren auch bei einer Vergrößerung der Schrift nicht an Qualität. Das unterscheidet sie von Bitmap-Fonts, die allein auf Basis von Punkten (Pixeln) dargestellt werden.
Allerdings können Vektorschriften – genau wie alle anderen Vektorgrafiken – ohne eine Umwandlung des Formats nicht auf Computerbildschirmen dargestellt werden, da diese nur für Rastergrafiken geeignet sind. Deswegen durchlaufen Vektoren im Vorfeld eine Rasterung, wodurch Vektorfonts letztlich also auch als Raster- bzw. Pixelgrafik auf den Bildschirm gelangen.
Für eine flexible Schriftdarstellung im Responsive Webdesign werden häufig relative Maßeinheiten wie die folgenden verwendet:
em: orientiert sich an der Schriftgröße des Elternelementsrem: basiert auf der Basisschriftgröße des Dokuments- viewportbasierte Einheiten: passen sich an die aktuelle Bildschirmgröße an
Mithilfe von Vektorfonts können Sie die Leserlichkeit einer Schriftart auch im Responsive Webdesign stets gewährleisten. Um das Schriftbild individuell zu gestalten und nicht von den wenigen Fonts abhängig zu sein, die auf den meisten Geräten vorinstalliert sind, können Sie Schriftarten per CSS in die Seite einbinden.
Neben der Anpassung von Vektorfonts über Bildschirm- und Viewport-Größen entwickeln sich auch die zugrunde liegenden Layout-Techniken stetig weiter. CSS-Ansätze wie Container Queries ermöglichen es, Schrift und Layout nicht mehr ausschließlich am gesamten Bildschirm, sondern an der Größe einzelner Seitenelemente auszurichten. So können Komponenten individuell auf ihren verfügbaren Raum reagieren, unabhängig vom globalen Viewport. Dadurch lässt sich Typografie bei modularen Layouts noch gezielter an unterschiedliche Nutzungsszenarien anpassen.