Denis Potschien 12. April 2010

Web-Typografie 2.0 – Individuelle Schriften für das Internet, weitgehend barrierefrei

Die Schriftenvielfalt auf Websites war bisher sehr übersichtlich. Die Schnittmenge der Schriften, die auf weitestgehend allen Betriebssystemen vorinstalliert sind, ist gering. Wer nicht Gefahr laufen will, dass eine individuelle Hausschrift auf dem Ziel-Browser der Internetnutzer durch eine Standardschrift ersetzt wird und so das ganze, sorgfältig abgestimmte Design ruiniert, musste sich wohl oder übel mit Standardschriften wie Arial (Windows) oder Helvetica (Mac) begnügen.

Gerade die Verdana hat einen derartigen Siegeszug hinter sich, dass die mehrere Jahre als angenehme Abwechselung empfundene und äußerst gern eingesetzte Schrift inzwischen ebenso abgegriffen wirkt wie Arial oder Times New Roman. Das Problem ist bekannt und führte dazu, dass in den Anfängen der gestalteten Websites Überschriften und Navigationselemente gerne als Grafik eingebunden wurden. Im Zeitalter des barrierefreien Internets fällt diese Methode weg. So genannte Webfonts versprechen einen Ausweg aus diesem Dilemma.

Webfonts machen typografisch schön gestaltete Websites wie Jax Vineyards möglich.

In der jüngeren Vergangenheit haben sich verschiedene Möglichkeiten mehr oder weniger etabliert, um beliebige Schriften zumindest in Überschriften einsetzen zu können – und das möglichst barrierefrei. Dieser Beitrag beleuchtet drei der gängigen Ansätze mit ihren jeweiligen Vor- und Nachteilen nebst der rechtlichen Aspekte.

Das können sIFR und Cufon

Mit sIFR und Cufon gibt es zwei Lösungsansätze, um mehr Schriftenvielfalt auf Websites zu bringen. In beiden Fällen wird der Text ganz normal in HTML eingebunden und anschließend durch JavaScript ersetzt. Bei sIFR werden per JavaScript Textabsätze durch Flash-Dateien ersetzt. In diesen Flash-Dateien muss die entsprechende Schriftart eingebunden sein. Die Flash-Dateien geben den Text dann in der entsprechenden Schriftart wieder.

Cufon kommt ohne Flash aus. Die Schriftart, die eingsetzt werden soll, wird in einen sogenannten JavaScript-Font umgewandelt. Einen entsprechenden Generator stellt Cufon bereit. In dem JavaScript-Font werden die Buchstaben der Schrift als SVG-Grafiken gespeichert. Per JavaScript wird der Text dann durch die SVG-Buchstaben ersetzt.

Nachteile
Beide Lösungen haben den Nachteil, dass sie nur mit JavaScript funktionieren. Bei sIFR kommt noch hinzu, dass Flash eingesetzt wird, während bei Cufon die Texte anschließend nicht mehr markierbar sind.

Der Vorteil von Cufon ist, dass der Text auch ohne Flash und JavaScrript lesbar ist – gerade für barrierefreie Websites wichtig.

Vorsicht bei lizenpflichtigen Schriften
Zudem ist in beiden Fällen die Frage des rechtmäßigen Einsatzes von Schriften nicht geklärt. Denn kommerzielle Schriften dürfen schließlich nicht über das Internet verbreitet werden, was in beiden Fällen geschieht – wenn auch nicht als Schriftdatei, sondern im Flash- beziehungsweise SVG-Format.

Neue Möglichkeit mit @font-face

Eine neue Möglichkeit der Einbindung von Schriften ist der Einsatz spezieller Schriftdateien über Stylesheets. Diese Möglichkeit ist eigentlich gar keine neue, existiert sie in der Theorie doch schon eine ganze Weile. Aufgrund verschiedener Formate, mangelnder Browser-Unterstützung und fehlender Lizenzen durch die Schriftenanbieter konnte diese Möglichkeit bisher nicht eingesetzt werden. CSS3 hat die Eigenschaft @font-face wieder aufgegriffen, die inzwischen von fast allen Browsern unterstützt wird. Zudem gibt es mit dem FontShop den ersten Schriftenanbieter, der spezielle Lizenzen und Schriften für den Einsatz auf Websites anbietet.

Tipp: Welche CSS3-Properties von den gängigen Browsern unterstützt werden, können Sie in der Web Design Checklist von findmebyIP.com nachlesen.


Wie funktioniert das?

Mit der neuen Technik lassen sich beliebige Schriften für die Texte einer Website einbinden. Die Schriften müssen nicht auf dem Rechner des Betrachters liegen, beziehungsweise installiert sein. Sie liegen auf dem Server der Website und werden vom Browser aufgerufen und verarbeitet. Wie so oft bei neuen Web-Technologien gibt es keinen einheitlichen Standard. Zwei verschiedene Dateiformate für die Web-Schriften sind momentan im Umlauf.

