Drücke die Tasten ◄ ► für weitere Artikel  

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

Aus dem
t3n Magazin Nr. 22

12/2010 - 02/2011

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.

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

Ein Blick zurück

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.

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.

In dieser Situation entstand ein neues Format namens WOFF (Web Open 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:

  • 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.

dms b801dd31502dc7302c2aba2bb520cd0a
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 :

dms d46b93a1b51169946d8dcd1285b2d2f7

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].

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

1 3
Autor:
28 Shares bis jetzt –Dankeschön!

Bewerten
VN:F [1.9.22_1171]
2 Antworten
  1. von Schriftenvielfalt: Wie Webfonts für meh… am 01.06.2011 (14:39Uhr)

    [...] Zum Artikel „Wie Webfonts für mehr Typo-Auswahl beim Webdesign sorgen: Schriftenvielfalt“… [...]

  2. von Webdesign: Diese Fehler vergrätzen Nutz… am 06.09.2011 (10:20Uhr)

    [...] Wie Webfonts für mehr Typo-Auswahl beim Webdesign sorgen: Schriftenvielfalt - t3n News Kommentare: 0 Tweets: 0 Facebook-Likes: 0 06.09.2011 Ads_BA_AD('FOOT'); Schau dir doch unsere Neusten Artikel und News an. [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Font
Google Zeitgeist 2013: Wonach wir in diesem Jahr gesucht haben
Google Zeitgeist 2013: Wonach wir in diesem Jahr gesucht haben

Google Zeitgeist 2013 bietet wie jedes Jahr einen Überblick über die am häufigsten gesuchten Begriffe. Wonach in Deutschland gesucht wurde, erfahrt ihr in unserem Artikel. » weiterlesen

Prototypo: Online-Tool soll die Erstellung von Fonts radikal vereinfachen
Prototypo: Online-Tool soll die Erstellung von Fonts radikal vereinfachen

Prototypo soll ein extrem einfaches Online-Tool zur Erstellung von Schriftarten werden. Zur Vollendung des Open-Source-Werkzeugs suchen die Macher derzeit nach Unterstützung auf Kickstarter. » weiterlesen

Glyphter: Blitzschnell zum eigenen Icon-Font – per Drag & Drop
Glyphter: Blitzschnell zum eigenen Icon-Font – per Drag & Drop

Icon-Fonts bieten viele Vorteile, die klassische Bild-Icons nicht bieten können. Die Erstellung solcher Fonts kann jedoch einiges an Zeit in Anspruch nehmen. Nicht mit Glyphter. Wir stellen dir das.. ... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen