Der Kampf um den Webfont

Wie man Babetta und ihre Freunde auf (beinahe) allen Geräten richtig performen lassen kann.

Geschätzte Lesezeit: 8 Minuten

Die Webschrift! Wer von Ihnen hat eine?

1, 2, 3, 4 … fragen wir einmal anders: WER benutzt KEINEN Webfont?

Screenshot der Babetta Schriftfamilie auf Myfonts
Die Babetta Familie von Viktor Nübel wurde von Neonschriftzügen auf Fassaden historischer Geschäfte inspiriert.

Sehen Sie? Sie sind auch schon angesteckt vom Typo-Hype des Web. Es ist auch zu verführerisch, endlich schöne Schriftbilder und attraktive Corporate Typography in seine Internetpräsenz mit integrieren zu können. Es gibt nur ein Problem dabei: Auf der einen Seite stehen Sie und Ihre Website. Auf der anderen Seite ein Heer von alten und neuen Geräten. Desktop Windows, Desktop Mac, Desktop Linux, Tablet Android, Tablet Windows, Pad i, Smartphone Nokia Auslaufmodell, Smartphone Windows Phone, Smartphone i, Hybride aus Touch und Desktop, Zwitter aus Smart und Tablet … Sie wissen, was ich meine. Sie mit Ihrer Website sind allein gegen 1001 Devices. Dazu gibt es ganz schön viele Browser und ihre Versionen. Chrome und Iron sind sensibler als Alleskönner Firefox. Opera performt hervorragend kann aber einige CSS3 Einstellungen noch nicht. Der Explorer 10 kann CSS3 sehr gut, hadert aber manchmal mit JavaScript. Safari wird immer wichtiger, ist aber der Schwierigste, wenn es um Schriften geht. Und dazu kommt noch die Sache mit den öffentlichen oder auch geschlossenen W-Lans und ihren Sicherheitseinstellungen. Und den Firewalls mit ihrem Kinderschutz und, und, und …

Wo ist das Problem?

Es klingt wie ein Widerspruch, aber das Problem liegt darin, dass die meisten mobilen Geräte darauf optimiert werden, ideal und sicher zu performen. Externe Linkquellen, wie sie beispielsweise bei Google Fonts oder Fonts.com angeboten werden, gehören nicht zu einer idealen und sicheren Performance. Aus diesem Grund werden Webfonts, die über Links oder Scripte via Fremdserver in das Seitendesign gesaugt werden, von so manchen mobilen Geräten unter bestimmten Umständen nicht in die Anzeige der Website integriert.

Was heißt das konkret?

Der EINZIGE Weg, sicherzustellen, dass der ausgesuchte Webfont auf 95 % aller möglichen Geräte angezeigt wird, ist die Integration aller Formate über den eigenen Server und das Stylesheet.

Wie nutze ich Webfonts für meine Internetpräsenz?

Man braucht seine Schriften als Webfonts. Webfonts unterscheiden sich von Desktop-Fonts in ihrem Format. True Type allein ist nicht webgerecht. Wer nur eine True Type Font hat, kann Glück haben, manche Browser können sie interpretieren. Manche jedoch nicht. Also muss man zu allererst einen Webfontkit mit jeweils einem TTF (True Type – Firefox, Safari, Chrome, Opera), einem SVG (Scalable Vector Graphics – iProdukte, Safari, Chrome, Opera), einem EOT (Embedded Open Type – Explorer) und einem WOFF (Web Open Font Format – Firefox, Explorer 9, Chrome, Safari, Opera) Schriftformat erwerben oder herstellen. Auf diese Weise bedient man alle gängigen Browser, auch ältere Versionen, mit den für sie entwickelten Fontformaten. Derzeit sieht es so aus, als würden sich die Schrifthersteller auf WOFF einigen, da in diesem Format Metadaten wie beispielsweise Lizenzinformationen eingebettet werden können. WOFF ist seit 2012 auch W3C Standard. Ob sich SVG und EOT langfristig halten werden, und ob WOFF das Rennen als einzige Webfontvariante machen wird, das wird die Zukunft zeigen.

Woher bekommt man Webfont-Kits?

Viele Schriftanbieter ermöglichen einen Download von Webfonts, in dem das Gesamtpaket bereits fertig geschnürt ist. Es gibt Gratisfonts ebenso wie Schriftschnitte, die zwischen 5 und 500 Euro oder mehr kosten. Sowohl Funfont-Anbieter als auch professionelle Shops haben interessante Angebote. Man kann mit Freefonts sehr schöne Ergebnisse erzielen. Wobei man bedenken sollte, dass gute Schriften von guten DesignerInnen entworfen werden, Typodesign ist eine eigene künstlerische Expertise. Wer beste Qualität möchte, die von großen Talenten entworfen wurde, darf nicht erwarten, deren Werke gratis zu bekommen. Doch egal ob Freefont oder nicht, wichtig ist, darauf zu achten, dass man explizit die Lizenz fürs Web erwirbt, nicht (nur) für den Desktop. In vielen Fällen wird bei Gratisschriften auch die Unterscheidung zwischen privater und geschäftlicher Lizenz gemacht.

