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

Ralf Herrmann

Ralf Herrmann hat sich in der Typografie-Szene vor allem als Betreiber der...

Im Webdesign herrscht Goldgräberstimmung. Mit der neuen Möglichkeit, beliebige Schriften per @font-face in Webseiten einzubinden, ist endlich ein neues Stilmittel hinzugekommen, dass die gewohnte Eintönigkeit der Systemschriften ablösen soll. In dieser Artikelserie werden die Entwicklung und die heutigen Möglichkeiten dieser Technologie ausführlich beleuchtet.

Seit Anbeginn des Internets werden auf Webseiten vor allem Systemschriften verwendet. Das heißt, die Webseite schlägt dem Browser des Benutzers bestimmte Schriftarten wie Arial, Verdana oder Times New Roman zur Darstellung vor, und der Browser benutzt diese, sofern sie tatsächlich installiert sind. Webdesigner können die Textdarstellung somit nur unzureichend beeinflussen und die Webseite wird womöglich auf unterschiedlichen Rechnern in völlig unterschiedlichen Schriften dargestellt.

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

In diesem Bereich hinkt das Web den Möglichkeiten der Drucksachengestaltung noch weit hinterher. Für Überschriften ist es zum Beispiel hilfreich, die eher schmal laufenden Condensed-Schriften zu verwenden, aber unter den Systemschriften gibt es solche Schriften praktisch nicht. Unternehmen, die eine eigens entwickelte Hausschrift besitzen, können diese ebenfalls nicht benutzen und müssen ihre Webseite dann zum Beispiel ersatzweise in Arial darstellen, was dem Gedanken eines durchgängigen Corporate Designs natürlich völlig zuwider läuft.

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

Die Möglichkeit, beliebige Schriftarten in Webseiten einzubinden, bestehen jedoch schon sehr lange. Netscape 4 und Internet Explorer 4 verstanden bereits Ende der 1990er Jahre die so genannte @font-face-Regel, mit der Schriften auf dem Server abgelegt, und zusammen mit der Webseite ausgeliefert werden konnten.

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

Doch diese Technik war ihrer Zeit zu sehr voraus. Die Schriftdarstellung erfolgte zu dieser Zeit noch ohne oder nur mit einer einfachen Graustufen-Kantenglättung. Für Systemschriften war dies kein Problem, denn diese sind sehr aufwändig für diese Darstellung optimiert, sodass sie bei jeder beliebigen Schriftgröße immer optimal lesbar erscheinen. Doch wollte man nun zum Beispiel eine beliebige Druckschrift benutzen, war die Darstellung wegen der fehlenden manuellen Bildschirmoptimierung so schlecht, dass der Einsatz mehr Nachteil als Vorteile brachte.

So verwundert es auch nicht, dass die @font-face-Regel in CSS 2.1 einfach ersatzlos gestrichen wurde. Der Einsatz von Systemschriften auf Webseiten blieb nach wie vor Standard, insbesondere zur Darstellung längerer Texte. Für Überschriften haben sich verschiedene Notlösungen etabliert, etwa die Darstellung als vorgefertigte Bitmapgrafiken oder die Einbettung von kleinen Flash-Filmen, die ihrerseits eine Schrifteinbettung mitbringen konnten. Und in den letzten Jahren entstanden neue Ansätze wie Typeface.js und Cufón, die die Darstellungsmöglichkeit von Vektorobjekten ausnutzen, um mittels JavaScript Überschriften durch Schriftzeichen beliebiger Schriftarten auszutauschen. Doch alle diese Techniken bringen 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 wurde 2008 mit der Veröffentlichung von Safari 3.1 eingeleitet, bei der Apple die alte @font-face-Regel wieder einführte. Der Grund, warum diese 10 Jahre zuvor gescheiterte Technologie jetzt Erfolg versprechender war, liegt in der deutlich verbesserten Bildschirmdarstellung. Heute sind Flachbildschirme Standard und zur Kantenglättung werden nun auch die Subpixel, also die drei Farbbestandteile eines Pixels, herangezogen. Dies ermöglicht eine wesentlich bessere Wiedergabe der Schriftformen selbst bei sehr kleinen Schriftgrößen. In Mac OS X ist diese Technologie standardmäßig aktiviert. In Windows trägt sie den Namen ClearType und ist hier seit Vista aktiviert, obwohl auch Benutzer von Windows XP diese Darstellung zuschalten können.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht


Heutiges Subpixelrendering am Beispiel von Safari unter Mac OS X

