Typographie im Web

Typographie im Web

Wer den Arial-Verdana-Times-Courier-Mix im Web nicht mehr sehen kann, hat mittlerweile mehrere Möglichkeiten.
Nach über 15 Jahren Kampf mit Webfonts gibt es nun Lösungen der Browser – allerdings verschiedenste.

Schriften mit CSS 2+

Die meisten Browser – Internet Explorer 8 und kleiner ausgenommen – verstehen Schriften im OTF und TTF-Format. Der Internet Explorer hat das eigenwillige EOT-Format. Gottseidank existieren aber Tools, mit denen man TTF in EOT umwandeln kann.

Per CSS kann man dann beide Varianten wie folgt einbinden:

@font-face {
  font-family: MeineSchrift;
  src: url('MeineSchrift.eot');
  src: local('MeineSchrift'), url('MeineSchrift.otf'), format('opentype');
}

Dabei wird in der ersten „src“-Zeile die EOT-Datei an den Internet Explorer übergeben; in der 2. Zeile die OTF-Datei an alle anderen. Mit „local“ sperrt man den IE von der Zuweisung aus.

Google WebFonts

Einfacher macht es einem zur Zeit Google. Durch das Einbinden einer Schrift aus dem Google-Directory mit z. B. der Zeile

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

kann man dann über CSS auf die Schrift zugreifen:

CSS selector {
  font-family: 'Font Name', serif;
}

Der Vorteil bei Google ist, dass die Verwendung der Schriften rechtlich unbedenklich ist – was bei „normalen“ TTF-Dateien nicht oft der Fall ist.

Quellen

• c’t Spezial Webdesign; 01/10; Seite 30
• Bulletproof @font-face syntax: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
• Web Embedding Fonts Tool (WEFT): http://www.microsoft.com/typography/WEFT.mspx
• Google WebFonts: http://code.google.com/intl/de-AT/apis/webfonts/