Früher, als das Internet noch einfach war, war es ein leichtes, Corporate Designs auf Internetauftritte zu adaptieren. Man hatte eine Fläche mit 1024 Pixeln Breite minus Browserrand, also circa 960 Pixel, die es auszugestalten galt. Im Fließtext fand man überwiegend komfortable 12 Pixel Schriftgröße vor. Typographie, insbesondere Mikrotypographie, nahm eine untergeordnete Rolle ein. Das lag vor allem daran, dass jeder Browser die Schrift selbst rendert. Während man Schriften im Printbereich bis ins letzte Detail optimieren konnte, hatten Web-Designer gar keinen Einfluss auf das Typo-Ergebnis.

Die Endgeräte-Revolution

Smartphones und Tablets beendeten das einfache, aber eintönige Einerlei abrupt. Plötzlich gab es mehr als 1024 Pixel breite Browserfenster. Das Ergebnis: Responsive Webdesign, also Seiten, die sich dem Endgerät, mit dem sie aufgerufen werden, in Layout und Inhalt anpassen.

Und was hat das mit Typographie zu tun?

Einiges: Hunderte von verschiedenen Auflösungen und unterschiedliche Qualität der Bildschirme verlangen ein Schriftbild, das auf Lesbarkeit optimiert ist. Seiten können sich im Layout noch so responsiv verhalten – sind die Texte nur mit Mühe lesbar, bricht der Nutzer frustriert ab.

Um dies zu vermeiden, muss sich der Layouter folgende Fragen stellen:

  1. Wie sehen meine gewählten Schriften in verschiedenen Größen aus? Wie brechen Sie um?
  2. Wie gehe ich mit Handys um, die zwar eine brillante Auflösung, aber kleine Displays haben?
  3. Wenn ich 50 bis 75 Zeichen als optimale Zeichenanzahl pro Zeile sehe, wie verhalten sich Schriftgröße und Rasterspalten auf unterschiedlichen Displaybreiten? Welcher Zeilenabstand ergibt sich daraus?
  4. Von welchem physischen Abstand zum Display gehe ich bei welchem Endgerät aus?

Zum letzten Punkt gibt es ein interessantes Experiment vom Designer Marko Dugonjic. Auf dieser Seite zeigt er seine Interpretation responsiver Typographie: Echtzeit-Updates der Schriftgröße, die von der Entfernung des Betrachters zum Bildschirm abhängt.

Adieu Systemfonts

Georgia, Verdana, Arial. Das sind Klassiker, die seit über 25 Jahren ihren Dienst auf Bildschirmen verrichten. Ursprünglich entwickelt für Bildschirme, galten sie als einzige Wahl im Internet. Der Siegeszug großer Schriftgrößen im Rahmen responsiver Seiten jedoch entlarvt die Schwächen der Systemschriften. Eine empfehlenswerte Alternative bieten Googles Webfonts. Die Schriften werden im eigenen Code referenziert und von Google selbst bezogen. Sie müssen damit nicht auf den Rechnern der Seitenbesucher vorinstalliert sein. Was Google macht, macht Google gut: Es gibt schon jetzt eine große Auswahl verschiedenster Schriften mit vielen Schnitten.

CSS3 ist lieb

Die bereits im HTML5-Artikel erwähnten Innovationen des World Wide Web Consortiums W3C bieten auch in Sachen Typographie vielversprechende Möglichkeiten. So kann man mit knackigen CSS-Befehlen das Kerning, also die Abstände der Buchstaben zueinander, optimieren.  Sogar Ligaturen, also verbundene Buchstaben, sind damit möglich. Der Browser Firefox in seiner aktuellsten Version nimmt diese Optimierung der Lesbarkeit bei einer Schriftgröße ab 20 Pixel sogar automatisch vor. Eine Demonstration dieser CSS-Befehle gibt's hier. Ein wahrer Segen für Schrift-Ästheten.

Wo geht’s hin?

Wie so oft bei Innovationen im Web sind es private Blogs von Menschen aus der Szene, die die Entwicklung vorantreiben. Auf vielen Seiten wird dieses brandneue Thema kontrovers diskutiert. Insgesamt lässt sich jedoch ablesen, dass das Bewusstsein für saubere Typographie im Internet deutlich ansteigt. Wir dürfen uns also auf optische Leckerbissen freuen.

Apropos optisch und lecker: Wie man neu gewonnene Freiräume nicht nur in der Typographie optimal ausnutzt, verraten wir im nächsten Artikel.

Heiß auf Insider-Infos?

Immer up to date: Unser Newsletter versorgt dich einmal monatlich mit brandneuen Trends und Innovationen aus der Kommunikationswelt.

Newsletter bestellen