Typografie im Responsive Webdesign - Teil 1: Grundlagen

Die richtige Anwendung von Schriftarten spielt im Webdesign inzwischen 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.

Wissenswertes zur Typografie

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. Unter dem Begriff Mikrotypografie subsumiert man die Ausgestaltung der Schriftart als solcher sowie die Zeichen- und Wortabstände. Demgegenüber umfasst Makrotypografie alle Merkmale der Gestaltung einer gedruckten oder digitalen Textseite: Seitenformat, Satzspiegel, Schriftgröße, Zeilenabstände, -anzahl und -breite sowie die Platzierung anderer grafischer Elemente (z. B. Bilder) sind Bestandteile der Makrotypografie.

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) und OpenType (OTF).

Schrift im Responsive Webdesign

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 die Darstellung des Bildausschnitts einer Webseite sich an das verwendete Gerät und die Größe des Bildschirms anpasst. Auf dem Display eines Smartphones wird eine Homepage anders abgebildet als auf dem eines Tablets, Laptops oder Desktop-Computers. 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. Und es gibt 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 Nutzers 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.

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.

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.

War dieser Artikel hilfreich?