Eine Besonderheit bei der @font-face-Unterstützung in Safari liegt darin, dass erstmals die Standard-Fontformate TrueType (.ttf) und OpenType (.ttf/.otf) ohne jegliche Konvertierung eingebunden werden können.

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

Die Bedenken der Schriftenanbieter

Dies brachte vor allem die Anbieter kommerziellen Schriften auf die Barrikaden, da diese nun befürchteten, dass diese Technik dem Raubkopieren von kommerziellen Fonts Tür und Tor öffnet. Denn über die @font-face-Regel werden die Schriften ja nicht im wörtlichen Sinne in die Webseite „eingebettet“, sondern lediglich im CSS verlinkt. Ein Blick in den Quelltext genügt also, um die eingebundenen Schriftarten aufzuspüren und herunterzuladen, sodass sie sich im System installieren lassen.


Safari 3.1 lieferte erstmals die Unterstützung für Standard-Fontformate (Demo-Seite)

In der Folge entwickelte sich eine hitzige Diskussion zwischen Browser-Herstellern und Schriftanbietern. Letztere wünschten sich für kommerzielle Schriften einen Schutzmechanismus, der den unberechtigten Einsatz auf unlizenzierten Seiten und die Installation auf Rechnern unterbinden sollte. Doch die Browser-Hersteller sahen sich verständlicherweise nicht in der Pflicht, die Lizenz-Ansprüche von Schriftherstellern durchsetzen zu müssen. Dies müssen die Anbieter von Inhalten selbst übernehmen, so wie ja auch die Anzeige von urheberrechtlich geschütztem Bild- und Tonmaterial nicht durch den Browser selbst in irgendeiner Weise kontrolliert wird.

Aus diesem Konflikt sind in erfreulich kurzer Zeit zwei Lösungswege entstanden. Einerseits die Einbindung von Schriftart über Webfont-Dienste und andererseits die Entwicklung des neuen WOFF-Schriftformates, das speziell für den Einsatz auf Webseiten konzipiert wurde. Beides wird in den folgenden Artikeln dieser Serie im Detail erläutert.

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

Hinterlasse einen Kommentar

14 Kommentare auf "@font-face: Im zweiten Anlauf erfolgreich – Geschichte der Webfonts"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] klassische Adobe-Schriften ausschließlich als Abomodell; aber vor allem MyFonts bietet all seine Webfonts zum Selbsthosten an. Zwar wird hier unterschieden zwischen Schriften, die einmal lizenziert werden […]

Agathe
Gast

Die Artikelreihe ist sehr gut und interessant.

Die allgemeine Skepsis kann ich nur teilweise nachvollziehen. Nicht gut ausgebildete Designer wie es Sie schon immer gab, werden auch jetzt, trotz Webfonts (oder grade wegen dieser), kein schönes Design liefern.

Gute Leute aus der Webbranche sollten nichts “anrichten”. Da bin ich als Designer mit einer vernünftigen Beratung und qualitativ hochwertiger Arbeit gefragt um das Web individueller, schöner und spannender zu machen.

Neuen (eigentlich hier alten) Techniken gegenüber stehe ich grundsätzlich offen gegenüber, solange sie vernünftig und massvoll eingesetzt wird.

Entry
Gast

Dieser Artikel liest sich extrem gut und ist sehr interessant. Ich freu mich auf die Fortsetzung. Danke!

Bata
Gast

Ich kann da sacrion nur zustimmen… es wird Unmengen an Seiten geben, die bis zum Brechreiz Typos einsetzen werden, ohne Sinn und Verstand.
Kontrastprobleme gibt es nun auch schon genügend und das wird sich nicht durch Typos ändern lassen.

Ich denke für Überschriften sind die neuen Schriftarten ein echter Gewinn, aber bei Fließtext sollte es bei Arial oder Verdana bleiben. Meine Meinung!

Dany
Gast

Da sich die font-face “noch” nicht etabliert hat, konnte sich ein gewisser Standard durchsetzen. Sicherlich auch da Webeditoren wie z.B. Dreamweaver fertige Deklarationen liefert (font-family: Arial, Helvetica, sans-serif;) . Je mehr Möglichkeit ein Webpublisher hat, um so mehr kann er “anrichten”. Auf jeden Fall eine spannende Sache und eine Chance auf schönes typografisches Web. Ich denke da vor allen an Designer-Firmen die gerne mit Ihren Schriftzügen werben wollen und daher Flash eingesetzt haben.

Pascal
Gast

Sehr interessanter Artikel, ich habe mich selbst eine Weile mit dem Thema für einen eigenen Blogbeitrag beschäftigt und bin schon auf die weiteren Teile gespannt.

@sacrion
Natürlich besteht die Gefahr das Nutzer diese Funktion missbrauchen und damit wirklich augenschädigende Fonts für den Fließtext verwenden, aber da kann man nur auf die Designer hoffen.

sacrion
Gast

Ich halte davon ja nicht allzu viel. Die “langweiligen” Systemschriftarten sorgen dafür, dass man jede Website ohne viel Mühe lesen kann, ohne sich jedes Mal auf ein neues Schriftbild einstellen zu müssen.

Gott sei Dank kann ich meinen Browser ja dazu bringen, diese Einstellungen zu ignorieren. Mein Browser zeigt alles in Arial an, das schont meine Augen.

Manuela Müller
Mitglied

Das kommt darauf an – wie immer im Leben und beim Einsatz von Technik. Die Schrift allein entscheidet nicht über Lesbarkeit. Ich habe schon sehr viele Webseiten gesehen, die eine weiße Arial auf schwarzem Hintergrund verwenden oder schwarze Arial auf Magenta. Das ist trotz Standardschrift kaum lesbar.

Ich finde, man sollte nicht immer gleich vom Schlimmsten ausgehen und sinnvolle Entwicklungen wegen eines möglichen Missbrauchs schlecht reden.

Viel interessanter fände ich es, wenn Webdesigner und der Lesbarkeit verpflichtete Website-Betreiber ansprechende UND lesbare Designs/Typografie mit Webfonts vorlegen. Das wäre doch mal ein bereichender und kreativer Arbeitsansatz.

Sebastian
Gast

Meine bisherigen Erfahrungen mit webfonts ergaben ein weiteres Problem. Im Gegensatz zum Einsatz lokal installierter Schriften ergibt sich bei webfonts das Problem, dass nach erstmaligen Seitenaufruf der benötigte Schriftsatz erst mit einer gewissen Verzögerung vorliegt (in Abhängigkeit der Netzverbindung & Geschwindigkeit des Rechners, der den geholten Schriftsatz ja erst installieren muß). Die Folge ist eine kurze Seitenansicht mit Standardschrift, über die dann der webfont sichtbar “rüberploppt”. Abhilfe kann dafür meines Wissens nach nur ein unschöner preloader schaffen, oder?

Rene
Gast

Die Skepsis ist sicher berechtigt. Allerdings nicht nur im Hinblick auf die Typographie. Es ist immer wieder erschreckend, wie viele grottige Seiten (Design und Technik) es im Web gibt.

Aber trotzdem ist diese Technik ein Segen im Hinblick auf die Arbeit, die zB hinter graphischen Labels steckt – im Vergleich zu einem H2 😉

Bin gespannt, was es in den weiteren Folgen noch Neues gibt…

Ach ja, und auch interessant, dass Google gleich mal ne Font API anbietet – wenn auch nur mit einigen wenigen Schriften…

Klawischnigg
Gast

Bleibt zu erwähnen, daß die meisten Seiten jetzt vermutlich viel interessanter werden, wenn man eigene Fonts einbauen und verwenden kann. Die Designerfuzzies sind vermutlich kurz vorm Austoben…

Vitaly Friedman
Mitglied
Sehr schöner Artikel, Ralf. Man sollte sich von der Vielfalt der verfügbaren Möglichkeit zwar ruhig begeistern lassen, aber dennoch im Kopf behalten, dass man — bevor man eine Schriftart einsetzt — sich genau überlegen muss, ob sie passt oder nicht. Bevor wir als Designer anfangen, sämtliche Schriftarten im Web einzusetzen, müssen wir erst einen Schritt rückgängig machen und genauer verstehen und lernen wie man eine Schrift vernünftig einsetzt und wie man Schriftarten kombiniert. Nicht jede klassische Schriftart ist für Screendesign optimiert, und nicht jede klassische Schriftkombination lässt sich aufs Web übertragen. Wir wissen als Designer etwa ganz genau dass Georgia… Read more »
Klaus
Gast

Das nenn ich mal einen Teaser – gerade wo es richtig interessant wird ist der Artikel zu Ende 😉
Sehr gut und kurzweilig geschrieben – ich freue mich schon auf die nächsten Teile der Serie.

Daumen hoch.
Klaus

wpDiscuz