Anzeige
Anzeige
UX & Design
Artikel merken

Wie Webfonts für mehr Typo-Auswahl beim Webdesign sorgen: Schriftenvielfalt

Webfonts sind im Internet angekommen. Was seit jeher für Gestalter von Printprodukten selbstverständlich ist, nämlich aus einem Pool von tausenden Schriftarten wählen zu können, funktioniert seit einiger Zeit endlich auch im Webdesign. Dieser Artikel zeigt auf, welche Möglichkeiten es zur Schrifteinbettung in eine Website gibt und welche Stolpersteine man beachten sollte.

7 Min. Lesezeit
Anzeige
Anzeige

Ein Ereignis im Jahr 2008 ließ Webdesigner und Typografiefans jubeln, während Schriftenanbieter auf die Barrikaden gingen. Was war geschehen?

Ein Blick zurück

Anzeige
Anzeige

Apple hatte den neuen Safari 3.1 veröffentlicht, der das Einbinden der Standard-Schriftformate TrueType (.ttf) und OpenType (.otf oder .ttf) in den Browser ermöglichte. Zwar war die dazu benötigte CSS-Regel @font-face bereits Ende der Neunziger im Internet Explorer 4 und Netscape 4 implementiert, aber die Darstellung der Schriften war aufgrund fehlender oder unzureichender Kantenglättung nicht zufriedenstellend.

Die Kantenglättung war aber 2008 kein Problem mehr, da bei Flachbildschirmen nicht ein Pixel, sondern dessen Farbbestandteile Rot, Grün und Blau als Raster verwendet werden können. So entsteht eine höhere Auflösung und die Schriften sehen besser aus. Somit stand dem neuen Schriftenglück nichts mehr im Wege, wären da nicht die Bedenken der Schriftenanbieter gewesen.

Anzeige
Anzeige

Sie befürchteten, dass sich die Schriften – da sie dem Nutzer direkt zugänglich waren – illegal verbreiten würden und forderten einen besseren Schutz dagegen. Es gab zwar das EOT-Format von Microsoft, das ein Koppeln der Schriftdatei an eine bestimmte URL erlaubte und so gegen Missbrauch schützte, allerdings konnte sich das Format in keinem anderen Browser durchsetzen.

Anzeige
Anzeige

In dieser Situation entstand ein neues Format namens WOFF (Web Open Font Format), das die Rechte der Anbieter besser schützen sollte. Außerdem traten Web Services, die sich um das Speichern und Ausliefern der Schriftdaten kümmern, auf den Plan. Darüber hinaus gibt es aber weiterhin auch Anbieter, die das Einbetten ihrer Schriften mit Hilfe von CSS erlauben, sodass der Webdesigner selbst die Schrift einbetten kann.

Vorteile von Webfonts

Webdesigner können bei der Schriftwahl also endlich aus dem Vollen schöpfen. Das bringt einige Vorteile mit sich:

Anzeige
Anzeige
  • Die Optik von Websites wird vielfältiger, abwechslungsreicher und interessanter.
  • Die Max Mustermann AG kann ihre Hausschrift auch auf der Unternehmenswebsite verwenden.
  • Bei Platzmangel oder Überschriften kann ein Condensed-Schrift-Schnitt zum Einsatz kommen.
  • Webdesigner und Website-Betreiber können durch die Wahl einer passenden Schrift den Inhalt wesentlich besser unterstützen und interessanter präsentieren als mit den meist doch recht nüchternen Systemschriften.
Ungewöhnliche Fonts sorgen dafür, dass eine Website aus der Masse heraussticht. 

Ungewöhnliche Fonts sorgen dafür, dass eine Website aus der Masse heraussticht.

Wie funktioniert @font-face?

Wie bereits eingangs erwähnt, spielt die CSS-Regel @font-face die zentrale Rolle. Aus diesem Grund lohnt ein Blick auf folgendes Code-Beispiel :

Der Code ist verhältnismäßig umfangreich, da er zurzeit noch verschiedene Formate für die einzelnen Browser ausgeben muss. Zunächst wird die Schriftfamilie benannt, hier im Beispiel die Graublau Web, die zur Feier der Safari-3.1-Veröffentlichung kostenlos zur Verfügung gestellt wurde – natürlich inklusive Lizenz zur Verwendung mit @font-face. Im zweiten Schritt wird nun der Pfad zur Schriftdatei aufgeführt: zunächst im EOT-Format für den Internet Explorer, anschließend das WOFF-Format (beispielsweise für Firefox) und als Fallback das TTF-Format für jene, die WOFF noch nicht beherrschen. Ergänzen könnte man noch eine SVG-Datei für iPhone/iPad, darauf wurde im Beispiel verzichtet. Die Quellenangabe „local()“ inklusive Smiley hält den Internet Explorer von der Überschreibung der vorangegangenen Anweisung ab. Wer mehr über diese Methode der Einbindung erfahren möchte, kann sich bei Paul Irish genauer informieren [1].

Anzeige
Anzeige

Wenn man jetzt die Schrift in seine Website einbauen möchte, nimmt man einfach den bei @fontface angegebenen Namen und setzt ihn im Font-Stack ein:

HTML 
body {
	font-family: "Graublau Web", Arial, sans-serif;
}

Listing 1

Sollte die neue Schrift aus irgendeinem Grund nicht geladen werden können, wird auf den Fallback – in diesem Fall Arial – zurückgegriffen. So viel zur grundsätzlichen Funktionsweise. Zum Glück gibt es Dienste, die Webdesignern viel Handarbeit bei der Einbindung von Schriften ersparen. Dazu gehören beispielsweise Fontsquirrel, die Google Font API und Dienste wie Typekit oder Monotype.

Fontsquirrel

Fontsquirrel.com ist ein Webservice, der lizenzfreie Schriften zur Einbettung in eine Website auflistet und samt allen benötigten Daten wie Font-Dateien und CSS zur Verfügung stellt. Außerdem hat man mittels Fontgenerator die Möglichkeit, für nicht in der Liste enthaltene freie Schriften selbst ein Paket zu erstellen. Eine ziemlich praktische Sache, zudem völlig kostenlos. Die Schriften muss man allerdings auf den eigenen Server laden. Das verursacht zusätzlichen Traffic, daher sollte man immer auf die Dateigröße der Schrift achten. Ein Nachteil vieler kostenloser Schriften ergibt sich daraus, dass sie oft nur aus wenigen, manchmal nur aus einem Schriftschnitt bestehen. Daher eignen sie sich meist nicht für die gesamte Website, sondern beispielsweise nur für Überschriften. Außerdem sehen manche Lizenzbestimmungen die Erwähnung der verwendeten Schrift auf der Website vor.

Anzeige
Anzeige

Google Font API

Einen Schritt weiter geht die Google Font API, die ebenfalls kostenlose Schriften von den Google-Servern aus anbietet. Das heißt, man braucht lediglich einen Link auf eine externe CSS-Datei in seine Website einzufügen und weitere Parameter festzulegen [2]. Zurzeit bietet Google über zwanzig Webfonts an, die man im Google Font Directory ansehen und testen kann [3]. Eine gute Sache, denn man erhält kostenlose Fonts und braucht sich auch um den Traffic keine Gedanken zu machen. Lediglich die Auswahl ist (noch) ziemlich klein.

Typekit & Co.

Neben den bereits angesprochenen Diensten für die Preisbewussten bewegen sich eine Reihe von kostenpflichtigen Anbietern am Markt – die allerdings teilweise auch abgespeckte, meist werbefinanzierte kostenlose Angebote im Portfolio haben. Dabei muss man zwischen jenen Anbietern unterscheiden, die die Fonts selbst hosten und für die Dauer des Vertrags „vermieten“ (zum Beispiel Typekit oder Monotype), und auf der anderen Seite jenen Anbietern, die direkt Schriftdateien im neuen WOFF-Format ausliefern (zum Beispiel Fontshop).

Das Grundprinzip bei den Anbietern, die Fonts vermieten, ist immer gleich: Man wählt eine oder mehrere Schriften aus, die dann über einen generierten Code-Schnipsel in die Website eingebunden werden. Dabei kommt mal JavaScript zum Einsatz, mal ein einfacher CSS-Link. Die verschiedenen Preismodelle orientieren sich in der Regel am monatlichen Traffic-Aufkommen.

Anzeige
Anzeige
Webdienste wie Typekit machen es Website-Betreibern und Webdesignern leicht, ansprechende Fonts in ihre Website einzubinden. 

Webdienste wie Typekit machen es Website-Betreibern und Webdesignern leicht, ansprechende Fonts in ihre Website einzubinden.

Wer nicht mehr als 25.000 Page-Impressions erzeugt, kann sich zum Beispiel beim Webfont-Angebot von Monotype für das kostenlose Einstiegsangebot entscheiden, das immerhin noch ca. 3.000 der insgesamt mehr als 8.000 Fonts beinhaltet.