Da gibt es zum Einen das EOT-Format (»Embedded Open Type«), das der Internet Explorer schon seit Version 4 unterstützt, und das WOFF-Format (»Web Open Font Format«), das der Firefox seit Version 3.6 unterstützt. Erst durch das neue WOFF-Format, das von Mozilla mitentwickelt wurde, ist ein browserübergreifender Einsatz von Web-Schriften möglich geworden.

Der Schriftenanbieter FontShop liefert beide Formate aus, um so alle Browser versorgen zu können. Das für kommerzielle Schriftenanbieter Besondere an den Formaten ist, dass sie lediglich im Browser einsetzbar sind. Diese Schriften lassen sich nicht in anderen Programmen wie Office-Anwendungen verwenden.
Was gibt es Rechtliches zu beachten?

FontShop bietet Webfonts in beiden Formaten an.

Die Vielfalt hat Ihren Preis – kommerzielle Schriften sind lizenzpflichtig

Um kommerzielle Schriften in den genannten Formaten auf einer Website einzusetzen, sind spezielle Lizenzen zu erwerben. Diese sind pro Schriftschnitt ab etwa 40 Euro erhältlich und enthalten die Schrift in beiden Formaten. Die Lizenz deckt 500.000 Seitenaufrufe pro Monat ab. Für alles, was darüber hinaus geht, gibt es gestaffelte Lizenzen, die entsprechend mehr kosten.

Da die tatsächlichen Seitenaufrufe einer Website nicht protokolliert werden, gibt der Lizenznehmer beim Kauf einer Schrift selbst an, wie hoch sein Traffic ist. Bei einer Website, die neu an den Start geht, wird der Traffic geschätzt.

Die Schrift darf nur vom Lizenznehmer auf einer bestimmten Website eingesetzt werden. Lizenznehmer sind daher verpflichtet, Maßnahmen zu treffen, das Hotlinking der Schriften zu unterbinden. Dies kann man unter anderem durch einen entsprechenden Eintrag in der .htaccess-Datei einrichten. Dafür kommen beide Formate ganz ohne DRM aus, was die meisten Webdesigner freuen wird, da man sich allerhand Probleme, die in der Regel mit DRM auftreten, erspart.

Es ist davon auszugehen, dass andere Schriftenanbieter, wie Linotype, nachziehen und ebenfalls eigene Schriften und Lizenzmodelle für Webschriften anbieten. Auch die Browser-Hersteller werden nachziehen. Und möglicherweise wird auch der nächste Internet Explorer das WOFF-Format unterstützen, sodass es zukünftig nur noch ein Format für alle Browser geben wird.

Wie binde ich die Schriften ein?

Das Einbinden der Web-Schriften erfolgt über CSS. Aufgrund der unterschiedlichen Formate muss die Schrift zweimal eingebunden werden, damit sowohl der Internet Explorer als auch Firefox die Schrift anwenden können:

/* erst für den Internet Explorer */
@font-face {
font-family: MeineSchrift;
src: url("/schriften/MeineSchrift.eot");
}

/* dann für Firefox */
@font-face {
font-family: MeineSchrift;
src: url("/schriften/MeineSchrift.woff") format("woff");
}

Anschließend kann die Schrift wie jede andere Systemschrift verwendet werden:

p {
font-family: MeineSchrift, Arial
}

Für ältere Browser sollte man, wie im Beispiel geschehen, eine alternative Systemschrift angeben. Es lassen sich auch spezielle Schriftsstile definieren, die anschließend verwendet werden können:

@font-face {
font-family: MeineSchrift;
src: url("/schriften/MeineSchriftItalic.woff") format("woff");
font-style: italic;
}

Im dargestellten Beispiel wird ein Kursivschnitt der Schrift unter dem Namen »MeineSchrift« eingebunden. Dieser lässt sich jetzt ebenfalls wie andere Systemschriften anwenden:

em {
font-family: MeineSchrift, Arial
font-style: italic;
}

Die Definiton verschiedener Schriftstile einer Schrift wird nur vom WOFF-Format unterstützt. Beim EOT-Format bleibt nur die Möglichkeit, für jeden Schriftschnitt eine eigene Schriftdefintion anzulegen:

@font-face {
font-family: MeineSchriftItalic;
src: url("/schriften/MeineSchriftItalic.eot");
}

Was gilt es noch zu beachten?

Die Webschriften sind für die Bildschirmdarstellung mit eingeschaltetem ClearType optimiert. ClearType ist erst ab Windows Vista standardmäßig eingeschaltet. Werden andere Schriftenglättungsmethoden eingesetzt, sind die Webschriften nicht optimal lesbar. Wie die verschiedenen Betriebssysteme und Schriftenglättungsmethoden sich auf die Darstellung der Schrift auswirken, verdeutlichen einige Screenshots bei Flickr.

Wer Schriftlizenzen nicht erwerben möchte, kann auch den Service von Typekit verwenden. Hier hat man je nach gewähltem Tarif Zugriff auf hunderte verschiedener Schriften. Allerdings setzt die Nutzung JavaScript voraus, da ein Tracking-Code auf der Website eingebunden werden muss.

Schriften im Abo – bei typekit können Sie gratis ausprobieren, ob das etwas für Sie ist.

Wo werden Webfonts eingesetzt?

Es gibt bisher nur wenige Websites, die sich der neuen Technik bedienen, dazu gehören Intersport, Nike und Jax Vineyards (Screenshot siehe oben). Ob sich die neue Schriftenvielfalt durchsetzen wird, ist aufgrund der neuesten Entwicklung keine Frage mangelnder Unterstützung der Browser und Schriftenhersteller. Entscheidender für die Durchsetzung ist die Frage, ob Betreiber von Websites bereit sind, zusätzliches Geld für Schriften auszugeben, die nur auf der Website einsetzbar sind.

Intersport glänzt bereits mit Webfonts.

Nicht nur bei den Schuhen – auch bei Schriften setzt Nike
auf individuelles Design beziehungsweise Typografie.

(mm), ™

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

19 Kommentare

  1. Zitat: … und das WOFF-Format (»Web Open Font Format«), das der Firefox seit Version 3.6 unterstützt. Erst durch das neue WOFF-Format, das von Mozilla mitentwickelt wurde, ist ein browserübergreifender Einsatz von Web-Schriften möglich geworden.

    Ähm, wenn bislang allein(!) Firefox 3.6 dieses Format offiziell unterstützt, inwiefern ist das dann browserübergreifend?
    Browserübergreifend ist zumindest bislang eher die Kombination EOT+TTF/OTF, die auch in Safari, Opera, Firefox funktioniert. Dies wurde hier aber leider unterschlagen. Wahrscheinlich weil man sich auf das Angebot von FontShop International bezog.

  2. hallo,

    weiss jemand welche Software Jax Vineyards (http://jaxvineyards.com) genutzt hat für die Homepage?

    grüsse

  3. @Novalis und auch @Autor

    http://www.fontsquirrel.com/fontface/generator

    Das Rundum-Sorglos-Paket: Funktioniert und ist kostenlos, sofern man kostenlose Schriften einsetzt, die die Weiterverbreitung offiziell erlauben. Zum Beispiel die hier:

    http://www.opentype.info/demo/webfontdemo.html

  4. Ich finde die momentanen Aussagen bzgl. Barrierefreiheit für absolut überzogen und hat meiner Meinung nach zumindest nichts in einem Artikel wie diesem verloren. Eigene Schriften kann und sollte man in individuellen Designs einsetzen doch am Anfang zu sagen: „Barrierefreiheit“ und daraufhin die Wörter Javascript oder gar Flash fallen zu lassen passt nicht wirklich zusammen.

    Nun zu sagen, dass man keine Bilder herunterladen muss und somit Ladezeit spart ist ebenfalls falsch, denn statt 3x 10kb PNG-Dateien muss man nun eine 50kb Schriftdatei (und die wäre noch klein) herunter laden. Grade bei größeren Schriften hat man dann eher einen deutlich langsameren Seitenaufbau weil erstmal 300kb Schrift herunterladen muss ehe die Seite aufbaut.

    Die Möglichkeit zu haben ist gut, doch gebrauchen tut man es doch vorwiegend nur auf volldesignten Webseiten, welche dann aber auch nicht auf JS-Blocker oder Flash-Unkompatible Browser reagieren. (Funktioniert @font-face eigentlich auf mobilen Browsern wie Opera Mini, Dolphin oder den Standardprogrammen von Android und Apple?)

  5. zum Kommentar von Harry Schmieder: nicht mehr viel dazu zu sagen.
    Mit Schaudern erinnere ich mich an den Betreiber einer Werbeagentur, der mir gegenüber allen Ernstes behauptete, es sei ihm egal, wie gut man den Text auf einer bestimmten Seite lesen könne, Hauptsache, die Schrift sei ja nicht zu groß und sähe gut aus! Sinn und Nutzen einer Seite diametral entgegengesetzter kann man denk ich nicht mehr liegen.
    Die meisten Leute im Web suchen Information, die wollen nicht von den Ergüssen irgendwelcher Designfuzzies beeindruckt oder gar erschlagen werden. Wenn eine Schrift dazu dient, die Lesbarkeit zu erhöhen oder zumindest nicht zu mindern, wenn es das Gesamtbild der Seite verbessert, wäre gegen eine „Nicht-Standard-Schrift“ nichts einzuwenden, diese ganzen Klimmzüge und Verrenkungen mit Javascript und/oder Flash hingegen halte ich für kontraproduktiv und überflüssig.
    Irgendwie fürcht ich mich auch schon vor einem Web, in dem jeder irgendwelche Fontcreationen beliebig auf der Homepage verteilen kann. Wer je eine selbstgestrickte Einladung bekommen hat, auf der 5 verschiedene Schriften in 30 unterschiedlichen Schriftschnitten gedruckt waren, weiss was ich meine…

  6. Fine ich auch, dass Lesbarkeit vor Design gehen sollte.

    Und bei der Nike-Schrift erkenne ich auf den ersten Blick keinen großen Unterschied zur Verdana.

    Außerdem kann man bei Verwendung von Standardschriftarten auch durch Schriftgröße und Farbe, Abstände und Freiraum eine gewisse Nuance setzen, die dem Inhalt gerecht wird.

    Wie man hier schon richtig bemerkt hat, sollte auf Serife-Schriften – vor allem im Fließtext – möglichst verzichtet werden.

    Ich habe schon viele wirklich toll gestylte Seiten gesehen, auch was die Anwendung von Fonts betrifft. Bei einigen dieser Seiten findet man aber oft so viele grammatikalische und Ausdrucks-Fehler, dass man sich fragt. „Was soll das?!?!“…
    Oder es fällt einem doch tatsächlich ein Zitat eines Fernseh-Kabarretisten ein: „Das schönste Wetter nützt Dir nichts, wenn´s regnet“… :-)

    Da muss ich wiederholt darauf aufmerksam machen, dass bei jeder Webseite der Besucher im Vordergrund stehen MUSS! Und um es diesem nicht zu schwer zu machen, sollte der seriös formulierte und verfassste Text auch technisch gut lesebar sein, und zar gänzlich OHNE Java und OHNE Flash!

    Manche Webworker machen sich meiner Meinung nach ZU viele Gedanken um das Styling von Websites. Und leider hier auch mehr als um die Nutzer der Websites.

    Man sollte sich viel mehr Gedanken um die Inhalte machen und den Rest drumherum eben so gestalten, dass ein harmonisches Ganzes in der Optik entsteht, wobei der Inhalt primär im Vordergrund stehen sollte.

    Ich für meinen Teil würde nie eine Website erstellen nur wegen der Optik. Websites erstellt man (oder lässt sie erstellen), wenn man etwas zu sagen oder anzubieten hat, das die breitere Masse interessiert.

    Wie erwähnt, die bisherigen Standardschriftarten sind das kleinere Übel, wenn es um benutzer-optimierte Websites geht.
    Trotzdem freue ich mich schon darauf, wenn CSS3 endlich browserübergreifend funktioniert. Das halte ich nämlich noch für die beste Alternative zu den Standard-Fonts.

  7. Wer behauptet eigentlich ständig, dass sich bestimmte Schrfiten abgenutzt haben. Hört bitte auf mit diesem Unsinn.

    Für gestalterisch anspruchsvolle Sites kann man die Typo-Systeme ja ruhig einsetzen, aber Otto-Normalverbraucher braucht das nicht und wird es auch nicht bezahlen wollen.

  8. also entweder ich nehme ne schöne schriftart, die es schon überall gibt, oder…
    ich zahle 40€,
    schlage mich rum mit formaten für unterschiedliche browser,
    ermittle meine zugriffzahlen,
    unterbinde hotlinking,
    um dann eventuell festzustellen das wegen unterschiedlichen schriftenglättungsmethode die neue schrift schlimmer aussieht als die alte.

    also im ernst? der artikel schreckt mich eher ab davon gebrauch zu machen, als das er mich motiviert.

  9. ich habe Selber schon mit Sifr gearbeitet. Es geht zwar recht fix und einfach, jedoch sollte man längere Texte meiden, da sich die ladezeiten der Seiten stark erhöhen.
    Dies alles über CSS zu regeln klingt schon viel sauberer.

  10. Ich befürchte Schlimmes. Arial und Helvetica kann man gut am Bildschirm lesen. Serifen sind eine Tortur, im mobilen Web komplett unggeignet. Lesbarkeit ist immer wichtiger als Design, Lesbarkeit ist das oberste Gebot von Typographie.

  11. super artikel hab 2 brauchbare links gefunden :)

    thx

  12. Nike setzt auch auf eine firmeneigene Orthographie ;o) siehe personalisiiiieeere.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück