Schrif­ten­viel­falt

Lange war man bei der Gestal­tung von Web­sei­ten auf die bekann­ten Stan­dard­schrif­ten wie Arial, Ver­dana oder Geor­gia beschränkt – sofern man nicht auf Tech­ni­ken wie sIFR oder Cufón zurück­grei­fen wollte. Dies ändert sich durch neue Tech­ni­ken wie @font-face. Mit Hilfe der @font-face-Syntax las­sen sich zahl­rei­che ver­schie­dene Schrif­ten in Web­sei­ten einbinden.

Bereits 1998 wurde mit CSS2 eine Mög­lich­keit beschrie­ben, Schrif­ten in Web­sei­ten ein­zu­bin­den. Micro­soft (Inter­net Explo­rer 4) und Net­scape unter­stütz­ten damals diese Mög­lich­keit, wähl­ten aber nicht das weit ver­brei­tete ttf-Format für die Schrif­ten, son­dern schu­fen eigene For­mate: bei Micro­soft das eot-Format und bei Net­scape True­Doc. Weil sich diese exo­ti­schen Schrift­for­mate nur schlecht aus den ttf-Schriften gene­rie­ren lie­ßen, hat sich ihre Anwen­dung nie durchgesetzt.

@font-face

Neuere Browser-Versionen grif­fen das Thema Schrif­ten mit CSS3 und @font-face wie­der auf. Inzwi­schen wird von fast allen Brow­sern der Ein­satz von web­fonts unter­stützt. Aller­dings set­zen die ver­schie­de­nen Brow­ser auch momen­tan wie­der auf unter­schied­li­che For­mate. Diese wer­den im Fol­gen­den kurz vorgestellt:

EOT, TTF oder OTF, WOFF und SVG

Diese For­mate müs­sen ein­ge­bun­den wer­den, um die gewählte Schrift auf mög­lichst vie­len Brow­sern dar­stel­len zu können.

Das eot-Format exis­tiert seit lan­gem und wird nur vom Inter­net Explo­rer seit der Ver­sion 4 unter­stützt. Dabei han­delt es sich um ein For­mat von Micro­soft, in wel­ches die Schrif­ten mit Hilfe von bestimm­ten Tools umge­wan­delt wer­den müssen.

Schrif­ten im ttf-und otf-Format wer­den von Fire­fox seit der Ver­sion 3.5, von Safari seit 3.1, von Chrome seit 4.0.249.78 und Opera seit der Ver­sion 10 angezeigt.

Das woff-Format (Web Open Font For­mat) setzt sich lang­sam als Stan­dard durch. Es hat zwei Vor­teile gegen­über otf– und ttf-Schriften. Zum einen sind die Dateien kom­pri­miert und zum ande­ren kön­nen sie Meta­da­ten mit Infor­ma­tio­nen zum Ursprung oder der Lizenz der Schrift­art ent­hal­ten. Diese Eigen­schaf­ten machen es zum bevor­zug­ten For­mat der Schrif­ten­an­bie­ter. Fire­fox unter­stützt das woff-Format seit Ver­sion 3.6. Die ande­ren Brow­ser wer­den fol­gen. Die Ent­wick­ler des IE9 haben die Unter­stüt­zung bereits ange­kün­digt und auch die Safari Ent­wick­ler arbei­ten an der Unterstützung.

Das svg-Format wird zur Dar­stel­lung im iPhone und iPad benö­tigt. Es kann aber auch von Safari seit der Ver­sion 3.1, von Chrome seit der Ver­sion 0.3 und von Opera seit der Ver­sion 9 ange­zeigt wer­den. Dabei han­delt es sich nicht um ein webfont–Format im eigent­li­chen Sinne. svg-Schriften sind Text­da­teien, wel­che die ein­zel­nen Zei­chen als ein­zelne Vec­tor­ob­jekte beschrei­ben. svg-Dateien sind nicht kom­pri­miert und ent­hal­ten auch keine Hinting-Informationen (zusätz­li­che Infor­ma­tio­nen zu jedem Zei­chen, z.B. Kerning/Unterschneidung). Die Schrift­art ist im svg–Format also nicht für die Dar­stel­lung am Bild­schirm opti­miert. Opera führt jedoch ein auto­ma­ti­sches Kerning von svg-Schriften durch, zu den ande­ren Brow­sern habe ich lei­der keine Anga­ben gefunden.

Schrif­ten per CSS einbinden

Schrif­ten las­sen sich bei allen moder­nen Brow­sern mit Hilfe der @font-face Syn­tax in Web­sei­ten einbinden. Dabei las­sen sich die ver­schie­de­nen For­mate für die unter­schied­li­chen Brow­ser gemein­sam ein­bin­den. Unter­stützt ein Brow­ser das ange­ge­bene For­mat nicht, wählt er auto­ma­tisch das nächste mög­li­che Schrift­for­mat. Eine Aus­nahme ist hier der IE, wo das eot-Format als ers­tes ange­ge­ben wer­den muss:

@font-face {
  font-family: "Schriftname";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
}

@font-face {
  font-family: "Schriftname kursiv";
  src: url("type/filename-ital.eot");
  src: local("☺"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
}

h2 { font-family: "Schriftname", Georgia, serif; }
h2 em { font-family: "Schriftname kursiv", Georgia, serif; }
em { font-style: italic; }

Die Idee, den loka­len Font mit einem ☺ zu bezeich­nen, stammt übri­gens von Paul Irish. Laut den Open­Type spec funk­tio­nie­ren Unicode-Zeichen mit 2 Bytes (das Smily) nicht als Schrift­na­men auf dem Mac – so dass es sehr unwahr­schein­lich ist, dass es in Zukunft einen Font mit die­sem Namen geben wird.

Im obi­gen Bei­spiel wer­den der nor­male und kur­sive Schnitt der Schrift über unter­schied­li­che Namen ein­ge­bun­den. Statt­des­sen las­sen sich aber auch beide Schnitte unter dem­sel­ben Namen ein­bin­den. Dazu erwei­tert man die @font-face-Deklaration um die ent­spre­chende Eigen­schaft, also font-weight oder font-style. Liegt eine Schrift­fa­mi­lie in mehr als zwei Schrifts­tär­ken vor, müs­sen bei font-weight die nume­ri­schen Werte ange­ge­ben wer­den. Dazu später mehr.

@font-face {
  font-family: "Schriftname";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  font-style: normal;
}

@font-face {
  font-family: "Schriftname";
  src: url("type/filename-ital.eot");
  src: local("☺"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  font-style: italic;
}

p {
  font-family: "Schriftname", Georgia, serif;
  font-style: normal;
}

em {
  font-family: "Schriftname", Georgia, serif;
  font-style: italic;
}

Die Ren­der­qua­li­tät der Schrif­ten schwankt je nach Brow­ser und Betriebs­sys­tem stark. Tests auf den unter­schied­li­chen Platt­for­men sind daher drin­gend zu empfehlen.

Einen sehr aus­führ­li­chen Test der Dar­stel­lungs­qua­li­tät ver­schie­de­ner Schrif­ten gibt es im Blog von David Sutoyo.

Google Font API

Die Brow­ser ver­hal­ten sich unter­schied­lich beim Laden von Schrift. So zeigt der Fire­fox eine Fallback-Schrift aus dem font­stack an, wäh­rend die Schrift lädt. Der Safari zeigt hier erst ein­mal gar kei­nen Text an, bis alle Schrif­ten voll­stän­dig geladen sind.

Die­ses Ver­hal­ten lässt sich mit Hilfe des Google Web­Font Loa­ders jedoch beein­flus­sen. Dabei kann man mit der API nicht nur Schrif­ten von Google, son­dern auch von ande­ren Anbie­tern wie Typekit sowie selbst gehos­tete Schrif­ten einbinden.

Eine Aus­führ­li­che Beschrei­bung gibt es direkt bei Google, ein klei­nes Tuto­rial fin­det sich bei Paul Irish.

Pro­bleme mit ClearType

Im Inter­net Explo­rer 7 und 8 gibt es es häu­fi­ger das Pro­blem, dass die ein­ge­bun­de­nen Schrif­ten sehr aus­ge­franst ange­zeigt wer­den. Dies fällt beson­ders bei Über­schrif­ten in grö­ße­ren Schrift­grö­ßen unan­ge­nehm auf. Im Inter­net Explo­rer 6 tritt das Pro­blem seltener auf.

Auch in ande­ren Brow­sern wie Fire­fox oder Safari kann es unter Win­dows zu Aus­frans­un­gen kommen.

Das Pro­blem wird durch Micro­softs ClearType-Funktion ver­ur­sacht. Dabei ver­sucht das Sys­tem, Text für die Bild­schirm­dar­stel­lung zu opti­mie­ren und führt eine Kan­ten­glät­tung durch. Diese ist bei ein­ge­bun­de­nen Schrif­ten jedoch häu­fig nicht nötig und führt zum fran­si­gen Ergeb­nis. Cle­ar­Type ist dabei im IE7 und IE8 stan­dard­mä­ßig akti­viert. Im IE6 ist dies nicht der Fall. Aller­dings gibt es für Win­dows XP bei Micro­soft einen Clear Type Tuner, um die Ein­stel­lun­gen von Cle­ar­Type zu beein­flus­sen und somit Cle­ar­Type auch im IE6 zu aktivieren.

Hin­ting

Das Pro­blem tritt jedoch kei­nes­wegs bei allen Schrif­ten auf. Ver­fügt die Schrift über ein gutes Hin­ting, ist also für die Dar­stel­lung mit Cle­ar­Type opti­miert, wird sie auch unter Win­dows kor­rekt ange­zeigt. Ein Bei­spiel für eine sol­che Schrift ist die „PT Sans“ von Fonts­quir­rel. Aber auch hier sollte für den IE7 und IE8 der filter-Fix für große Schrift­grö­ßen ange­wen­det werden.

FIX für IE7 und IE8

Eine Lösung wäre es, Cle­ar­Type für ein­ge­bun­dene Schrif­ten im IE7 und IE8 zu deak­ti­vie­ren. Das ist mög­lich, indem man einen pro­prie­tä­ren IE–Fil­ter ver­wen­det, der eigent­lich kei­nen wei­te­ren Effekt hat:

h1, p {
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=IE.png,sizingMethod=crop);
   zoom: 1;
}

Bei obi­gen CSS wer­den die Eigen­schaf­ten fil­ter und zoom nur vom IE inter­pre­tiert. Der Fil­ter sorgt dafür, dass Cle­ar­Type im IE7 und IE8 deak­ti­viert wird (Cle­ar­Type funk­tio­niert nicht auf gefil­ter­ten Ele­men­ten). Für den IE8 laden wir hier noch ein 1×1 Pixel gro­ßes trans­pa­ren­tes PNG, da der Fil­ter im IE8 nicht nur prä­sent, son­dern auch aktiv sein muss. Außer­dem scheint es im IE8 ein wei­te­res Pro­blem zu geben: Ohne das Hin­ter­grund­bild wird die Schrift häu­fig nicht kor­rekt angezeigt.

Die zoom–Eigen­schaft sorgt im IE7 dafür, dass das Ele­ment has­Lay­out hat. Fil­ter kön­nen im IE7 nur auf Ele­mente mit Lay­out ange­wen­det wer­den. Im IE8 gibt es das Pro­blem mit has­Lay­out nicht mehr, da die Eigen­schaft glück­li­cher­weise gestrichen wurde.

Auf den Inter­net Explo­rer 6 hat die­ser Fil­ter keine Wirkung.

Erschei­nen nur die Über­schrif­ten aus­ge­franst, sollte der Fil­ter auch nur für diese ange­wen­det werden.

Um Cle­ar­Type zu deak­ti­vie­ren, gibt es aber auch eine wei­tere Methode: Man kann die Schrifts­tärke im CSS als Zahl dekla­rie­ren, anstatt wie sonst üblich mit nor­mal, bold oder anderem:

h1, p {
   font-weight: 400;
}

Mög­li­che Ein­stel­lun­gen sind, je nach ein­ge­bun­de­ner Schriftart:

100 = -
200 = thin
300 = light
400 = regu­lar / CSS: nor­mal
500 = medium
600 = -
700 = bold / CSS: bold
800 = black
900 = heavy

Diese Methode führt aber nicht bei allen Schrif­ten zum gewünsch­ten Ergebnis.

Cle­ar­Type erkennen

Als Alter­na­tive könnte man auch vorab prü­fen, ob Cle­ar­Type akti­viert ist und ent­spre­chende Schrif­ten zur Ver­fü­gung stel­len oder auf eigene Schrif­ten verzichten.

Die Methode ist nicht ganz ein­fach, wird aber von Zol­tan “Du Lac” Haw­ryluk sehr gut beschrie­ben. Er stellt mit TypeHelper.js auch gleich ein ent­spre­chen­des Script zur Verfügung.

Die Zukunft mit DirectWrite

In Zukunft könnte sich die­ses Pro­blem lösen da Micro­soft mit dem IE9 und auch Fire­fox mit der Ver­sion 3.7 unter Win­dows 7 auf Direct­Write für die Schriftdarstellung setzt.

Direct­Write lässt sich im Fire­fox auch per CSS deak­ti­vie­ren, indem man den Text leicht rotiert:

h1, p {
   -moz-transform: rotate(0.0001deg);
}

Was noch zu beachten wäre

Bei ein­ge­bun­de­nen Schrif­ten sollte nicht ver­sucht wer­den Schnitte zu erzwin­gen, die nicht als rea­ler Schnitt vor­lie­gen. Also zum Bei­spiel kein font-weight: bold; anwen­den, wenn kein fet­ter Schnitt eingebunden ist.

True­Type Schrif­ten wer­den bes­ser geren­dert als Open­Type Schriften.

Tes­ten, tes­ten und wie­der testen

Letzt­end­lich bleibt einem nichts ande­res übrig, als die ver­wen­de­ten Schrif­ten und unter­schied­li­chen Metho­den in allen Brow­sern zu tes­ten. Eine sehr gute Hilfe, um Schrif­ten schnell zu tes­ten ist Font­Fri­end.

Es besteht immer die Mög­lich­keit, dass die Schrift trotz­dem nicht kor­rekt angezeigt wird.

Abwärts­kom­pa­ti­bi­li­tät

Beim Ein­satz von web­fonts ist es wich­tig sicher­zu­stel­len, dass die Seite auch in älte­ren Brow­sern noch les­bar ist. Dazu soll­ten ent­spre­chende font–stacks im CSS defi­niert wer­den. Dabei ist dar­auf zu ach­ten, dass die ange­ge­be­nen Alternativ-Schriften von der Schrift­größe und –lauf­weite zu den gewähl­ten web­fonts passen:

h1 {
   font-familie: "Museo", Verdana, Arial, sans-serif;
}

Schrift­grö­ßen über die x-Höhe auf­ein­an­der abstimmen

Eine Hilf­rei­che CSS–Eigen­schaft, die aller­dings bis­her nur von Fire­fox unter­stützt wird, ist font-size-adjust. Damit lässt sich ein Form­fak­tor defi­nie­ren, um die x-Höhe unter­schied­li­cher Schrift­ar­ten anzu­pas­sen. Als Wert gibt man den Aspekt­wert (Ver­hält­nis zwi­schen der Höhe der Groß­buch­sta­ben und der x-Höhe einer Schrift) der Haupt­schrift an. Fehlt diese, nimmt der Brow­ser die nächste Schrift, ska­liert sie aber so das der x-Wert der neuen Schrift gleich der Haupt­schrift ist:

h1 {
   font-family:Verdana, Arial, sans-serif;
   font-size:12px;
   font-size-adjust:0.58;
}

Laut W3C soll­ten, bei genau auf­ein­an­der abge­stimm­ten Schrif­ten umge­bende span-Tags die selbe Höhe haben. Dies kann man sich zunutze machen, um Schrif­ten auf­ein­an­der abzustimmen.

span {
   border: 1px solid #f00;
}

span.adjust {
   border: 1px solid #f00;
   font-size-adjust: 0.5;
}

   <span>a</span>
   <span class="adjust">a</span>

Man stellt also zwei Gly­phen der unter­schied­li­chen Schrif­ten neben­ein­an­der und ver­sieht sie mit span-Tags. Mit den span-Tags zeich­net man jeweils einen Kas­ten um die Gly­phe und stimmt diese dann aufeinander ab.