Fonts richtig nutzen

Web-Schriften wie gedruckt

23.3.2011 von Anna Kobylinska und Filipe Pereira Martins

Hohe typografische Ansprüche setzte man im Web lange nur über umständliche Workarounds um. Aktuelle Lösungen verbinden nun Eleganz mit Kompatibilität.

ca. 3:35 Min
Ratgeber
  1. Web-Schriften wie gedruckt
  2. Fontslive.com
internet, webdesign, schriften, fonts, css3, typografie
Web-Schriften wie gedruckt
© Internet Magazin

Vor der Implementierung von CSS3 in aktuellen Browsern war es nicht gerade allzu praktikabel, mehr als neun Fonts (siehe dazu www.typetester.org ) plattformübergreifend zu nutzen und das obwohl die für die erweiterten Schriftdarstellungen nötige CSS-Angabe @font-face zeitweise sogar als CSS2.1-Standard existierte.Bei den verschiedenen Workarounds von der Flash-basierten Ersetzungstechnik sIFR (Scalable Inman Flash Replacement) über die JavaScript-gesteuerte Lösung Cufon bis hin zu Bildersetzungsmethoden auf Basis der PHP GD-Bibliothek und JavaScript wie FLIR (Facelift Image Replacement) handelte es sich um improvisierte Methoden der Textersetzung, nicht um eine ernsthafte Grundlage für echte Web-Typografie.Erst kürzlich mit der Aufnahme von @fontface in die CSS3-Spezifikation wurden die Weichen für die Zukunft in Richtung Web- Typografie gestellt.@font-face fristete jahrelange ein Schattendasein. Microsofts Internet Explorer konnte überraschenderweise bereits in der Version 4.0 aus dem Jahr 1997 .eot-Zeichensatzdateien (Embedded Open Type) mittels @font-face einbinden. WebKit brachte eine eigene Implementierung von @font-face im Jahre 2007 heraus; diese fand dann Einzug in Safari ab Version 3.1 und Chrome ab Version 4.0.

internet, webdesign, schriften, fonts, css3, typografie
Bei allen Vorzügen von Cufon setzt diese Methode im Webbrowser aktiviertes JavaScript voraus.
© Internet Magazin

Mozillas Firefox erlangte eine vergleichbare Funktionalität mit der Version 3.5 aus dem Jahre 2009 (vorerst für .ttf- und .otf-Schriftdateien). In der Version 10 lieferte dann auch Opera schließlich eine eigene (wenn auch noch ziemlich fehlerträchtige) Implementierung von @font-face nach. So liegt es für Webdesigner nahe, aus den typografischen Möglichkeiten von @font-face erstmals in größerem Umfang auch wirklich Nutzen zu ziehen.Webdesigner stehen derzeit allerdings noch vor zwei Herausforderungen, die es zu meistern gilt. Erstens müssen sie geeignete Schriften mit passenden Lizenzbedingungen finden, denn eine Schriftlizenz für den Desktop berechtigt ihren Besitzer nicht automatisch zur Nutzung der betreffenden Schrift im Web. Leider sind nicht alle Schriftenhersteller mit der Einbindung ihrer Zeichensätze über @font-face-Deklarationen einverstanden. Zweitens dürfen Webdesigner ihre Webbesucher mit der Dateigröße referenzierter Schriftdateien nicht überfordern.Die Dateigröße der Schriften hat inzwischen an Relevanz gewonnen, da sich zu konventionellen Desktop-PCs und Laptops als eine ernstzunehmende Alternative für den Zugriff auf Webseiten deutlich kleinere Geräte gesellt haben, darunter Netbooks, Tabletts (wie das Apple iPad oder Amazons Kindle) und nicht zuletzt Smartphones (auf Basis von Apple iOS oder Google Android).Als Antwort auf diese Entwicklungen haben sich Mozilla Foundation, Opera Software und Microsoft zusammengeschlossen und dem W3C ein neues Web-Schriftenformat mit eingebauter Kompression zur Standardisierung vorgelegt: WOFF (Web Open Font Format). Firefox debütierte Unterstützung für das zukunftsträchtige .woff-Format bereits in der Version 3.6. Chrome versteht sich auf die Handhabung von WOFF-Schriften seit der Version 5. Microsoft fand den Anschluss an die Schrift-Avantgarde mit Internet Explorer 9 Plattform Preview 3. Safari und Opera steht diese Entwicklung noch bevor.Eine Lösung für die Herausforderungen der Einbindung von Schriften mittels @font-face bieten mittlerweile verschiedene Online- Dienstleister.

