B3W HTML 5 Blog

Mit den aktu­el­len Brow­sern und den Tech­ni­ken aus CSS 3 ist es nun mög­lich, typo­gra­phisch fei­nere Web­sei­ten zu ver­öf­fent­li­chen. Mit dem @font-face Befehl — der ursprüng­lich schon in CSS 2 ent­hal­ten war, in CSS 2.1 aber wie­der ent­fernt wurde — kön­nen belie­bige Schrif­ten nach­ge­la­den wer­den. Dabei kön­nen pro Schrift durch­aus einige 100 kbyte zusam­men kom­men. Man sollte den @font-face Befehl also nur mit Bedacht ein­set­zen. Den­noch ist dies gegen­über alt­be­währ­ten Tech­ni­ken wie der Ein­satz von Gra­fik oder die Wand­lung von Schrift in Gra­fik oder Flash (wie sFIR) ein deut­li­cher Zuge­winn an Fle­xi­bi­li­tät und Leis­tungs­fä­hig­keit. Vor allem kön­nen Über­schrif­ten usw. nun typo­gra­phisch beson­ders sein und den­noch von Such­ma­schi­nen gese­hen werden.

Urhe­ber­rechte beachten

Aller­dings ist hier­bei zu beach­ten, daß Schrif­ten natür­lich urhe­ber­recht­lich geschützt sind. Wer also auf diese Weise Schrif­ten zum Down­load anbie­tet, muß über die nöti­gen Lizen­zen verfügen. Einige Web­sei­ten wie bie­ten freie Schrif­ten an (wie Font Squir­rel) oder stel­len kom­mer­zi­elle Schrif­ten bereit (wie Typekit, Typo­the­que oder Ker­nest). Auf Dr. Web fin­det sich eine Liste mit 35 sehr schö­nen freien Schrif­ten. Viele freie Schrif­ten sind aller­dings nicht ganz so aus­ge­reift wie kom­mer­zi­elle Schrif­ten, bei­spiels­weise was das Kerning angeht.

Unter­schied­li­che Brow­ser — unter­schied­li­che Schriftdateien

Lei­der benö­ti­gen unter­schied­li­che Brow­ser unter­schied­li­che Schrift­for­mate: Der Inter­net Explo­rer erwar­tet sie im EOT-Format, Fire­fox seit Ver­sion 3.1, Opera seit Ver­sion 10 und Safari seit Ver­sion 3 ver­ste­hen das TTF-der OTF-Format.

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }
@font-face {
  font-family: "Your italic typeface";
  src: url("type/filename-ital.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  }

Für die gän­gi­gen Brow­ser sind True­Type (oder Open­Type) — sowie EOT-Fonts aus­rei­chend. WOFF ist ein neues, spe­zi­ell für den Ein­satz im Web gedach­tes Font­for­mat, das aber noch unbe­deu­tend ist. Einige Exo­ten­brow­ser wün­schen zudem SVG-Fonts, doch ist zu hof­fen, das dies über kurz oder lang ver­schwin­den wird.

Im Web gibt es einige Tools, Schrif­ten in diverse For­mate zu kon­ver­tie­ren, bei­spiels­weise der Font­ge­ne­ra­tor von Font Squirrel.

Mit Bedacht einsetzen

Es steht aller­dings zu befürch­ten, daß der @font-face Befehl anfangs über­trie­ben ein­ge­setzt wird. Man bedenke nur zu welch schlim­men gra­fi­schen Exzes­sen das Auf­tau­chen der ers­ten preis­wer­ten Schriften-CDs im DTP Bereich vor 10–15 Jah­ren geführt hat. Wün­schens­wert ist daher eine gewisse Selbst­be­schrän­kung bei Web­de­si­gnern und ein wenig Beschäf­ti­gung mit Typo­gra­phie. Nor­ma­ler Fließ­text darf ruhig wei­ter­hin in Ver­dana oder ähnli­chem gesetzt wer­den, schließ­lich ist Ver­dana eine bewährte, gut les­bare Bildschirmschrift.