Google Fonts sind frei. Es gibt darunter ein paar schöne Schnitte. Obwohl ich bisher erst eine einzige präzise gesetzte Serifenfließtextschrift unter ihnen gefunden habe, kann man doch schöne Schriftbilder mit ihnen erzeugen. Google bietet die Einbettung der Fonts über externe Links zu Googleservern an, doch davon rate ich aus oben besprochenen Gründen ab. Viel zu oft bleibt die Lieferung der externen Fonts an irgendeiner Hürde hängen.
Die Google Schriften werden auch als Download angeboten. Allerdings bekommt man nur jeweils eine TTF im ZIP Päckchen geliefert. Man kann TTF Fonts als Desktopschrift installieren. Doch für das Internet reicht das nicht. Man braucht das volle Webfont Paket. Und das kann man bekommen, indem man einen Font-Konverter von TTF nach Webfonts benutzt.

Darf man Google Fonts durch einen Onlinekonverter jagen?

Ja. Ausdrücklich. Die Google Fonts werden mit einer offenen Lizenz ausgegeben, die Derivate und Weiterverarbeitung zulässt – vorausgesetzt, man verkauft sie nicht weiter. Welche Fonts man sonst noch konvertieren darf, kann man über die Lizenzverträge erfahren, die meistens beim Download von Schriften mitgeliefert werden.
Ich benutze für die Umwandlung von Googlefonts gerne Fontsquirrel. Die Ergebnisse werden sehr schön, sind ausgewogen und das CSS-Integrationspaket wird gleich mitgeliefert.

Ich habe ein komplettes Webfontpaket, wie geht es nun weiter?

Das Paket mit allen Fonts braucht einen sicheren Ort auf dem Server. Bitte nicht in original Theme-Folder oder Plugin-Ordner kopieren, denn da ist die Gefahr groß, dass die Fonts nach einem Update auf Nimmerwiedersehen verschwinden. Über den CSS-Hook @font-face mit den Pfaden zu den Fonts (einschließlich dem IE fix für die EOT) holt man sich die Schriften in sein Stylesheet. Die Font-Family kann theoretisch nach Belieben benannt werden, aber allein schon aus Respekt vor den DesignerInnen sollte man den Originalnamen beibehalten. Viele Lizenzen verlangen dies auch. Anschließend kann man seine Schriften regulär in seine font-family CSS-Angaben aufnehmen. Die meisten Geräte sollten jetzt in der Lage sein, die Schriften zu erkennen und zu interpretieren.

Was mache ich mit den Geräten, die meine Webfont trotzdem nicht anzeigen?

Gute, alte Systemschriften. Windows hat eigene, Mac hat eigene, Android hat mit Droid und Roboto wieder eigene und das Windows Phone hat auch eigene. Nokia ebenso. Wer sich eine Expertise als guter Webtypograf aneignen möchte, sollte sie auswendig kennen und je nach Webfont geeignete Pendants aussuchen. Die man dann der Reihe nach in die Liste der möglichen Font-Families via CSS integriert.

Lohnt sich der Aufwand überhaupt? Kann ich nicht auch mit Systemschriften glücklich sein?

Systemschriften sind Klassiker. Wer von alten Sehgewohnheiten abweichen möchte, individuell erscheinen will und sein Corporate Design (Print) mit seinem Corporate Design (Web) in Einklang bringen will, kommt ohne Webfonts nicht aus.

Haben Webfonts auch Nachteile?

Ja. Webfonts sind zwar nur sehr klein an Gewicht. Sie brauchen dennoch ein bisschen Zeit, um laden zu können. Und sie müssen von Empfänger interpretiert werden. Das kann dazu führen, dass zuerst Systemschriften auf dem Device angezeigt werden, bevor der Webfont angekommen und gerendert ist, und dann das ganze Seitenlayout hüpft, sobald er angezeigt wird. Das kann man nur schwer vermeiden. Natürlich kann man an der Ladegeschwindigkeit ein wenig schrauben, seine Cache Performance tunen und ein paar Tricks anwenden. Aber wer damit rechnen muss, dass das Gros seiner Zielgruppe mit sehr sehr langsamen Verbindungen und schwachen Prozessoren konfrontiert sein wird, sollte eher Systemschriften nutzen und auf Webfonts verzichten.

