Eigene Schriften verwenden

Moderne Browser (Safari, FF, Chrome..) könnens schon: 

@font-face {
  font-family: StoneSans;
  src: url('stonesans.ttf');
}
body {font-family: StoneSans, Arial, sans-serif;}

und – schwupp – jeder kann meine Ergüsse in meiner CI-Schrift 'Stone Sans' sehen.

Nein – doch nicht: Es geht technisch, aber nicht rechtlich: Die Schrift 'Stone' ist geschützt. Ich darf sie nicht verbreiten, was ich aber hiermit tun würde. Also: lieber nicht.

Andere Ansätze funktionieren über Flash oder PDF und haben dieses Manko nicht: Die Schrift an sich wird ja nicht verbreitet, sondern nur ein Bild von der Schrift – was wohl immer erlaubt sein wird. Andererseits: Das könnten wir schon lange haben, mehr oder weniger komfortabel. Warum hat sich das nicht verbreitet? Ganz einfach: Suchmaschinen sehen nichts, Ladezeiten sind hoch und viele andere Nachteile. Da könnte ich gleich ein PDF ins Web stellen.

Ein bisschen Hintergrund

Die Sache steht und fällt mit 'Schriftenglättung', 'Kerning' und 'Hinting'. Schriftenglättung (Antialiasing) ist wohl bekannt, 'Kerning' bedeutet, wie die Buchstaben-Abstände untereinander geregelt werden und unter 'Hinting' versteht man, wie Buchstaben bei niedriger Auflösung dargestellt werden.

Hier einige Abbildungen; das Wort 'Wert' enthält  typische und häufige Buchstaben.

(Stand 2009, neuere Firefox-Versionen wie IE7/8)

IE6, Firefox, Opera, Netscape:

IE7/8:

Safari:

 

In 300% Vergrößerung:
(Die Farben kommen vom Subpixel-Antialiasing und sind in dieser Form eigentlich nicht sichtbar)

IE6, Firefox, Opera, Netscape:

 

 

IE7:

 

Safari:

 

Schrift ohne Glättung

Wenn Text bei kleiner Schriftgröße nicht geglättet wird, fallen bei niedriger Auflösung alle für die Schrift typischen Merkmale weg. Schlimmer noch: Wenn das Hinting nicht optimiert ist, wird der Text geradezu unleserlich. 

Und selbst wenn das Hinting optimiert ist: In der Praxis gibt es gar nicht so viele Möglichkeiten, gut lesbare Schriften für kleine Auflösungen 'individuell' zu erstellen. Hier am Beispiel 'e' 12px die Unterschiede zwischen den einzelnen Schriften farbig hervorgehoben. 

Zwischen Verdana und Arial ist gerade mal eine Pixel-Breite Unterschied, zwischen Arial und Trebuchet eine Höhe. Die Schrift Century Gothic ist für kleine Schriftgrößen schon nicht mehr geeignet, die Stone ist trotz gutem Hinting kein Augenschmaus mehr. Man kann sich leicht ausrechnen, wie viele Möglichkeiten es gibt, unterschiedliche Varianten eines 'e' in diesem Raster einigermaßen leserlich zu machen. Dasselbe gilt für alle weiteren Buchstaben.

Kerning

Noch schwieriger ist das richtige Kerning, also der Abstand der Buchstaben untereinander. Bei druck-optimierten Schriften wird der Abstand sehr fein geregelt, speziell was bestimmte Paare wie 'We' betrifft: Das 'e' ragt etwas unter das 'W' hinein, um keinen störenden Weißraum entstehen zu lassen. 2 'e' stehen dichter beieinander als 'e' und 'm'. Bei genauer Umrechnung würde das zb eine Gesamtbreite für das 'e' von zb 7,2 Pixel ausmachen – was nicht geht, weil es keine 0,2 Pixel gibt. Würde man die Differenz durch Antialiasing ausgleichen, würden 2 verschiedene 'e's entstehen. Das bedeutet nicht nur enormen Rechenaufwand – jeder einzelne Buchstabe müsste neu berechnet werden - sondern macht auch ein sehr unruhiges Schriftbild. In der Praxis wird daher jeder Buchstabe nur einmal berechnet und die ungleichmäßigen Weißräume werden in Kauf genommen.

In Schriften, die für das Web optimiert sind (zb Verdana oder Arial), sind die Buchstaben bereits so in ein Raster eingepasst, dass der unregelmäßige Weißraum bei gängigen Schriftgrößen nicht weiter auffällt. Genau das führt aber wieder dazu, dass Verdana in großen Auflösungen – etwa gedruckt – nicht gerade als harmonisch empfunden wird, sondern eher einen hölzernen, konstruierten Eindruck hinterlässt.

Überschriften

Alle genannten störenden Effekte werden mit zunehmender Schriftgröße immer schwächer, weswegen eigene Schriften für Überschriften besser geeignet sind als für 12px Lauftext. Für den Lauftext verwendet man dann eben eine Internet-optimierte Schrift.

Dabei wird aber ein altehrwürdiges Gesetz im Schriftsatz gebrochen: Niemals Schriften mischen, die sich ähnlich sind. Streng ausgelegt dürfte man also nur Times für den Lauftext verwenden, wenn die Firmenschrift zb Stone wäre, weil die Stone ebenso wie Arial, Verdana, Trebuchet eine Groteske ist. Times ist aber wegen der Serifen am Bildschirm nicht gerade gut lesbar. 

Eine andere Option, nämlich für die Überschrift eine eigene und für den Lauftext eine möglichst ähnliche zu verwenden spießt sich daran: was ist ähnlich. Sowohl FF als auch IE7 und Safari stellen Schriften verschieden dar. Safari etwas fetter als IE7, und das auch noch von diversen Einstellungen abhängig. Die Schrift ist also nie ähnlich, sondern gerade mal auf diesem einen Computer und Browser.

Nachträge/Links

Eine sehr übersichtliche Seite zum Thema Schriften im Internet. Interessant vor allem auch die Windows Vistas eigenen neuen Systemschriften mit dem C: Calibri, Cambria, Candara, Consolas, Constantia, Corbel.

Zumindest Headlines in eigenen Schriften; mit Javascript: http://typeface.neocracy.org/

---

Ältere Kommentare:

 

22.07.2008

Sedna

Mah, das sich da einer mit Typografie im Internet beschäftigt,
das lässt Gutes hoffen....was man da manchmal so serviert bekommt
- es graust einen geradezu. Hier scheint man sich auszukennen.
Gruß
Sedna
 

09.10.2008

Rouven Saleika

Hallo !
Danke für die Infos :-)
Habe mich jetzt fast die halbe Nacht mit diesem Problem rumgekloppt. Ich dachte, dass da irgendeine Script-Anweisung im Quellcode der Homepage oder irgend ein anderer Codierungsfehler vorliegt. Einstellungen der Zeichen-Glättung im Betriebssystem oder was auch immer schuld an der unterschiedlichen Darstellung zwischen Safari und IE7 seien.
'Sowohl FF als auch IE7 und Safari stellen Schriften verschieden dar. Safari etwas fetter als IE7, und das auch noch von diversen Einstellungen abhängig. Die Schrift ist also nie ähnlich, sondern gerade mal auf diesem einen Computer und Browser.' Jo, da gibt es wohl doch nur die mittlerweile schon ältere Lösung des "in Stein gemeißelten Text(Grafik)-Formats PDF".
Liebe Grüße, Rouven :-)

Zurück

---