10.4    Schriftdarstellung im Web 

Die Auswahl der Schriften ist im Web etwas anders als im Printbereich, »eingeschränkter«, könnte man es nennen. Zum einen stehen die sogenannten websicheren Schriften zur Verfügung, zum anderen kommen seit wenigen Jahren – zum Glück – die Webfonts dazu, die die Auswahl enorm erweitern.

 

10.4.1    Fontrendering – das Runde muss ins Eckige 

Schriftarten werden in Form von digitalen Vektordateien erstellt. Dadurch sind diese einfach zu bearbeiten und vor allem beliebig skalierbar im Vergleich zu Bilddateien, die, aus Pixeln bestehend, eine feste Auflösung haben.

Abbildung 10.29    Kurven und Geraden mit klaren Konturen, so sehen Pfade bzw. Vektorgrafiken aus.

Bildschirme arbeiten mit Pixeln als kleinen rechteckigen Anzeigeeinheiten. So weit, so einfach. Die feinen Vektorkurven müssen nun zur Darstellung am Screen in ein Pixelkorsett gepresst werden. Und hier fangen die Herausforderungen an. Der Bildschirm muss die Kurven in eine Pixelmatrix umwandeln, was auch Rastern genannt wird. Für das Rastern sind das Betriebssystem und der Browser verantwortlich.

Die meisten Bildschirme besitzen eine grobe Pixelauflösung (was sich aktuell ja zum Teil ändert – Stichwort Retina-Displays, mehr zu diesen hochauflösenden Displays in Abschnitt 11.11.4, »Retina-Displays«), das heißt, dass die Umwandlung nur sehr grob erfolgen kann. Eine »harte« Umwandlung eines schwarzen Textes auf Basis einer reinen Schwarz-Weiß-Darstellung (1 Bit) hätte folgendes Ergebnis:

Abbildung 10.30    Pixel schwarz oder Pixel weiß – dies sind die beiden Optionen, auch bekannt unter dem Begriff Pixelschrift.

Was bei kleinen Schriftgrößen und bestimmten Schriftarten noch funktionieren mag, sorgt in den meisten Anwendungsfällen für geringe Lesbarkeit. Es gibt daher die sogenannte Kantenglättung, auch Antialiasing genannt. Diese sorgt dafür, dass kein »Treppeneffekt« entsteht, sondern versucht, die Kanten zu glätten, sodass das Schriftbild optisch ausgewogener erscheint. Hierzu werden weitere Pixel erzeugt in der abgeschwächten Schriftfarbe, die in die Hintergrundfarbe übergeht. Dadurch erscheinen die Ränder optisch glatter und sorgen für eine bessere Lesbarkeit, teilweise aber auch auf Kosten der Schärfe.

Abbildung 10.31    Beim Antialiasing werden graue Pixel ergänzt, um die einzelnen Buchstaben erkennbarer (also lesbarer) zu machen, aber einhergehend mit einer größeren Unschärfe.

Abbildung 10.32    Im Browser erfolgt das Antialiasing auch durch farbige Pixel, um die Kantenglättung und die Schärfe optisch zu optimieren.

Um die Schriftglättung noch feiner umzusetzen, werden keine grauen Pixel eingesetzt, sondern farbige. Das Schriftbild wirkt dadurch besser lesbar und etwas schärfer. Dieses Vorgehen, auch Rendering genannt, unterscheidet sich aber eben von Browser zu Browser und vor allem auch in der Darstellung im Grafikprogramm. Mit anderen Worten: Eine 12 Pixel große Arial sieht in Photoshop anders aus als später in den einzelnen Browsern. Wie genau die Schriften gerastert werden, hängt vom Betriebssystem, dem Browser und sogar dem Format der Schriftdatei ab. Dies führt dazu, dass die gleiche Schriftart in der gleichen Größe und Farbe auf unterschiedlichen Systemen leicht unterschiedlich aussehen kann. Eben weil sie unterschiedlich gerendert wird.

Abbildung 10.33    Die unterschiedlichen Fontrendering-Methoden, siehe dazu auch webtype.com/info/articles/web-font-quality

Hochauflösende Displays | Als typische Auflösungsgröße bei Bildschirmen wird gerne 72 dpi genannt. Und es gab wohl früher auch Zeiten, als 72 Pixel wirklich genau ein Inch (= 2,54 cm) auf dem Bildschirm waren. Die Bildschirmauflösungen sind gestiegen, sodass diese Richtlinie schon lange nicht mehr gilt. Je mehr Pixel auf eine Fläche passen, umso größer die ppi-Auflösung und umso kleiner wird das einzelne Pixel damit auch. Text in 12 Pixel sieht auf einem Monitor mit einer hohen Auflösung kleiner aus, einfach weil das einzelne Pixel kleiner ist.

Abbildung 10.34    Gleiche Monitorgröße, unterschiedliche Auflösung. Steigt die Pixeldichte, wird das einzelne Pixel kleiner (rechts).

Und dann kam Apple und führte mal eben so das sogenannte Retina-Display ein, das eine besonders hohe Pixeldichte vorzuweisen hat. Das einzelne Pixel ist hier nun nicht mehr zu erkennen. Die neueren Apple-Geräte haben eine Auflösung bis zu 326 Pixel pro Inch. Doch statt dass der 12-Pixel-Text jetzt entsprechend sehr klein dargestellt wird, verdoppeln Retina-Displays die Darstellungsgröße. Aus einer 12-Pixel-Schrift wird eine 24-Pixel-Schrift, die damit den gleichen Platzbedarf wie auf »normalen« Bildschirmen hat, nur mit dem entscheidenden Unterschied, dass diese nun gestochen scharf und detailliert ist. Da die Umrechnung automatisch stattfindet, muss der Webdesigner bei der Textdarstellung nichts tun. Lediglich bei Bildern wird die größere Auflösung interessant. Da es Pixelgrafiken sind, lassen sie sich nicht einfach in doppelter Auflösung darstellen ohne entsprechenden Qualitätsverlust.

Eine genaue Beurteilung der Schriftart kann also kaum im Grafikprogramm stattfinden, sondern sollte da erfolgen, wo diese auch später zu sehen ist: in den verschiedenen Browsern. Auch ein Grund, so früh wie möglich im Gestaltungsprozess vom Grafikprogramm in den Browser zu wechseln.

 

10.4.2    Websichere Schriften 

Mit Systemschriften sind diejenigen Schriften gemeint, die standardmäßig bei der Erstinstallation im Betriebssystem vorhanden sind. Jahrelang (fast jahrzehntelang) waren Webdesigner mehr oder weniger gezwungen, allein auf diese Systemschriften zurückzugreifen. Denn Text wurde (und wird) in HTML direkt im Browser erzeugt und für die Darstellung braucht(e) es eine lokal installierte Schriftart.

Die Nutzung von Systemschriften hat den Vorteil, dass keine Schriftart mit der Webseite mitgeliefert werden muss und somit Datenspeicher eingespart wird. Um die Systemschriften sinnvoll zu nutzen, ist es hilfreich, Schriftarten auszuwählen, die auf möglichst allen Systemen installiert sind. Und das war schon immer die Krux. Denn auch wenn auf modernen Betriebssystemen schon zig Schriften vorinstalliert sind, geht es darum, einen »gemeinsamen Nenner« zu finden. Doch es sind gar nicht so viele Schriftarten, die auf möglichst vielen Systemen installiert sind. Der »gemeinsame Nenner« wird dann sprichwörtlich zum »kleinsten gemeinsamen Nenner« – die oft genannten »websicheren Schriften«. Also die Schriftarten, die so ziemlich jeder Anwender auf seinem System installiert hat, bzw. diejenigen, die diese Schriftarten nicht haben, sind zu vernachlässigen.

Abbildung 10.35    Der kleinste gemeinsame Nenner an Systemschriften

Lange, lange Zeit war dies (siehe Abbildung 10.35) der Supermarkt der Schriftarten für Webdesigner. So gering die Auswahl auch ist, so gut lassen sich diese Schriftarten für Screens einsetzen, zumindest fast alle. Die websicheren Schriften haben eine einfache Formensprache und optimierte Darstellung am Bildschirm. Gerade bei kleinen Texten, auf Webseiten wie im Betriebssystem, kommt diese Eigenschaft daher besonders zum Tragen.

Ein unschlagbarer Vorteil ist das auch gegenüber vielen der neuen Webfonts. Und auch wenn die Auswahl eingeschränkt ist, lassen sich die websicheren Schriften vielfältig, kreativ UND gut lesbar einsetzen.

Abbildung 10.36    Das Bookmarklet FFFFALLBACK hilft bei der Suche nach den richtigen Fallback-Fonts: ffffallback.com

Fallback-Fonts | Für jede Schriftart, die man einsetzen möchte, sollte man mindestens eine Alternative definieren, einen sogenannten Fallback. Dies sieht dann ungefähr folgendermaßen aus:

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

Listing 10.1    Fallback definieren

Zuerst soll die Arial eingesetzt werden, ist diese nicht auf dem jeweiligen System vorhanden (eigentlich kaum vorstellbar), dann soll die Schriftart Helvetica Neue genommen werden. Ist diese auch nicht installiert, dann eine andere serifenlose Schrift (irgendeine wird ja wohl installiert sein). In CSS gibt es verschiedene vordefinierte generische Fallback-Schriftarten: serif (Serifenschrift), sans-serif (serifenlose Schrift), cursive (Schreibschrift), fantasy (ungewöhnliche Schrift) und monospace (Schrift mit gleicher Zeichenbreite). Gebräuchlich sind vor allem die ersten beiden Fallback-Angaben.

Abbildung 10.37    CSS Font Stack liefert eine Übersicht über erweiterte websichere Schriften, die Verbreitung auf den Betriebssystemen Mac und PC sowie passende Fallback-Angaben. cssfontstack.com

Die Auswahl an websicheren Schriften ist durchaus ernüchternd klein, gerade wenn man die Auswahl im Printdesign kennengelernt hat. Nichtsdestotrotz haben es viele Webdesigner geschafft, auch mit dieser geringen Schriftauswahl individuelle und gut lesbare Designs zu erstellen.

 

10.4.3    Webfonts 

Dinge ändern sich, auch und gerade in der Webtypografie. Nach unterschiedlichen Experimenten unter anderem mit Flash und JavaScript (z. B. sIFR), die aber selten für die breite Masse tauglich waren, erfreuen sich seit ein paar Jahren die sogenannten Webfonts allgemeiner Beliebtheit.

Voraussetzung für den Durchbruch war einerseits die CSS-Eigenschaft @font-face, mit der sich externe Schriftarten einbinden lassen. Die Eigenschaft gibt es zwar schon viele Jahre, aber es existierte lange kein Schriftformat, das von allen Browsern ausreichend unterstützt wurde. Dieses wurde erst 2009 mit dem Web Open Font Format (WOFF) definiert.

Um Webfonts einzusetzen, gibt es zwei Möglichkeiten: die Schriften selbst zu hosten oder einen der inzwischen zahlreichen Webfonts-Anbieter zu wählen.

Selbst hosten | Wer die volle Kontrolle haben will, sollte die Schriften auf dem eigenen Server ablegen. Hier ist man unabhängig von eventuellen Auslieferungsproblemen der Fremdanbieter.

Ein hilfreiches Tool ist der Webfont Generator von fontsquirrel.com. Hier lässt sich aus beliebigen Schriftarten ein Webfont inklusive vielfältiger Einstellungsmöglichkeiten erzeugen.

Das Ergebnis ist ein CSS-Code ähnlich dem folgenden, der die Anforderungen verschiedener (auch älterer) Browser abdeckt:

@font-face {
    font-family: 'myFont';
    src: url('myFont.eot'); /* IE9 */
    src: url('myFont.eot?#iefix') format('embedded-opentype'), /* IE6 - IE8 */
         url('myFont.woff') format('woff'), /* Normale Browser */
         url('myFont.ttf') format('truetype'), /* Safari, Andoird, iOS */
         url('myFont.svg#myFont') format('svg'); /* alte iOS */
    font-weight: normal;
    font-style: normal;
}

Listing 10.2    Quellcode zur Einbindung eigener Schriften

Abbildung 10.38    Der Webfont Generator von fontsquirrel mit seinen vielfältigen Einstellungsmöglichkeiten: fontsquirrel.com/tools/webfont-generator

Beim Anwender muss die Schriftart also nicht mehr installiert sein, sondern wird nach Bedarf hinzugeladen. Klar, die verschiedenen Schrift-Dateiformate für die unterschiedlichen Browserbedürfnisse müssen entsprechend auf dem Server abgelegt werden, damit sie von dort geladen werden können.

Webfonts-Anbieter nutzen | Gerade die Problematik mit verschiedenen Schriftformaten für unterschiedliche Browser lässt sich umgehen mit der Wahl eines externen Anbieters (auf die verschiedenen Anbieter gehe ich gleich noch ein). Dieser stellt die Schriften für den Einsatz zur Verfügung. Auch lassen sich bei den Anbietern verschiedene Schriftarten austesten. Man muss also nicht zuerst eine Schriftart kaufen, um sie dann einsetzen zu können in der Hoffnung, dass sie auch wirklich wie gewünscht passt. Dafür hat man die Schriftarten sozusagen nur gemietet und zahlt eine Art Leihgebühr.

Ladeverhalten | Müssen die Schriftarten erst von einem externen Server hinzugeladen werden, kann dies einen kleinen Moment dauern. Und selbst wenn es wirklich nur ein kleiner Moment ist, kann es bedeuten, dass der Text geladen und im Browser angezeigt wird, aber der Webfont noch nicht zur Verfügung steht. Der Text wird dann bei den meisten Browsern während des Ladevorgangs mit der Fallback-Schriftart dargestellt. Ist der Webfont geladen, switcht die Darstellung um. Dieser Wechsel sieht nicht schön aus und ist unangenehm für den Betrachter bzw. für dessen User Experience. Passende Fallback-Schriften sollten also auch beim Einsatz von Webfonts definiert werden.

 

10.4.4    Webfonts-Anbieter 

Seit die Webfonts im Jahre 2009 ihren Siegeszug antraten, sind jede Menge Anbieter auf den Markt gekommen. Von Google bis zu traditionsreichen Schriftanbietern sind viele dabei. Im Folgenden ein Überblick über die bekanntesten Webfonts-Anbieter, der bei Weitem keinen Anspruch auf Vollständigkeit erhebt:

Typekit | 2009 als Start-up gegründet, gehört es inzwischen zu Adobe und bietet jede Menge qualitätsvolle Webfonts an. Es ist ein reiner Hostingdienst mit Abonnementmodell. Man zahlt einen Jahresbeitrag (zwischen 25 und 100 US$), und je nach Paket hat man dann eine bestimmte Anzahl von Schriften, Projekten und monatlichen Seitenaufrufen zur Verfügung. Zum Austesten gibt es auch eine kostenfreie Variante mit Einschränkungen der Schriftbibliothek und Einblendung eines Werbebanners.

Abbildung 10.39    Die Fontauswahl bei typekit.com

Abbildung 10.40    Eine umfangreiche Auswahl bietet fonts.com.

fonts.com | Der Anbieter mit dem größten Sortiment – über 20.000 Schriftschnitte. Hier finden sich vor allem auch die Schriftklassiker wie Frutiger, Rotis oder Univers, die gerne Hausschriften etablierter Unternehmen sind. Diese gibt es oft noch in einer Next-Variante, also extra für die Darstellung am Screen optimiert. Die Monatsraten gehen von 10 bis knapp 100 US$ pro Monat.

Google Fonts | Kostenlos, wohl das größte Argument für die Google Fonts im Vergleich mit den anderen Anbietern. Über 500 Schriftarten, teilweise mit mehreren Schriftschnitten, stehen unbegrenzt zur freien Verfügung. Kostenlos kann das Angebot nur sein, da die Schriften unter Open-Source-Lizenz stehen. Größtenteils sind es daher frische, oftmals unbekannte Schriftarten von Nachwuchs-Schriftentwicklern, zwischendrin ein paar Klassiker (z. B. eine Garamond). Daher ist insgesamt viel Ausschuss dabei, aber es gibt auch durchaus einige Perlen unter ihnen. Wie bei Google-Produkten üblich, sind die Auswahl und das Einbinden der Schriftarten schnell und unkompliziert. Als kostenfreier Service unschlagbar, bei der Auswahl kommt man mit Google Fonts allerdings schnell an die Grenzen.

Abbildung 10.41    Kostenlos und beliebt – die Google Fonts, google.com/fonts. Und seit Kurzem bietet Google auch eine alternative Ansicht an: fonts.google.com.

FontSquirrel | Der zweite kostenlose Anbieter neben Google Fonts mit über 800 Schriftarten. Die Schriften lassen sich kostenfrei herunterladen und dann selbst hosten. FontSquirrel stellt dabei ein vollständiges @font-face-Paket zusammen, welches sich dann unkompliziert auf der eigenen Webseite einbinden lässt. Ähnlich wie bei Google sind die meisten Schriftarten in ihrer Qualität eingeschränkt. Dazu kommt, wie oben gesehen, ein Konvertierungstool, um vorhandene Schriftarten in Webfonts umzuwandeln.

Abbildung 10.42    Viele kostenfreie Schriften bei fontsquirrel.com

Abbildung 10.43    Eine nette Auswahl an Google Fonts und typografischer Gestaltung zeigen meine Webfonts-Showcases: hahnsinn.com/webfonts.

SCHRITT FÜR SCHRITT

Google-Webfonts einbinden

Webfonts in das eigene Projekt einzubinden ist recht schnell gemacht und wird im Folgenden am Beispiel von Google Fonts demonstriert.

1 Schriftart aussuchen

Zuerst heißt es eine Schriftart aus der Google-Fonts-Bibliothek suchen und auswählen. Je nach Schriftart stehen mehrere Schnitte zur Verfügung, die sich mit einem Häkchen auswählen lassen. Achtung: Nur die Schnitte einbinden, die später wirklich eingesetzt werden, ansonsten werden unnötige Daten geladen.

Abbildung 10.44    Der Font Open Sans steht in zehn unterschiedlichen Schnitten zur Verfügung.

2 Einbindungsvariante auswählen

Wählen Sie aus den drei Einbindungsvarianten (HTML, CSS oder JavaScript) eine aus.

Abbildung 10.45    Der fertige Code zum Einbinden der Schriftschnitte und der Quellcode zur Schriftdefinition werden auch gleich mit angezeigt.

3 Die »font-family« und gegebenenfalls Schriftschnitte definieren

Ist die Schriftart eingebunden, steht einer Nutzung in CSS nichts mehr im Wege. Zuletzt müssen nur noch die font-family und eventuelle Schnitte mit font-weight definiert werden:

font-family: "Open Sans", Arial, sans-serif;
font-weight: 300;

Listing 10.3    Definition der Schriftart und des Schriftschnitts

Fazit | Wer die Wahl hat, hat die Qual, aber es lohnt sich zu vergleichen. Geduld ist bei der Suche und Auswahl des passenden Webfonts auf jeden Fall gefragt. Für den Einstieg ist sicherlich Google Fonts günstig (im doppelten Sinne). Die Frage nach dem besten Anbieter kann nicht pauschal beantwortet werden. Jeder muss für sich bzw. das jeweilige Projekt den passenden Anbieter auswählen. Die Unterschiede in Schriftauswahl, Preis(modellen) und Nutzungsbedingungen sind teilweise erheblich. Aber bei allen Anbietern gestaltet sich das Einbinden der Fonts unkompliziert. Fast alle modernen Webseiten bauen auf Webfonts. Nicht jedem Trend muss man hinterherrennen, aber diese Entwicklung wird bleiben. Die Möglichkeiten und der kreative Gestaltungsspielraum erhöhen sich um ein Vielfaches.

 

10.4.5    Text als Bild 

Dank Webfonts und den neuen Gestaltungsmöglichkeiten mit CSS3 (Schatten, Verläufen etc.) ist es nur noch sehr selten notwendig, Texte als Bilder abzuspeichern. Was »früher« regelmäßig passierte, machen die neuen Technologien größtenteils überflüssig. Text als Bild abzuspeichern und in die Webseite einzubinden wird meistens dann gemacht, wenn Effekte auf dem Text liegen und/oder eine besondere Schriftart genommen werden muss, die auch bei den Webfonts nicht zur Verfügung steht. Das trifft z. B. auf ausgefallene dekorative Schriften zu, bei denen die einzelnen Buchstaben besonders angeordnet sind und die sich mit HTML und CSS nicht oder nur beschwerlich umsetzen ließen.

Abbildung 10.46    Fehlt in keinem Typografie-Showcase, für die Überschrift musste allerdings dann doch als Bild erstellt werden bei amazeelabs.com/de.

Auch Buttons oder besonders gestaltete Navigationspunkte waren klassische Beispiele, wo Text als Bild eingesetzt wurde. Nachteile waren schon immer zum einen die Pflegbarkeit der Inhalte, da jedes Mal ein Bild geändert, neu abgespeichert und hochgeladen werden musste. Und der Datenspeicher erhöht sich mit jedem Bild natürlich auch.

Logos sind fast die einzig verbliebenen Elemente, wo Text als Bild noch wirklich Sinn hat. Heute wie früher sollte ansonsten gut überlegt sein, ob man einen Text wirklich als Bild abspeichern muss oder es nicht doch mit den zur Verfügung stehenden HTML- und CSS-Möglichkeiten umzusetzen geht.

Abbildung 10.47    Das Logo als Bild bei mgk-siegen.de. Der Schriftzug hätte sogar per HTML und CSS dargestellt werden können, das Bildzeichen aber nicht.