Weg frei für die Typografievielfalt

Mit dem Jahr 2010 dürfte die alleinige Herrschaft der Windows-Schriften in Browsern vorbei sein. Wer seine eigene Schrift entwickelt oder etwas anderes ausprobieren will, muss nun nicht mehr mühsam und wenig barrierefrei auf Bilder oder Flash ausweichen, sondern kann diese direkt im Browser darstellen.

Mehr als 95 Prozent der Browser im deutschsprachigen Raum beherrschen die Einbettung von Schriften mit der CSS-Funktion @font-face. Was das Format der Schriftdatei angeht, gab es aber lange Zeit keine einheitliche Vorgehensweise: Während der Internet Explorer 6 das Schriftformat Embedded Open Type (.eot) verwendet, setzen Firefox, Chrome, Safari und Opera auf die TrueType (.ttf) und OpenType (.otf), während der Safari am iPhone und iPad nur Schriften im svg-Format darstellte.

.woff macht es wieder gut

Im April 2010 haben nun alle großen Browserfirmen das Web Open Font Format (.woff) beim Gremium zur Standardisierung des World Wide Web, dem World Wide Web Konsortium (W3C) eingereicht. Aktuell gibt es dieses Format in Firefox und Chrome; Internet Explorer, Safari und Opera sollen bald folgen. Mit diesem neuen Standard kann jede Schriftdatei in das notwendige Schriftformat umgewandelt und in die Website eingebaut werden.

Aber Achtung: Nachdem das Darstellen auf einer Website einer Vervielfältigung gleichkommt, könnten gewisse Lizenzen notwendig sein, auch wenn es sich dabei um Freefonts handelt. Bei letzterem ist meistens als Voraussetzung für eine Nutzung die Erwähnung und Verlinkung auf die Website des Schriftenentwicklers Pflicht. Grundsätzlich gilt, sich vor der Verwendung jeder neuen Schrift die Lizenzbestimmungen genau anzusehen.

Fonts-Anbieter

Dieser Schritt fällt weg, wenn man sich mit seinen Seiten an Web Fonts-Anbieter wendet. Die zwei bekanntesten sind Google und Typekit.

Google http://code.google.com/intl/de-DE/apis/webfonts/

Das Google Font-Verzeichnis listet Schriftarten auf, die unter einer Open-Source-Lizenz verfügbar sind und hohe Qualität gewährleisten – derzeit sind es 18 Schriften. Per Klick erzeugt Google mittels des Font API ein HTML-Fragment, welches das Stylesheet von den Google-Servern lädt; dieses macht wiederum die Font-Datei auf der einbindenden Seite verfügbar. Je nach Browser serviert Google dann eine TTF- oder eine EOT-Datei. Sowohl CSS-Datei als auch Schriftdatei liegen dabei zentral auf Google-Servern, dass heißt sie befinden sich im Cache des Nutzers und müssen nicht mehr extra heruntergeladen werden.

Typekit http://typekit.com/

Für einen Betrag von bis zu 100 Dollar ist eine umfangreiche Sammlung von rund 4.000 unterschiedlichen Schriften unter TypeKit erhältlich. Sie reicht von Open Source-Fonts bis hin zu hochwertigen kommerziellen Schriftarten. Typekit war eines der ersten Services in diesem Bereich und ist mit rund 80 Millionen Unique Usern im Monat auch das beliebteste. Typekit ist sehr einfach konfigurierbar und erlaubt eine Integration binnen weniger Minuten. Die gesamte Schriftensammlung ist zu einem recht niedrigen Preis erhältlich (zwei Seiten, fünf Fonts per Seite um 24,99 Dollar pro Jahr), womit man als Entwickler unterschiedliche Schriften auf einer Seite, als auch auf mehreren Seiten ausprobieren kann. Der Nachteil ist, dass Typekit Javascript verlangt und die Fonts nicht für die Verwendung außerhalb des Browsers gedacht sind.

Einen guten Vergleich von zehn unterschiedlichen Schriftenservices findet ihr unter

Welche Fonts für welchen Zweck?

Nachdem es im Web eine Vielzahl von Schriften gibt, stellt sich natürlich immer die Frage, welche denn für welchen Zweck am besten geeignet ist. Während für Blog-Headlines eher auffällige Display-Fonts (wie zum Beispiel Code, FF Meta Web, Museo Sans) passen, sind klassische Firmen-Websiten mit einer dezenten Brotschrift mit dem gewissen Etwas (wie Proxima Nova, Vollkorn) gut beraten. Nutzt man eine Schrift nicht nur für Überschriften oder Menüs sondern auch für Fließtexte, ist ein gutes Hinting http://de.wikipedia.org/wiki/Hint wichtig. Damit werden die Buchstaben bei kleinerer Schrift nicht herunterskaliert, sondern sind auch bei niedriger Auflösung weiterhin gut lesbar. Geeignete Schriften sind zum Beispiel Calluna oder Droid Sans – letztere ist übrigens auch für mobile Seiten gut anwendbar.