Typekit

Typekit gilt als der derzeit führende Dienstleister für Web-Schriften (www.typekit.com ). Auf diese Lösung vertrauen unter anderem die New York Times, Twitter und das Wall Street Journal.Bei Typekit.com stehen Ihnen vier Jahresabonnements zur Verfügung: ein kostenloses und drei kostenpflichtige Abos (Personal, Portfolio und Performance).Websites mit bis zu 25.000 Seiteneinblendungen pro Monat können den Typekit- Service kostenlos in Anspruch nehmen. Bei der Registrierung werden Ihre Kreditkartendaten erfasst. Damit Sie Typekit auch wirklich kostenlos nutzen können müssen Sie innerhalb von 30 Tagen nach der Anmeldung auf das kostenlose Free/Trial-Abo manuell herunterschalten (oder den Dienst kündigen; für die ersten 30 Tage nach der Anmeldung fallen für Sie keine Kosten an).Das permanent kostenlose Free/Trial-Abo ist zeitlich unbeschränkt, unterstützt aber nur eine einzige Website mit maximal 2 Zeichensätzen und zeigt auf jeder Webseite das Logo des Anbieters an. Sollte sich Ihr Besuchertraffic dauerhaft oberhalb von 25.000 Pageviews pro Monat ansiedeln, werden Sie automatisch auf das passende kostenpflichtige Abo (Personal, Portfolio oder Performance) hochgestuft.Im Personal-Abo dürfen Sie bis zu 50.000 Pageviews pro Monat verzeichnen, bis zu zwei Websites mit jeweils bis zu fünf Zeichensätzen betreiben und das Typekit-Logo bleibt Ihnen erspart. Für knapp 50 Dollar pro Jahr können Sie beliebig viele Zeichensätze auf beliebig vielen eigenen Blogs oder Websites nutzen und erhalten uneingeschränkten Zugriff auf die gesamte Schriftenbibliothek des Anbieters.Diese umfasst derzeit knapp unter 530 Schriftenfamilien verschiedener Hersteller. Wer mehr Auswahl benötigt, muss sich woanders umschauen.

Fonts.com

Fonts.com ist ein Online-Dienst von Monotype Imaging zur Einbindung von Web- Schriften mittels @font-face- Deklarationen. Fonts.com bietet drei monatliche Abonnements in verschiedenen Ausbaustufen an: Free (kostenloser Zugriff auf über 3.000 Zeichensätze), Standard (ab 10 Euro pro Monat für den Zugriff auf über 8.000 Schriften) und Professional (ab 100 Euro pro Monat für den Zugriff auf über 8.000 Schriften).Der kostenlose Account bei Fonts.com ist vergleichsweise großzügig bemessen. Anders als im Falle von Typekit.com können Sie das kostenlose Abo von Fonts.com für eine unlimitierte Anzahl von Websites und eine unlimitierte Anzahl von Schriften in Anspruch nehmen, solange Sie dabei 25.000 Seiteneinblendungen pro Monat nicht überschreiten. Ähnlich wie bei Typekit.com müssen Sie ein Logo des Anbieters auf Ihrer Seite anbringen; die Platzierung bleibt allerdings Ihnen überlassen.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.