Zur Übersicht

Typographie im Web

Jürgen Raich Aktualisiert am 17. Aug. 2020
fonts

Eine Website besteht zum Großteil aus Information, die wiederum meistens in Textform dargestellt wird. Zwar gehören Bilder, Videos und grafische Visualisierungen genauso zum Inhalt, den größten Part wird aber in den meisten Fällen der Text ausmachen. Dadurch ergibt sich, dass die Schrift und ihre Gestaltung, also die Typographie, einen erheblichen und oft ausschlaggebenden Teil zum Erscheinungsbild eines Web-Auftrittes beitragen.

Die Wirkung einer ausgewählten und gestalteten Typografie geht weit über die reine Schriftenwahl hinaus. Wir als Designer stimmen die Schriftgrade bedacht aufeinander ab, setzen die verwendeten Schriftschnitte (roman/normal, fett, kursiv, condensed, etc.) in einen harmonischen Canon, definieren Zeilen- und Absatzabstände die optisch ansprechend sind und die Lesbarkeit fördern und passen Zeichenabstände an. Diese und noch weitere Entscheidungen bestimmen die Wirkung einer Seite gleich stark, wenn nicht oft stärker, als es die Farbwahl oder die Position des Logos kann.

Mit gekonnten typographischen Entscheidungen kann der Charakter einer Marke gestärkt werden. Indem man die CI-Richtlinien an die Anforderungen des Internets anpasst und entsprechend weiterführt, schafft man eine Einheit zwischen Print- und Webprodukten die auf der einen Seite die Individualität unterstreicht und somit für einen besseren Wiedererkennungswert sorgt oder aber geschickt eine Branchen- und Themenzugehörigkeit schafft.

Schriften und ihre Varianten bieten zudem eine elegante Möglichkeit Textpassagen wie Zitate oder Codefragmente auszuzeichnen, indem man für diese einen speziellen Schnitt oder sogar eine andere Schrift verwendet.

Vom Stocken und Stolpern

In der Vergangenheit wurden Bemühungen eine ähnliche Raffinesse, wie wir sie von Print-Produkten kennen, auch im Web einzusetzen, durch mehrere Faktoren behindert.

Der stärkste Faktor dabei war die Technik: Wir waren lange davon abhängig, dass der Betrachter einer Seite die verwendete Schrift auch auf seinem eigenen Rechner installiert hatte. Gerade sehr seltene oder teure Schriften waren somit de facto nicht fürs Web verfügbar. Oder wir mussten auf Umwege ausweichen, indem der Text beispielsweise als Bild dargestellt wurde - Mit allen dazugehörigen Nachteilen wie fehlender Lesbarkeit für Suchmaschinen oder längerer Ladezeiten. Sollte eine Schrift tatsächlich eine annehmbare Verbreitung gehabt und eine Verwendung auf der Website erlaubt haben, wurden sie von den Browsern meist sehr grob dargestellt (Sichwort: Font Rendering).

Ein weiteres Problem war die geringe Verfügbarkeit von Lizenzierungsmodellen seitens der Schriftenverlage, die eine Verwendung im Internet vorsahen, wodurch man sich sehr schnell im legalen Graubereich bewegte. War eine entsprechende Lizenz verfügbar, war meistens die Zahlungsbereitschaft des Kunden nicht gegeben – die Konkurrenz verwendete schließlich auch keine besondere Schriftart und die teuer eingekaufte Schrift wurde sowieso nicht schön dargestellt.

Das Ergebnis ist, dass die Weblandschaft der vergangenen 15 Jahre von den Schriften geprägt war, die mit den PCs und den darauf installierten Programmen ausgeliefert wurden und die auch bei schlechtem Rendering noch gut lesbar waren. Übrig blieben meist Arial, Times New Roman, Verdana, Georgia und Courier New. Eine feine Gliederung der Typographie oder ein Arbeiten mit Nuancen war dem WebDesigner somit schlicht nicht möglich.

Rendering
Rendering

Alles wird Möglich

Nun hat sich in den letzten Jahren der Internetentwicklung in diesem Bereich einiges getan. Die wichtigste Neuerung dürfte die Möglichkeit sein, Schriften seitens der Anbieter einzubinden. Das heißt, dass nicht jeder Betrachter einer Website die Schrift installiert haben muss, weil diese als Teil der Website bereitgestellt wird.

Andererseits entwickelten sich die Browser weiter und sind nun in der Lage, auch feinste Schriftzeichnungen akkurat darzustellen, die Lesbarkeit auch komplexester Schriftschnitte hat sich dadurch dramatisch verbessert. Das und die Tatsache, dass die alten Browservarianten nach und nach vom Markt verschwinden, eröffnet uns die Möglichkeit, dieses Potenzial immer stärker auszuschöpfen.

Mit diesen Möglichkeiten ist auch das Bewusstsein der Kunden gewachsen, dass die Typographie eine entscheidende Rolle spielt und damit auch das Bedürftnis ihre Identität im Web wiederfinden zu wollen. Und nicht zuletzt haben auch die Schriftverlage auf die Nachfrage reagiert und angefangen entsprechende Lizenzmodelle anzubieten.

Schriftschnitte
Schriftschnitte

Was können wir tun?

Zuletzt ist die Entscheidung auch finanzieller Natur, denn während die Verwendung einer Schrift im Offline-Bereich auf einen PC reduziert ist, stellt die Verbreitung im Internet lizenztechnisch eine nicht unmaßgebliche Hürde dar. Mittlerweile sind die meisten gängigen Schriften auch mit einer entschprechenden Nutzungserlaubnis für Websites erhältlich.

Die Erlaubnis kann sich in drei unterschiedlichen Varianten ausprägen:

Variante 1: Free Fonts
Diese Schriften sind kostenlos erhältlich. Anders als man erwarten würde, wirken diese Schriften nicht “billig”. Es sind vollwertige Schriftfamilien mit einer Vielzahl an Sonder- und sprachspezifischen Zeichen die für ein breites Spektrum von Anwendungsbereichen bestens geeignet sind. Allerdings findet man in diesen Bibliotheken keine aus Microsoft Office oder der Adobe Creative Suite bekannte Namen. Durch Beiträge aus der Online-Communitiy sind hier auch einige sehr verspielte Schriftsätze zu finden.

Beispiel: Google Webfonts

Variante 2: einmalige Lizenz
Einige Schriften sind mit einer einmaligen Lizenz erhältlich, die auch die Nutzung im Web einräumt. Diese Schriften sind in der Regel kompletter (z.B.: mit zusätzlicher Unterstützung asiatischer oder arabischer Schriftzeichen). In diesen Bibliotheken finden sich auch Schriften, die bekannten Schnitten sehr ähnlich sind und sich als Ersatz anbieten. Die große Chance hierbei ist, durch eine Einmalzahlung die monatlichen Kosten niedrig zu halten, allerdings bedeutet jeder weitere Schriftschnitt (soll zum Beispiel auch eine kursive verwendet werden) zusätzliche Kosten.

Beispiel: Fontspring

Variante 3: kontinuierliche Lizenzierung
Die Königsklasse, wenn man so will, ist das Modell der kontinuierlichen Lizenzzahlungen. Hierbei wird nicht die Schrift oder gar ein besonderer Schnitt bezahlt, sondern die einzelnen Zugriffe abgerechnet. Der größte Vorteil ist, dass auf diesem Weg, die meisten großen Namen erhältlich sind (“Helvetica Neue”, “Frutiger Next”, “Avenir”, “Garamond”, “Futura”, etc.). Somit sind die meisten gebräuchlichen Hausschriften verfügbar. Auch wirkt sich ein weiterer Schriftschnitt oder gar eine zusätzliche Schriftfamilie nicht auf die Kosten aus. Der größte Nachteil ist, sollte eine Seite dramatisch an Popularität gewinnen, steigen auch die laufenden Kosten linear an.

Beispiel: Fonts.com

Fazit

Auch wenn wir gerne noch mehr Auswahl, sowohl bei den angebotenen Schriften, als auch bei den Lizenzmodellen, hätten, sind wir heute in der angenehmen Lage, zumindest eine Wahl zu haben und nicht nur auf die immer gleichen fünf Fonts zurückgreifen zu müssen. Wir können den Fokus unserer Gestaltung wieder dem Wort und seiner Darstellung zukommen lassen und müssen die Unzulänglichkeiten der Schriftdarstellung nicht mit überbordendem grafischen Eifer kaschieren um uns und unser Produkt von der Konkurrenz abzuheben. Die Arbeit wird dort geleistet wo sie hingehört: bei der Darstellung der Information, nicht der des Rahmens.

Bildquelle: http://designmodo.com/custom-web-fonts-fontface/

Schriftmaße
Schriftmaße
Jürgen Raich
Designer