WebFonts – eine Übersicht

Schriftarten im Web – was ist bereits heute möglich und wo sind die Unterschiede?

Inzwischen gibt es viele Dienste, die auf einfache Weise verschiedenste Schriftarten sogar im Browser darstellen lassen. Ein Feature, das man sich lange Zeit gewünscht hatte, denn bisher konnte man nur einige Standardschriften (Arial, Verdana, Courier, etc.) einsetzen. Und nicht einmal dann konnte man sicher sein, welche Schriftart der Besucher der Seite angezeigt bekommen würde. Mittlerweile ist es kein Problem mehr, die ausgefallensten Schriftarten im Web darzustellen. Die Frage ist nur wie, womit und wie es dann weitergeht.

Die Vorgeschichte

Anfangs behalf man sich mit Bild-Replacement Methoden, die mehr oder minder zu einem riesen Usabilityproblem wurden. Einige Softwares wie sIFRcufón und andere Konsorten. Die erstgenannten Methoden erhielten großen Zulauf und verbreiteten sich schnell. Doch keine der Lösungen war wirklich schön umsetzbar oder gar bedienbar für den User, weshalb viele doch wieder darauf verzichteten.

Dank CSS3 Entwürfen mit neuen Schriftart Einbindungsmöglichkeiten via @font-face Regelung wurde die Diskussion neu genährt. Und prompt interessierten sich die Browserhersteller dafür. Mozilla Firefox sowie die Safari und Chrome Mutter WebKit lernten diese neue CSS3 Möglichkeit schnell, wenn auch mit diversen Kinderkrankheiten. Wie immer spielten einige Hersteller wie Microsoft (Internet Explorer) nicht mit (nur MS-eigenes Format) und nach wie vor gibt es ein Problem mit den Schriftdateien, deren Lizensierung und einem gemeinsamen Standard. Hierzu verweise ich auf einen Vortrag von Gerit van Aaken, der sich gesondert damit beschäftigt hat.

Das Problem der Vielfalt

Im letzten Jahr vermehrten sich die Services rasant. Die großen 4 stelle ich anschließend vor und vergleiche ein wenig miteinander.

typekit.com

Typekit ist der wohl populärste Dienst mit einer umfangreichen Schriftsammlung und extrem vielen Möglichkeiten. Er ist allerdings nicht wirklich kostenlos, ab 24,95$/Jahr ist der Service nutzbar. Zwar gibt es einen Free-Account, der jedoch ein Branding und sehr große Einschränkungen aufweist. Die Low-Level Pläne sind knapp bemessen, es sind nur 1–2 Domains und ⅖ Schriften einsetzbar. Der Traffic wird nicht in Speicher sondern in Besucherzahlen abgerechnet und bietet auch im Einsteigeraccount genug Platz. Der »Portfolio« Plan lässt kaum Wünsche offen, hat als einzige Einschränkung 500.000Pageviews/Monat und kostet 49.99$/Jahr.

Es werden über 500 Schriftfamilien angeboten, die im Backend durchstöbert und getestet werden können. Um besser vergleichen zu können, kann man mehrere Schriftarten untereinander stellen. Je nachdem, wie man gerne den Code schreibt, kann man direkt im Backend die CSS Klassen zuweisen und gestalten oder wie bisher dies direkt in der CSS Datei tun. Für jede Schriftart wird jeweils nur der eingestellte Schriftschnitt ausgegeben, was Traffic spart und die Ladezeit verkürzt. Zudem kann man Fallbacks mit einbauen für Browser, die die @font-face Regel nicht beherrschen.

Typekit verwendet Javascript, um die Daten zu laden.

Google Font Directory/API

Google bietet seit geraumer Zeit einen kostenfreien Dienst an, über den man Schriftarten via CSS oder Javascript auf der eigenen Webseite einbinden kann.

Die Auswahl der Schriftarten ist zu Zeit noch sehr begrenzt (Stand: 9⁄2010) und bietet derzeit 19 Schriftarten an, einige davon mit verschiedenen Schnitten. Die einfache Struktur, die keinerlei Anmeldung benötigt, stellt eine Vorschau bereit, die verschiedenen Schriftschnitte und einen Code, der schnell und mit einfacher Auswahl die Schriftart einbetten lässt. Die nötigen Schriftschnitte können an‑ und abgewählt werden. Standardmäßig wird ein HTML-CSS Code ausgeliefert, es kann allerdings eine Technik für „Fortgeschrittene“ eingeblendet werden, die dann Variationen via Javascript und dem sog. »WebFont Loader« zulässt. Außerdem kann die Schriftart auch heruntergeladen werden.

Die Performance ist mit Typekit (mit dem eine Kooperation mit Google Fonts besteht) eine der besten unter den angebotenen Lösungen, was durch die bestehende Google Code Infrastruktur nicht sonderlich verwundert. Die Lösung ist ab Internet Explorer 6, Firefox 3.5, Opera 10.5 und Safari 3.1 sowie Chrome 4.25 gängig, leider jedoch nicht unter iPhone, iPad und Adroid. Dank OpenSource Lizenzen seitens Google braucht man sich hier absolut keine Sorgen um Rechte zu machen.

Wem die wenigen Schriftarten reichen, die Google bei seiner Lösung bietet, dem sei diese Lösung dank simpler und ultra-flexibler Struktur ans Herz gelegt.

WebINK.com

WebINK steht noch in den Kinderschuhen und ist erst im August 2010 an den Start gegangen. Die Firma Extensis, die das Produkt betreibt ist bekannt für seine Schriftverwaltung Suitcase. Der Service ist etwas günstiger und startet ab 0.99$/Monat (~12$/Jahr). Dafür gibt es überhaupt keinen Free-Plan. Jeder Plan hat jedoch eine Begrenzung auf 4 Domains (inkl. beliebig vielen Subdomains). Eine meiner Meinung nach sehr starke Restriktion, die bei Preisen bis 19.99$/Monat nicht bestehen sollte. Hier ist man scheinbar noch ein bisschen unflexibel oder überängstlich dem Web gegenüber.

Die angebotenen Schriftarten sind allesamt nur sehr gute, überprüfte Schriften, die keine Mängel aufweisen. Dennoch ist die Auswahl mit über tausend Schriften sehr vielfältig und lässt kaum Wünsche offen. Die Auswahl wird jedoch je nach bezahltem Plan eingeschränkt. Ebenso die Bandbreite, die jedoch großzügig bemessen wird.

Im Backend der Software durchsucht man die Library, wählt eine Schriftart aus und kann diese dann der Webseite hinzufügen. Ein simples System, das Spaß macht.

Eingebunden wird jede Schrift über die @font-face Regel. Hier verlinkt man als Quelle auf den WebINK Server mit einem speziell generierten Authentifizierungscode. Den Rest, wie z.B. das Schriftformat, erledigt deren Server. Ungünstig bei dieser Methode ist der verschachtelte DNS Aufruf. Ansonsten bietet sich die Lösung durchaus als praktikabel an. Die Kompatibilität besteht ab InternetExplorer 4.0, Firefox 3.5(!), Chrome 4.0, über Opera wird nichts geschrieben, aber es sollte wohl ab Version 9.5 kompatibel sein. Die Lizensierung der Schriften und sämtliche rechtlichen Angelegenheiten übernimmt der Anbieter selbstverständlich selbst.

Technisch liegen die Schriften auf Amazon S3 Speicher, der bekanntlich sehr gute Performance und Sicherheit bietet. Dank Komprimierung wird sogar noch Bandbreite gespart, der Ladevorgang verkürzt sich deutlich. Schließlich kann eine Schriftart normalerweise durchaus einige Megabyte groß sein.

Monotype/Linotype WebFonts

Ganz frisch auf dem Markt präsentiert sich die Lösung von Monotype Imaging. Nach einer relativ kurzen, geschlossenen Betaphase mit enormen Entwicklungen, stellt die Lösung eine der umfangreichsten dar. Mit über 7.500 Schriftarten und vor allem bekannten Schriftfamilien wie die Helvetica, Frutiger oder ähnliche Größen, ist das Portal sehr interessant. Auch sind mehr als 40 Sprachen verfügbar. Da hier jedoch große Datenmengen entstehen würden zum Download (z.B. Chinesisch ca. 10MB), verwendet man hier ein patentiertes Ladesystem, das nur die jeweils benötigten Charaktere herunterlädt und so sehr effizient ist.

Bezahlt man einen gewissen Standard für die Lösung, gibt es sogar Schriftdownloads dazu (bis zu 50, 1 Monat gültig), um Mockups oder ähnliches perfekt gestalten zu können. Beim Browsersupport ist man ab dem Firefox 3.5, Opera 10.10, Internet Explorer 4, Chrome 4 dabei. Es wird aber auch zusätzlich der Apple Mobile Safari ab 3.0 unterstützt, auf dem iPhone oder iPad sind die Schriften also auch darstellbar.

Für die Einbindung hat man sich ein kluges System ausgedacht. Über das Webinterface wählt man die Schriftart und fügt sie dem Projekt hinzu. Dann kann man ein Stylesheet erstellen (wie bei TypeKit) indem man CSS Selektoren mit der Schriftart versieht. Abschließend muss man nur noch einen JS/CSS Code mit einem Authentifizierungskey in die Webseite einbinden und schon sieht man die Webseite mit der neuen Schriftart.

Das schöne: auch beim Free-Plan sind beliebig viele Domains und Subdomains inklusive, zusätzlich kann der Code auch via SSL geliefert werden.

Der Free-Plan ist auf 2.200 Schriften und 25.000 Seitenaufrufe pro Monat beschränkt. Es können beliebig viele Schriften und beliebig viele Webseiten benutzt werden. Ab 2011 wird zusätzlich ein kleiner Badge in der rechten, unteren Ecke nötig, wie bei TypeKit bereits der Fall. Der „Standard-Plan“ für $10 (USD) bietet die volle Bibliothek und ist nach oben hin bzgl. Seitenaufrufe anpassbar, daher ist das System auch mitwachsend und ultra-flexibel. Der Desktop-Download wird beim „Professional-Plan“ ab $100 mitgeliefert, ist daher auch nur für große Agenturen relevant, die sich an Pitches mit Mockups u.ä. beteiligen.

Ein kleines Fazit

Natürlich – man muss abwägen, was man braucht. Dazu sollte man überlegen, welche Schriftarten man benötigt, ob eine kostenlose Lösung (z.B. Google Fonts) ausreichend ist und wie viel Traffic über die Webseite gelangen wird.

Dennoch gebe ich als Fazit Monotype WebFonts als eindeutigen Favorit an. Die Lösung leistet zu kleinem Preis am meisten. Eine riesen Bibliothek, kaum Einschränkungen außer Traffic und sehr gute CSS-Technik rennt TypeKit den ersten Platz ab. Letztere Lösung ist durch die Javascript-Methode und eine kleinere Bibliothek schlicht im Nachteil.

Das Problem der Technik

Technisch gibt es zwei Möglichkeiten, die heutzutage verwendet werden: die Einbindung der Schriftdaten über Javascript oder via CSS. Letztere Möglichkeit ist deutlich zu bevorzugen, da hier alle User bedient werden können und die Performance meist ebenfalls besser ist.

Beide Lösungen haben das Problem, dass die Daten nur verlinkt werden und selbst auf Servern der Anbieter (in der Cloud) liegen. Performanceprobleme tauchen immer wieder auf, der Entwickler und User ist Abhängig von den Serverleistungen anderer. Gerade bei kleineren Anbietern kommt es daher häufig zu Fehlern. Google legt zwar von der Serverleistung und seiner komplexen Infrastruktur eine sehr gute Performance vor, dennoch ist eine zusätzliche DNS Abfrage nötig, die die gesamte Performance der Webseite beeinträchtigt. Heutzutage kann sich das sogar auf das Google Suchranking auswirken. Eine Kontroverse, die nicht zu vermeiden ist.

In allen Fällen ist der Webentwickler abhängig von externen Firmen. Diese können über die Schriften bestimmen, wie sie möchten. Und sollte sich das angebotene Produkt nicht rentieren schaltet man den Service ab, der Entwickler und seine Website stehen hilflos da oder merken dies noch nicht einmal.

Was bringt die Zukunft?

Na gut, was die Zukunft bringen wird, das weiß keiner. Zu hoffen ist, dass die Browserhersteller bald eine Möglichkeit finden, mit Schriftrendering besser und einheitlicher zu verfahren. Hoffen wir ebenfalls, dass sich noch einiges bei den oben genannten Anbietern tut, so dass wir in den nächsten Jahren tatsächlich konkurrierende Produkte haben, die qualitativ gute Lösungen für Webmaster bieten und vielleicht auch andere Anwender bringen.

Monotype Imaging bereitet als erster schon ein tolles Konzept mit dem bezahlten „Desktop-Download“ System vor, das die rechtlichen Aspekte und auch finanzielle Aspekte für eine Agentur deutlich vereinfacht und reduziert. Das ist sehr begrüßenswert, allerdings ist die Lösung natürlich immer noch vollkommen unpraktikabel für Normalanwender, da der horrende Preis nicht für jeden aufbringbar ist. Schade, hätte man doch einfach in der Anzahl der downloadbaren Schriften pro Monat preislich variieren können. Hoffen wir, dass sich hier noch etwas tut, schließlich besteht das Problem der vollkommen überteuerten Schriften auf Grund eines unzureichenden Konzeptes der Vermarktung/Anwendung/Flexibilität, noch immer.

Für Interessierte gibt es am 13. November 2010 in München den „WebFont Day“ mit vielen interessanten Vorträgen zum Thema und auch Stellvertretern der namhaftesten Schrifthändler…

Veröffentlicht von

Anselm Hannemann

Anselm Hannemann ist Inhaber der Novolo Designagentur und beschäftigt sich mit sowohl mit Drucksachen als auch mit Webprojekten. Für seinen eigenen Agenturblog schreibt er bereits seit längerem einige Artikel über den Bereich der Medienwelt mit bunter Mischung zwischen Fachartikeln und kleinen Tipps für Laien. Er ist mitwirkend im Mediengestalter.info Forum und ist Standortleiter der InDesign User Group München.

2 Gedanken zu „WebFonts – eine Übersicht“

  1. Interessanter Artikel. Habe gerade erst mein erstes Projekt mit der Google-API umgesetzt. Einfacher geht es nicht.

    Kleiner Hinweis: Laut meiner Buchungsbestätigung ist der Webfontday erst am 13. November.

Kommentare sind geschlossen.