Vorheriger Artikel Nächster 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 . 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ß Webdesigner 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

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.

1 3
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Keine Antwort
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Aktuelles aus dem Bereich Font
Auf der Suche nach passenden Fonts? TypeGenius zeigt dir, welche Schriften harmonieren
Auf der Suche nach passenden Fonts? TypeGenius zeigt dir, welche Schriften harmonieren

TypeGenius zeigt euch, welche Schriftarten gut zueinander passen. So findet ihr in wenigen Sekunden gut harmonierende Fonts. » weiterlesen

Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates
Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates

Du willst deine Website mit einem Responsive Webdesign versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose … » weiterlesen

Grafikpower für dein Projekt: Die 15 besten Seiten für kostenlose Icons und Icon-Fonts
Grafikpower für dein Projekt: Die 15 besten Seiten für kostenlose Icons und Icon-Fonts

Für Webdesigner sind Icons das sprichwörtliche Salz in der Suppe – sie machen ein Web-Projekt erst richtig individuell. Wer auf der Suche nach frischen, kostenlosen Icons ist, kommt an diesen … » weiterlesen

Kennst Du schon unser t3n Magazin?

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