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

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? Typ.io zeigt dir, welche Schriftarten gut harmonieren
Auf der Suche nach passenden Fonts? Typ.io zeigt dir, welche Schriftarten gut harmonieren

Typ.io zeigt dir, welche Schriftarten sich gut kombinieren lassen. Damit ihr auch gleich einen Eindruck davon gewinnen könnt, listet die Seite entsprechende Beispiele aus dem gesamten Web auf. » weiterlesen

Monospaced war gestern: Darum gibt es den Coding-Font „Input“ auch als proportionale Schriftart
Monospaced war gestern: Darum gibt es den Coding-Font „Input“ auch als proportionale Schriftart

Input ist eine neue Schriftart für Entwickler. Neben einer Monospace-Variante gibt es auch eine proportionale Version der Schrift. Was sich die Macher dabei gedacht haben, erklären wir euch in … » weiterlesen

Die Nase voll von Lorem Ipsum? Dieser geniale Font erspart dir nervige Platzhalter in deinen Wireframes
Die Nase voll von Lorem Ipsum? Dieser geniale Font erspart dir nervige Platzhalter in deinen Wireframes

Dummy-Texte wie Lorem Ipsum sind sehr beliebt, wenn es beispielsweise um den Entwurf von Websites geht. Im Wireframing-Prozess ist das allerdings keine gute Lösung, da dort noch nicht auf Details … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen