Webfont

Bezeich­nung für einen auf Hyper Text Mar­kup Lan­gua­ge (HTML/XHTML) basie­ren­den Font, des­sen typo­me­tri­sche Klas­si­fi­ka­ti­ons­merk­ma­le von Web­brow­sern (Soft­ware­pro­gram­me zur Dar­stel­lung von Web­sei­ten, z.B. Inter­net Explo­r­er®, Safa­ri®, Goo­gle Chro­me® oder Fire­fox®) – unab­hän­gig vom ver­wen­de­ten Betriebs­sys­tem – mehr oder weni­ger schrift­stil­nah inter­pre­tiert wer­den kann. 1 )

Ety­mo­lo­gi­sch aus dem Eng­li­schen »Web« als Abkür­zung für »World Wide Web« für »Welt­wei­tes Netz« also »Netz« und engl. »Font« für »Schrift, Zei­chen­satz«; Web Fonts; Netz­schrif­ten.

Web­fonts sind pri­mär für den Ein­satz in (X)HTML-Webseiten bzw. für brow­ser­ba­sier­te digi­ta­le Tex­te vor­ge­se­hen; sie wer­den in der Regel beim Auf­ruf einer Web­sei­te nicht aus der loka­len Schrif­ten­samm­lung (sie­he Sys­tem­schrif­ten) eines Com­pu­ters (z.B. PC, Tablet, Smart­pho­ne), son­dern von einem exter­nen Web­ser­ver in den Brow­ser (Cli­ent) ein­ge­la­den. 

Bezugsquellen

Bezugs­quel­len für Web­fonts 2 ) sind Font Found­ries (z.B. Lino­ty­pe®), Schrift­por­ta­le (z.B. Goo­gle Fonts) oder Schrift­ge­stal­ter (z.B. Gerard Unger), die die­se online ver­trei­ben (Aus­wahl sie­he Font Found­ry). 

Lizenzen und Kosten

Web­fonts wer­den sowohl als kos­ten- und nut­zungs­freie 3 ) wie auch als kos­ten- und lizenz­pflich­ti­ge Fonts 4 ) im Inter­net ver­trie­ben. Kos­ten und Lizenz­be­stim­mun­gen dif­fe­rie­ren je nach Anbie­ter und/oder Land, wel­che sich von Gra­tis-, Son­der-, Kom­bi- oder Pau­schal­an­ge­bo­ten, Abrech­nung nach Page­views 5 ) bis hin zu Abon­ne­ment­model­len 6 ) erstre­cken.

Formate 

Seit der Ein­füh­rung der »@font-face-Regel« ab CSS2 7 ) kön­nen rein tech­ni­sch betrach­tet, alle Schrif­ten in Web­sites ein­ge­bet­tet wer­den 8 ) 

Web­fonts wer­den in unter­schied­li­chen Datei­for­ma­ten ange­bo­ten:

  • EOT (Embed­ded Open Type) 9 )
  • OT (Open­Ty­pe For­mat) 10 )
  • RTT (Raw Tru­e­Ty­pe)
  • SVG (Scalable Vec­tor Gra­phics)
  • TTF (Tru­e­Ty­pe Font)
  • WOFF (Web Open Font For­mat 1.0) 11 )
  • WOFF2 (Web Open Font For­mat 2.0) 

Font Konvertierung

CID-key­ed Open­Ty­pe Post­Script® (.otf), Mac Schrift­kof­fer (LWFN, FFIL), Mul­ti­ple Mas­ter Fonts, Open­Ty­pe Post­Script® (.otf), Open­Ty­pe TT, Post­Script® Type 1 (.pfb, .pfa, .pfm, .afm und .inf), Tru­e­Ty­pe (.ttf) und Tru­e­Ty­pe Collec­tions (.ttc) kön­nen u.a. mit­tels Font Edi­tor Soft­ware (z.B. Fon­to­gra­pher von Font­LAP®) oder Font Con­ver­ter Soft­ware (z.B. Trans­Ty­pe von Font­LAP®) zu Web­fonts (EOT Embed­ded Open Type, WOFF Web Open Font For­mat und SVG Scalable Vec­tor Gra­phics) umge­wan­delt wer­den. 

Font Hinting

Die Dar­stel­lungs­qua­li­tät eines Web­fonts in einem Brow­ser (Cli­ent) wird weni­ger vom Datei­for­mat des Fonts bestimmt, son­dern ins­be­son­de­re von der Qua­li­tät des »Hin­ting«. 12 ) Des­halb ist die Qua­li­tät des Font Hin­tings ein wesent­li­ches Kri­te­ri­um bei der Wahl eines Web­fonts (sie­he auch Schrift­wahl).

Font Kerning

Im Ver­gleich zu Druck­schrif­ten (Post­Script® Fonts) ist das Kerning bei der Bild­schirm­dar­stel­lung von Web­fonts gegen­wär­tig noch von gerin­ger Qua­li­tät. Ein prä­zi­ses Manu­el­les Kerning ist nicht mög­li­ch. Grund­sätz­li­ch kön­nen jedoch die meis­ten moder­nen Inter­net-Brow­ser (Cli­ents, z.B. Safa­ri ®, Goo­gle Chro­me ® oder Fire­fox ® etc.) heu­te Kerning- und Liga­tur­in­for­ma­tio­nen aus­wer­ten, wobei jeder Cli­ent die­se unter­schied­li­ch inter­pre­tiert und den Auf­bau einer Web­site ver­lang­samt (sie­he Kerning).