Weitere Tipps?

Jeder benötigte Schriftschnitt (Bold, Italic …) sollte wenn möglich als eigener Font integriert werden, eine Schrift sollte nicht künstlich verändert werden. Eine gute SchriftdesignerIn überlegt sich genau, wie ein schöner Font gestaltet sein soll, sie denkt auch über alternative Schnitte zur Regular-Version nach. Erfahrungsgemäß werden Originalschriften besser gerendert. Bei künstlichem Enhancement entstehen manchmal zarte Artefakte, die man vermeiden kann, indem man beispielsweise auf eine erzwungene Fettschrift in seinem CSS verzichtet.

Auch bei Webfonts  gilt: Less is more. Wer seine ganze Seite mit einer einzigen Schriftfamilie gestaltet, dafür mit idealen Kernings, optimierten Größen, guten Zeilenhöhen und gut lesbaren Spaltenbreiten arbeitet, liegt fast immer richtig. Die perfekte Kombination von mehreren Fonts basiert üblicherweise auf der Wahl einer attraktiven Groteskschrift für Headlines, deren Schriftbild zum Stil der Seite passt (so wie Babetta zu Granaton), mit einer gut lesbaren Fließtextschrift.

Last but not least: Seit Webdesign gelehrt wird, wird gepredigt, dass man für die fehlerfreie Darstellung eines Texts auf dem Monitor bei kleinen Schnitten nur ja keine Serifenschriften verwenden soll. Damit die zarten Serifen nicht ausreißen im Fleischwolf der Pixel. Das hat dazu geführt, dass die jahrhundertealte Kunst, gute Fließtexte zu setzen, umgekehrt wurde. Anstatt flüssig lesbarer Serifentexte mit schnittigen Groteskheadlines findet man im Web oft und gern Serifenheadlines, die eher an eine traditionelle Tageszeitung erinnern denn an eine frische Website. In Kombination mit serifenlosen Texten, die man kaum lesen kann. Naja, man kann sie schon lesen, aber es kostet Mühe. Mehr Mühe, als sich einen Serifentext flüssig zu gönnen.
Meine Theorie, weshalb man Webtexte so ungern liest, und Onlineinhalte immer kürzer werden … ja, Sie ahnen es, ich halte schlecht gesetzte Groteskfließtexte für die Verursacher dieser Unkultur. Ebenso die Unsitte, Fließtexte so groß zu setzen, als würde man Kinderbücher designen. Oder als habe man nur LeserInnen über achtzig. Wenn Schrift zu groß angeboten wird, dann kann das Auge nur schlecht seinen Weg von Wort zu Wort finden und der Lesefluss reduziert sich in seiner Geschwindigkeit.
Obwohl es natürlich richtig ist, dass manche Displays oder Monitore zarte Serifen auch heute noch, in Zeiten von Retina und Amoled, leicht punktig aussehen lassen, und dass viele Tablets bei kleinem Display so hoch aufgelöst sind, dass 1em als zu klein empfunden wird, so bestehe ich darauf, meine Fließtexte in einer dezenten Schrift darzubieten, die nicht nur Serifen hat sondern auch ein lebendiges Schriftbild – nach all den Jahren des Darbens im Grotesktextghetto. Die Traditionen guter Typografie sollen das Internet erobern dürfen.

4 Gedanken auf "Der Kampf um den Webfont"

  1. Malte Kebbel Antworten

    Grosse Frage, ob man im Zeitalter des puren diktatorischen Informationsflusses leben will oder eine differenzierte Anschauung der Dinge provozieren will, die die Feinheiten des Menschlichen Lebens mit sich bringt, die Sinne, das Sehen, das Fühlen, etc … und das Denken. Im Kopf wollen wir diese Dinge vermischen und fühlen uns kreativ vergewaltigt, wenn man seinen Ästhetisch Anspruch nicht mit sich bringen kann, bzw. die Sprache ist auch nur ein kleiner Teil der Kommunikation und man kann die Sprache nicht nur auf standardisierte Schrifttypen begrenzen wenn man etwas vermitteln will. Bzw. bzw. bzw. Man spricht einen Durchschnitt an, der wiederum auf Unverständnis stösst, da dieser auch erst sensibilisiert werden muss durch minimalste Kleinlaute, aufgelöst, zerstückelt, durch den Fleischwolf gedreht um die vorurteilslos sich ein Bild machen zu können. Niemand kommt mit einem gleichen Zugang an etwas heran, der Zugang ist immer verschieden. Bewusstsein der Vielfalt unterstützen, oder im eigenen Inzessumpf sich fortpflanzen.

Teilen Sie Ihre Meinung mit