Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Ralf Herrmann 17. September 2010

@font-face: Im zweiten Anlauf erfolgreich – Geschichte der Webfonts

Im Webdesign herrscht Goldgräberstimmung. Mit der neu­en Möglichkeit, belie­bi­ge Schriften per @font-face in Webseiten ein­zu­bin­den, ist end­lich ein neu­es Stilmittel hin­zu­ge­kom­men, dass die gewohn­te Eintönigkeit der Systemschriften ablö­sen soll. In die­ser Artikelserie wer­den die Entwicklung und die heu­ti­gen Möglichkeiten die­ser Technologie aus­führ­lich beleuch­tet.

Seit Anbeginn des Internets wer­den auf Webseiten vor allem Systemschriften ver­wen­det. Das heißt, die Webseite schlägt dem Browser des Benutzers bestimm­te Schriftarten wie Arial, Verdana oder Times New Roman zur Darstellung vor, und der Browser benutzt die­se, sofern sie tat­säch­lich instal­liert sind. Webdesigner kön­nen die Textdarstellung somit nur unzu­rei­chend beein­flus­sen und die Webseite wird womög­lich auf unter­schied­li­chen Rechnern in völ­lig unter­schied­li­chen Schriften dar­ge­stellt.

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

In die­sem Bereich hinkt das Web den Möglichkeiten der Drucksachengestaltung noch weit hin­ter­her. Für Überschriften ist es zum Beispiel hilf­reich, die eher schmal lau­fen­den Condensed-Schriften zu ver­wen­den, aber unter den Systemschriften gibt es sol­che Schriften prak­tisch nicht. Unternehmen, die eine eigens ent­wi­ckel­te Hausschrift besit­zen, kön­nen die­se eben­falls nicht benut­zen und müs­sen ihre Webseite dann zum Beispiel ersatz­wei­se in Arial dar­stel­len, was dem Gedanken eines durch­gän­gi­gen Corporate Designs natür­lich völ­lig zuwi­der läuft.

@font-face gab es bereits Ende der 1990er Jahre

Die Möglichkeit, belie­bi­ge Schriftarten in Webseiten ein­zu­bin­den, bestehen jedoch schon sehr lan­ge. Netscape 4 und Internet Explorer 4 ver­stan­den bereits Ende der 1990er Jahre die so genann­te @font-face-Regel, mit der Schriften auf dem Server abge­legt, und zusam­men mit der Webseite aus­ge­lie­fert wer­den konn­ten.

@font-face {
font-family: Gentium;
src: url(fonts/gentium.eot);
}

Doch die­se Technik war ihrer Zeit zu sehr vor­aus. Die Schriftdarstellung erfolg­te zu die­ser Zeit noch ohne oder nur mit einer ein­fa­chen Graustufen-Kantenglättung. Für Systemschriften war dies kein Problem, denn die­se sind sehr auf­wän­dig für die­se Darstellung opti­miert, sodass sie bei jeder belie­bi­gen Schriftgröße immer opti­mal les­bar erschei­nen. Doch woll­te man nun zum Beispiel eine belie­bi­ge Druckschrift benut­zen, war die Darstellung wegen der feh­len­den manu­el­len Bildschirmoptimierung so schlecht, dass der Einsatz mehr Nachteil als Vorteile brach­te.

So ver­wun­dert es auch nicht, dass die @font-face-Regel in CSS 2.1 ein­fach ersatz­los gestri­chen wur­de. Der Einsatz von Systemschriften auf Webseiten blieb nach wie vor Standard, ins­be­son­de­re zur Darstellung län­ge­rer Texte. Für Überschriften haben sich ver­schie­de­ne Notlösungen eta­bliert, etwa die Darstellung als vor­ge­fer­tig­te Bitmapgrafiken oder die Einbettung von klei­nen Flash-Filmen, die ihrer­seits eine Schrifteinbettung mit­brin­gen konn­ten. Und in den letz­ten Jahren ent­stan­den neue Ansätze wie Typeface.js und Cufón, die die Darstellungsmöglichkeit von Vektorobjekten aus­nut­zen, um mit­tels JavaScript Überschriften durch Schriftzeichen belie­bi­ger Schriftarten aus­zu­tau­schen. Doch alle die­se Techniken brin­gen Probleme mit sich – sei es bei der Suchmaschinen-Indizierung, beim Kopieren-und-Einfügen oder beim Zoomen der Webseiten.

Im zweiten Anlauf erfolgreich dank modernem Subpixel-Rendering

Die Wende um den Webfont-Einsatz wur­de 2008 mit der Veröffentlichung von Safari 3.1 ein­ge­lei­tet, bei der Apple die alte @font-face-Regel wie­der ein­führ­te. Der Grund, war­um die­se 10 Jahre zuvor geschei­ter­te Technologie jetzt Erfolg ver­spre­chen­der war, liegt in der deut­lich ver­bes­ser­ten Bildschirmdarstellung. Heute sind Flachbildschirme Standard und zur Kantenglättung wer­den nun auch die Subpixel, also die drei Farbbestandteile eines Pixels, her­an­ge­zo­gen. Dies ermög­licht eine wesent­lich bes­se­re Wiedergabe der Schriftformen selbst bei sehr klei­nen Schriftgrößen. In Mac OS X ist die­se Technologie stan­dard­mä­ßig akti­viert. In Windows trägt sie den Namen ClearType und ist hier seit Vista akti­viert, obwohl auch Benutzer von Windows XP die­se Darstellung zuschal­ten kön­nen.


Heutiges Subpixelrendering am Beispiel von Safari unter Mac OS X

Eine Besonderheit bei der @font-face-Unterstützung in Safari liegt dar­in, dass erst­mals die Standard-Fontformate TrueType (.ttf) und OpenType (.ttf/.otf) ohne jeg­li­che Konvertierung ein­ge­bun­den wer­den kön­nen.

@font-face {
font-family: GraublauWeb;
src: url(fonts/graublau.otf) format ("opentype");
}

Die Bedenken der Schriftenanbieter

Dies brach­te vor allem die Anbieter kom­mer­zi­el­len Schriften auf die Barrikaden, da die­se nun befürch­te­ten, dass die­se Technik dem Raubkopieren von kom­mer­zi­el­len Fonts Tür und Tor öff­net. Denn über die @font-face-Regel wer­den die Schriften ja nicht im wört­li­chen Sinne in die Webseite „ein­ge­bet­tet“, son­dern ledig­lich im CSS ver­linkt. Ein Blick in den Quelltext genügt also, um die ein­ge­bun­de­nen Schriftarten auf­zu­spü­ren und her­un­ter­zu­la­den, sodass sie sich im System instal­lie­ren las­sen.


Safari 3.1 lie­fer­te erst­mals die Unterstützung für Standard-Fontformate (Demo-Seite)

In der Folge ent­wi­ckel­te sich eine hit­zi­ge Diskussion zwi­schen Browser-Herstellern und Schriftanbietern. Letztere wünsch­ten sich für kom­mer­zi­el­le Schriften einen Schutzmechanismus, der den unbe­rech­tig­ten Einsatz auf unli­zen­zier­ten Seiten und die Installation auf Rechnern unter­bin­den soll­te. Doch die Browser-Hersteller sahen sich ver­ständ­li­cher­wei­se nicht in der Pflicht, die Lizenz-Ansprüche von Schriftherstellern durch­set­zen zu müs­sen. Dies müs­sen die Anbieter von Inhalten selbst über­neh­men, so wie ja auch die Anzeige von urhe­ber­recht­lich geschütz­tem Bild- und Tonmaterial nicht durch den Browser selbst in irgend­ei­ner Weise kon­trol­liert wird.

Aus die­sem Konflikt sind in erfreu­lich kur­zer Zeit zwei Lösungswege ent­stan­den. Einerseits die Einbindung von Schriftart über Webfont-Dienste und ande­rer­seits die Entwicklung des neu­en WOFF-Schriftformates, das spe­zi­ell für den Einsatz auf Webseiten kon­zi­piert wur­de. Beides wird in den fol­gen­den Artikeln die­ser Serie im Detail erläu­tert.

Das lesen Sie in den nächsten Teilen der Serie:
  • Webfont-Formate
  • Webfont-Anbieter
  • @font-face-Einbindung selbst gemacht
  • Ausblick: Schrift im Web
(mm),

Ralf Herrmann

Ralf Herrmann hat sich in der Typografie-Szene vor allem als Betreiber der beliebten typografischen Internet-Community Typografie.info einen Namen gemacht. Er ist außerdem Autor typografischer Fachbücher und Herausgeber des Typografie-Magazins TypoJournal. Die neuen Entwicklungen rund um Webfonts dokumentiert er auf der Seite webfonts.info

13 Kommentare

  1. Die Artikelreihe ist sehr gut und inter­es­sant.

    Die all­ge­mei­ne Skepsis kann ich nur teil­wei­se nach­voll­zie­hen. Nicht gut aus­ge­bil­de­te Designer wie es Sie schon immer gab, wer­den auch jetzt, trotz Webfonts (oder gra­de wegen die­ser), kein schö­nes Design lie­fern.

    Gute Leute aus der Webbranche soll­ten nichts “anrich­ten”. Da bin ich als Designer mit einer ver­nünf­ti­gen Beratung und qua­li­ta­tiv hoch­wer­ti­ger Arbeit gefragt um das Web indi­vi­du­el­ler, schö­ner und span­nen­der zu machen.

    Neuen (eigent­lich hier alten) Techniken gegen­über ste­he ich grund­sätz­lich offen gegen­über, solan­ge sie ver­nünf­tig und mass­voll ein­ge­setzt wird.

  2. Dieser Artikel liest sich extrem gut und ist sehr inter­es­sant. Ich freu mich auf die Fortsetzung. Danke!

  3. Ich kann da sacr­i­on nur zustim­men… es wird Unmengen an Seiten geben, die bis zum Brechreiz Typos ein­set­zen wer­den, ohne Sinn und Verstand.
    Kontrastprobleme gibt es nun auch schon genü­gend und das wird sich nicht durch Typos ändern las­sen.

    Ich den­ke für Überschriften sind die neu­en Schriftarten ein ech­ter Gewinn, aber bei Fließtext soll­te es bei Arial oder Verdana blei­ben. Meine Meinung!

    • Da sich die font-face “noch” nicht eta­bliert hat, konn­te sich ein gewis­ser Standard durch­set­zen. Sicherlich auch da Webeditoren wie z.B. Dreamweaver fer­ti­ge Deklarationen lie­fert (font-fami­ly: Arial, Helvetica, sans-serif;) . Je mehr Möglichkeit ein Webpublisher hat, um so mehr kann er “anrich­ten”. Auf jeden Fall eine span­nen­de Sache und eine Chance auf schö­nes typo­gra­fi­sches Web. Ich den­ke da vor allen an Designer-Firmen die ger­ne mit Ihren Schriftzügen wer­ben wol­len und daher Flash ein­ge­setzt haben.

  4. Sehr inter­es­san­ter Artikel, ich habe mich selbst eine Weile mit dem Thema für einen eige­nen Blogbeitrag beschäf­tigt und bin schon auf die wei­te­ren Teile gespannt.

    @sacrion
    Natürlich besteht die Gefahr das Nutzer die­se Funktion miss­brau­chen und damit wirk­lich augen­schä­di­gen­de Fonts für den Fließtext ver­wen­den, aber da kann man nur auf die Designer hof­fen.

  5. Ich hal­te davon ja nicht all­zu viel. Die “lang­wei­li­gen” Systemschriftarten sor­gen dafür, dass man jede Website ohne viel Mühe lesen kann, ohne sich jedes Mal auf ein neu­es Schriftbild ein­stel­len zu müs­sen.

    Gott sei Dank kann ich mei­nen Browser ja dazu brin­gen, die­se Einstellungen zu igno­rie­ren. Mein Browser zeigt alles in Arial an, das schont mei­ne Augen.

    • Das kommt dar­auf an – wie immer im Leben und beim Einsatz von Technik. Die Schrift allein ent­schei­det nicht über Lesbarkeit. Ich habe schon sehr vie­le Webseiten gese­hen, die eine wei­ße Arial auf schwar­zem Hintergrund ver­wen­den oder schwar­ze Arial auf Magenta. Das ist trotz Standardschrift kaum les­bar.

      Ich fin­de, man soll­te nicht immer gleich vom Schlimmsten aus­ge­hen und sinn­vol­le Entwicklungen wegen eines mög­li­chen Missbrauchs schlecht reden.

      Viel inter­es­san­ter fän­de ich es, wenn Webdesigner und der Lesbarkeit ver­pflich­te­te Website-Betreiber anspre­chen­de UND les­ba­re Designs/Typografie mit Webfonts vor­le­gen. Das wäre doch mal ein berei­chen­der und krea­ti­ver Arbeitsansatz.

  6. @Sebastian
    Darauf wird in den wei­te­ren Artikeln die­ser Serie noch ein­ge­gan­gen. Das von dir geschil­der­te Verhalten betrifft übri­gens nur Firefox. Ich hab lan­ge mit den Entwicklern dar­über debat­tiert, ob man die­ses Verhalten nicht Code-basiert steu­ern könn­te. Aber bis­lang ist lei­der alles beim alten geblie­ben.

  7. Meine bis­he­ri­gen Erfahrungen mit web­fonts erga­ben ein wei­te­res Problem. Im Gegensatz zum Einsatz lokal instal­lier­ter Schriften ergibt sich bei web­fonts das Problem, dass nach erst­ma­li­gen Seitenaufruf der benö­tig­te Schriftsatz erst mit einer gewis­sen Verzögerung vor­liegt (in Abhängigkeit der Netzverbindung & Geschwindigkeit des Rechners, der den gehol­ten Schriftsatz ja erst instal­lie­ren muß). Die Folge ist eine kur­ze Seitenansicht mit Standardschrift, über die dann der web­font sicht­bar “rüber­ploppt”. Abhilfe kann dafür mei­nes Wissens nach nur ein unschö­ner pre­l­oa­der schaf­fen, oder?

  8. Die Skepsis ist sicher berech­tigt. Allerdings nicht nur im Hinblick auf die Typographie. Es ist immer wie­der erschre­ckend, wie vie­le grot­ti­ge Seiten (Design und Technik) es im Web gibt.

    Aber trotz­dem ist die­se Technik ein Segen im Hinblick auf die Arbeit, die zB hin­ter gra­phi­schen Labels steckt – im Vergleich zu einem H2 ;-)

    Bin gespannt, was es in den wei­te­ren Folgen noch Neues gibt…

    Ach ja, und auch inter­es­sant, dass Google gleich mal ne Font API anbie­tet – wenn auch nur mit eini­gen weni­gen Schriften…

  9. Bleibt zu erwäh­nen, daß die meis­ten Seiten jetzt ver­mut­lich viel inter­es­san­ter wer­den, wenn man eige­ne Fonts ein­bau­en und ver­wen­den kann. Die Designerfuzzies sind ver­mut­lich kurz vorm Austoben…

    • Sehr schö­ner Artikel, Ralf.

      Man soll­te sich von der Vielfalt der ver­füg­ba­ren Möglichkeit zwar ruhig begeis­tern las­sen, aber den­noch im Kopf behal­ten, dass man — bevor man eine Schriftart ein­setzt — sich genau über­le­gen muss, ob sie passt oder nicht. Bevor wir als Designer anfan­gen, sämt­li­che Schriftarten im Web ein­zu­set­zen, müs­sen wir erst einen Schritt rück­gän­gig machen und genau­er ver­ste­hen und ler­nen wie man eine Schrift ver­nünf­tig ein­setzt und wie man Schriftarten kom­bi­niert. Nicht jede klas­si­sche Schriftart ist für Screendesign opti­miert, und nicht jede klas­si­sche Schriftkombination lässt sich aufs Web über­tra­gen.

      Wir wis­sen als Designer etwa ganz genau dass Georgia sich in der Schriftgröße ab 14–16px ihre wah­re Schönheit zeigt, und dass 1.45–1.5em eine opti­ma­le Zeilenhöhe für die­se Größe ist. Die weni­gen Schriftarten, die wir bis­her kann­ten, wis­sen wir ganz genau, aber die Vielfalt von ande­ren, nun ver­füg­ba­ren Schriftarten ken­nen wir zum Teil gar nicht.

      Ehrlich gesagt, bin ich ein biss­chen skep­tisch was die Zukunft der Typografie angeht. Wir wer­den vie­le schö­ne, ele­gan­te Designs sehen, aber ich befürch­te deut­lich mehr Missbrauch der Typografie.

  10. Das nenn ich mal einen Teaser – gera­de wo es rich­tig inter­es­sant wird ist der Artikel zu Ende ;-)
    Sehr gut und kurz­wei­lig geschrie­ben – ich freue mich schon auf die nächs­ten Teile der Serie.

    Daumen hoch.
    Klaus

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.