Browser

Web­fonts wer­den (Stand Dezem­ber 2015) von fol­gen­den Brow­sern unter­stützt:

  • App­le® Webkit/Safari® ab Ver­si­on 3.1
  • Micro­soft® Inter­net Explo­r­er® ab Ver­si­on 4
  • Goo­gle Chro­me® ab Ver­si­on 4.0
  • Mobi­le Safa­ri® in allen Ver­sio­nen (für iPho­ne®, iPad®, iPod®)
  • Mozil­la® Fire­fox® ab Ver­si­on 3.5
  • Ope­ra® ab Ver­si­on 10.10

Einbettung

Web­fonts kön­nen sowohl auf eige­nen wie auch auf frem­den Ser­vern (Hos­ting) hin­ter­legt wer­den. Das Ein­bin­den eines Web­fonts erfolgt in der Regel über die »@font-face-Regel« im »CSS Cas­ca­ding Sty­le Sheets« 13 ) einer Web­sei­te.

Bei­spiel einer Web­font­ein­bet­tung:

@font-face {
    font-family: 'musterschrift_regular';
       src: url('musterschrift-xy.eot');
       src: url('musterschrift-xy.eot?#iefix') 
       format('embedded-opentype'),
       url('musterschrift-xy.woff') 
       format('woff'),
       url('musterschrift-xy.ttf') 
       format('truetype');
    font-weight: normal;
    font-style: normal; 
}

Des Wei­te­ren kön­nen Web­fonts auch über Java­script®, ein API App­li­ca­ti­on Pro­gramming Inter­face (Schnitt­stel­le zur Anwen­dungs­pro­gram­mie­rung) oder spe­zi­el­le Soft­ware­mo­du­le (Soft­warep­lug­ins) 14 ) ein­ge­bun­den wer­den.

Schriftschnitte

Web­fonts gibt es sowohl als ein­zel­ne Schrift­schnit­te wie auch als kom­plet­te Schrift­fa­mi­li­en. 15 ) Bei der Ein­bin­dung in Web­sites wei­chen aller­dings in der Web­ty­po­gra­phie oft gän­gi­ge Ter­mi­ni von denen der klas­si­schen Schrift­klas­si­fi­ka­ti­on ab. Bei­spiels­wei­se kön­nen ein­zel­ne Schrift­schnit­te mit nume­ri­schen Codes aus der digi­ta­len Schrift­ge­stal­tung (z.B. font-sty­le: 400; = normal/regular/roman) in ein »CSS Cas­ca­ding Sty­le Sheets« 16 ) ein­ge­bun­den wer­den.

Bei­spiel nume­ri­scher Codes bei Web­fonts:

Nume­ri­scher Code / CSSBezeich­nungSchrift­schnitt
100ThinUltra leicht
200Extra LightExtra leicht
300LightLeicht
400Nor­ma­leNor­mal
500Medi­umLeicht­halb­fett
600Semi BoldHalb­fett
700BoldFett
800Extra BoldExtra­fett
900Ultra BoldUltra­fett

Druck

Web­fonts sind kei­ne PostScript®-Schriften. D.h., sie sind nicht für die pro­fes­sio­nel­le Druck­vor­stu­fe (z.B. im Off­set­druck) geeig­net. Selbst bei Aus­dru­cken auf simp­len Büro­dru­ckern (z.B. Laser­dru­cker) kann es zu mar­kan­ten Abwei­chun­gen vom Ori­gi­nal­schrift­bild kom­men. 

© Wolf­gang Bei­nert, www​.typo​l​e​xi​kon​.de

Share / Bei­trag tei­len:

Quellen / Literatur / Anmerkungen / Informationen / Tipps   [ + ]

1.Anmer­kung: Die Dar­stel­lung eines Web­fonts auf unter­schied­li­chen PCs und unter­schied­li­chen Aus­ga­be­ge­rä­ten weicht in der Regel grund­le­gend je nach ver­wen­de­ter Hard­ware, Betriebs­sys­tem, Brow­ser, Brow­ser­ver­si­on, Grund­ein­stel­lun­gen des Brow­sers, Bild­schirm­qua­li­tät, Bild­schirm­auf­lö­sung, Anti-Alia­sing, Gra­fik­kar­te, etc. spür­bar von­ein­an­der ab. Von einer ein­heit­li­chen Dar­stel­lung im Sin­ne der Mikro­ty­po­gra­phie kann zur­zeit noch nicht gespro­chen wer­den.
2.Anmer­kung: Mehr­heit­li­ch wer­den soge­nann­te »Web­fonts« zur Nut­zung ange­bo­ten, die lei­der nichts ande­res als Druck­schrif­ten und eben kei­ne im Sin­ne der Lese­ty­po­gra­phie für den Bild­schirm ent­wi­ckel­ten Screen Fonts sind. Vie­le Font Found­ries ver­su­chen so, ihren digi­tal vor­han­de­nen Druck­schrif­ten­be­stand bes­ten­falls als »opti­mier­te« Web­fonts zu ver­kau­fen.
3.Anmer­kung: Im Inter­net gibt es vie­le lizenz­freie Ange­bo­te, bei­spiels­wei­se Goo­gle Fonts (www​.goo​gle​.com/​f​o​nts) mit der­zeit rund 650 Web­fonts oder Font Squir­rel (www​.fonts​quir​rel​.com). Die­se Fonts sind gestal­te­ri­sch nicht unbe­dingt schlech­ter oder bes­ser als lizenz­ge­bun­de­ne Schrif­ten.
4.Hin­weis: Urhe­ber­recht für Schrif­ten und Mythos »Schrift­soft­ware«. Eine kri­ti­sche Anmer­kung von Wolf­gang Bei­nert.
5.Anmer­kung: Die Page­views (Sei­ten­zu­grif­fe) wer­den in der Regel mit­tels Tracking gezählt. D.h., der Schrift­ver­käu­fer hat somit immer Zugriff auf Ihre ver­trau­li­chen Webana­ly­se­da­ten.
6.Anmer­kung: Bei der Schrift­wahl ist die auch die Eva­lu­ie­rung des Lizenz­mo­dells wich­tig. Denn wel­che Gefah­ren dro­hen – ins­be­son­de­re bei Abo­mo­del­len – bei Insol­venz oder Ein­stel­lung des Web­font­diens­tes? (z.B. WebINK, der ab Juni 2015 sei­nen Dienst ein­stell­te und dadurch erheb­li­che Kos­ten bei Agen­tu­ren und Fir­men ver­ur­sach­te. (Quel­le: Pres­se­mit­tei­lung Dr. Web: Web­fonts adé: Typekit-Kon­kur­rent WebINK gibt auf, 17.2.2015). Wie schnell sind die Ser­ver? Wie gut ist die Anbin­dung an das Web?
7, 13, 16.Anmer­kung: CSS Cas­ca­ding Sty­le Sheets ist ein welt­wei­ter Stan­dard des W3C (World Wide Web Con­sor­ti­um).
8.Anmer­kung: Web­fonts sind Vek­tor­gra­fi­ken, die vom jewei­li­gen Cli­ent in eine Pixel­ma­trix umge­wan­delt wer­den, um so den Font in einem Web­brow­ser dar­stel­len zu kön­nen. Gene­rell ist also nicht das Schrift­for­mat, wie Tru­e­Ty­pe (TTF), Open­Ty­pe (OT), SVG oder Post­Script® aus­schlag­ge­bend, son­dern das Hin­ting, wel­ches die Dar­stel­lungs­qua­li­tät der Schrift im Brow­ser opti­miert.
9.Anmer­kung: Das EOT-For­mat braucht man eigent­li­ch nur noch, wenn man den Inter­net Explo­r­er vor Ver­si­on 9 unter­stüt­zen möch­te.
10.Anmer­kung: Fast alle Brow­ser unter­stüt­zen heu­te Open­Ty­pe. Somit kön­nen auch OT-Fea­tures wie Liga­tu­ren oder Son­der­zei­chen per CSS-Befehl imple­men­tiert wer­den.
11.Anmer­kung: Zur Siche­rung von Lizenz­rech­ten der im Inter­net genutz­ten Schrif­ten wur­de 2009 das Web Open Font For­mat (WOFF) geschaf­fen. Es unter­schei­det sich nur gering von einem Open Type File. Eine WOFF-Datei ist nichts ande­res als ein ZIP-Archiv, das XML-Metain­for­ma­tio­nen über Lizenz und Her­stel­ler sowie den Raw­Font ent­hält. Ent­wi­ckelt wur­de die­ses For­mat von Erik van Blok­land, Tal Leming und Jona­than Kew. WOFF gilt als offi­zi­el­ler W3C-Stan­dard, der zur­zeit vom neu­en Kom­pres­si­ons­ver­fah­ren »Brot­li« (WOFF 2.0) ersetzt wer­den wird. Der »Brotli«-Algorithmus wur­de von Goo­gle ® ent­wi­ckelt und ver­spricht eine Grö­ßen­re­du­zie­rung der Schrift­da­tei­en von bis zu 50 Pro­zent gegen­über WOFF 1.0.
12.Anmer­kung: Bei vie­len kos­ten­lo­sen Web­fonts wird meist auf das Hin­ting ver­zich­tet, was die Buch­sta­ben unscharf erschei­nen lässt.
14.Bei­spiel: Das Word­press Goo­gle Fonts Plugin von Adri­an Hanft und Aaron Brown. in eine Web­site.
15.Anmer­kung: Der Zei­chen­vor­rat eines Web­fonts kann merk­li­ch von dem einer gleich­na­mi­gen Druck­schrift abwei­chen. Ins­be­son­de­re kos­ten­lo­se oder von Ama­teu­ren gefer­tig­te Web­fonts wei­sen hier mar­kan­te Defi­zi­te auf.