Fontdeck wählt einen anderen Weg und lässt sich einzelne Fonts bezahlen, dafür ist beim Traffic kein Limit gesetzt. Letztendlich muss man selbst herausfinden, welcher Dienst einem am ehesten zusagt, nicht zuletzt ist die Entscheidung ja auch davon abhängig, ob der Service die gewünschte Schrift überhaupt anbietet.

Bei den Schriftanbietern, die Fonts im WOFF-Format verkaufen, erhält man die Schrift als Datei und muss sich um das Hosting selbst kümmern, wird aber bei allen Fragen der richtigen Einbindung vom Anbieter unterstützt. Vorteil dieser Methode ist, dass einem die Schrift wirklich gehört und man keine jährlichen Zahlungen leisten muss. Man muss allerdings beachten, dass noch nicht alle aktuellen Browser WOFF unterstützen, hier sei beispielsweise Safari genannt.

Anzeige
Anzeige

Stolpersteine

So schön die neue Schriftenvielfalt auch ist, so gibt es doch ein paar Dinge, die man bei der Einbindung wissen und beachten sollte. Zum einen gibt es das Problem der ClearType-Kantenglättung unter Windows XP, die dort standardmäßig deaktiviert ist. Daher sehen die meisten Schriften unter Windows XP nicht gut, teilweise sogar grausam aus.

Zwar ist laut einer WebmasterPro-Analyse [4] die Anzahl derjenigen, die ClearType dennoch aktiviert haben, größer als allgemein angenommen (circa 90 Prozent), aber die übrigen 10 Prozent erhalten dann unter Umständen eine schlecht bis gar nicht lesbare Schrift. Im schlimmsten Fall ist die Website dann für diese Besucher überhaupt nicht zu bedienen. Aber auch mit aktiviertem ClearType sehen manche Schriften unter Windows XP nicht gut aus, sodass ein System-Font doch wieder die bessere Wahl sein kann.

Außerdem kann es passieren, dass beim Laden der Seite ein System-Font aufblitzt, bevor die eigentliche Schrift geladen ist. Das kann zu unschönen Effekten führen. Paul Irish nennt das FOUT (Flash Of Unstyled Text) und bietet Lösungsansätze dazu [5].

Anzeige
Anzeige

Wichtig ist auch, die Größe der Schriftdateien im Auge zu behalten, um Ladezeiten und Traffic möglichst gering zu halten. Bei der Nutzung von verschiedenen Schriften und Schriftschnitten kann schon einiges zusammen kommen.

Fazit

Die neue Schriftenvielfalt im Web ist eine tolle Sache. Endlich stehen Webdesignern mehr Möglichkeiten bei der Gestaltung zur Verfügung und dank der zahlreichen Dienste, die fertige Pakete für den Anwender schnüren, wird die Nutzung leichter. Sicherlich muss man erst mal die richtige Schrift und den richtigen Dienst für sich finden – was auch Zeit in Anspruch nimmt – aber letztendlich ist dadurch auch für jeden etwas dabei.

Am Horizont warten bereits neue Browser, die wiederum besser als bisher mit den neuen Formaten und Schriftmöglichkeiten zurechtkommen werden. Solange man sich der derzeit noch bestehenden Wehwehchen, Umstände und Probleme bewusst ist, steht dem Arbeiten mit Webfonts allerdings schon heute nichts mehr im Wege.

Einige Webfont-Anbieter
Service-Anbieter, die das Hosting der Fonts übernehmen: 
  • Fontdeck – http://fontdeck.com/
  • Fonts Live – http://www.fontslive.com/
  • Google Font API – http://code.google.com/apis/webfonts/
  • Typekit – http://typekit.com/
  • Typotheque – http://www.typotheque.com/webfonts
  • WebINK Web Fonts – http://www.extensis.com/en/WebINK/
  • Webtype – http://www.webtype.com/
  • Monotype / Fonts.com Webfonts – http://webfonts.fonts.com
  • Just Another Foundry – http://justanotherfoundry.com/

Folgende Anbieter stellen Fonts zum Download bereit:

  • FontShop – http://www.fontshop.com/fontlist/n/web_fon
  • Fontspring – http://www.fontspring.com/
  • Font Squirrel – http://www.fontsquirrel.com/
  • Kernest – http://kernest.com/
  • MyFonts – http://new.myfonts.com/search/is_webfont:true/fonts/

 

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige