Wem es aufgrund des kurzen Textes und/oder der Illustration noch nicht eingefallen ist, hat sich noch etwas zu gedulden. Zunächst wollen wir klären, auf welche Weise man (fast) jede Schriftart in Webseiten einbinden kann. Ich greife hierzu wieder einmal auf mediaevent.de zurück und fasse wie folgt zusammen:
Das Zauberwort lautet diesmal Webfonts. Mit der @font-face-Regel in CSS3 lassen sich endlich auch solche Schriften einbinden, die mit hoher Wahrscheinlichkeit auf dem Computer des Webnutzers nicht installiert sind. Der Browser wird in solchen Fällen die fehlende Schrift einfach nachladen. Dies funktioniert analog zum Laden von Grafiken: Die Schrift wird über die @font-face-Regel mit der src-Eigenschaft dem Webserver bekannt gemacht.
Dateiname der Schrift im Webordner +
|
@font-face { font-family: Zoso; src: url(HillHouse.woff); }
^ ^ ^ ^
| | | |
| | | +- Link zur Schriftdatei
| | |
| | +- Frei wählbarer Schriftname
| |
| +- Schriftart
|
+- @font-face-Regel zum Einbinden einer Schriftdatei
Nun kann die Schrift, von welcher der aufmerksame Leser jetzt den Namen kennt, den HTML-Elementen zugewiesen werden, wobei eine Liste von Alternativen als zusätzliche Absicherung nicht schadet.
h2 { font-family: Zoso, fantasy; }
Browser mit Webfonts-Unterstützung
WOFF (Web Open Font Format) ist ein vom W3C standardisiertes Format für Web-Schriften, welches als modifiziertes TTF von den Mainstream-Browsern unterstützt wird. Auch Smartphones vom iPhone bis Android und iPad sind heute in der Lage, WOFF-Webfonts anzuzeigen. Somit können die bislang alternativen Formate wie TTF, EOT (nur noch für veraltete IE-Versionen von Bedeutung), OTF oder SVG entfallen.
 3.6+ |
 6.0+ |
 5.0+ |
 9+ |
 10+ |
Obwohl wir uns fortan nur auf ein Format konzentrieren brauchen und dieses eine gute Kompression hat, sind Speichergrößen zwischen 200 und 300 KB für ein Paket mit verschiedenen Schnitten keine Seltenheit. Wir sollten daher vor dem Laden überprüfen, ob die zugewiesene Schrift nicht bereits dem Betriebssystem bekannt ist.
@font-face {
font-family: Helvetica;
local: Helvetica; // Erst nachsehen, ob die Schrift
// beim Besucher schon installiert ist
src: url(fonts/Helv.woff); // Wenn nicht, wird die Schrift
// vom Webserver geladen
}
Quellen für Webfonts
Google Web Fonts hostet eine Liste von Webfonts. Die Web-Fonts werden über einen einfachen Link (Google Font API) in die eigene Seite eingebunden.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
Ähnlich gestrickt ist Adobes Web Edge Fonts Angebot. Hier ist z. B. für die Schrift Muli der folgende Link in den <head> des HTML-Dokumentes einzufügen. Anschließend kann sie mittels font-family: muli, serif; in CSS zugewiesen werden.
<script src="http://use.edgefonts.net/muli.js"></script>
Meine Seite ist in der Schrift PT Sans in den Schnitten Regular, Italic, Bold, Caption und Narrow gesetzt. Diese stammt vom Anbieter Font Squirrel, der vor allem kommerzielle Schriften als Freeware zugänglich macht. Ferner sind die Überschriften der Beiträge mit der HillHouse formatiert und das Banner zusätzlich mit der BlackJack gestaltet wurden.
Was uns zur nächsten Frage führt: Welche Schriften und wie viele davon sollten auf einer Webseite Einzug halten? Ausführlich habe ich diese Problematik in einem separaten Artikel zur Typographie besprochen. Deshalb seien hier nur die wesentlichen Aspekte genannt:
- Weniger ist mehr. Egal, um welche Art von Publikation es sich auch handeln möge, mehr als drei verschiedene Schriftarten sind Ausdruck eines schlechten Stils.
- Kommen verschiedene Schriften zum Einsatz, sind diese so auszuwählen, daß sie sich deutlich voneinander abheben (z. B. Kombinationen aus Serifen- und serifenlosen Schriften). Dagegen können die verschiedenen Schnitte einer Familie bedenkenlos vermischt werden.
- Verzichten Sie auf das Unterstreichen von Worten. Zwar kollidiert diese Forderung mit Usuability und Ergonomie von Webseiten (Hyperlinks werden nun einmal durch Unterstreichungen kenntlich gemacht), in meinen Augen rechtfertigt dies aber nicht die ästhetische Vernichtung der Gemeinen mit Unterlänge.
- Der Schriftgrad sollte auf Webseiten 11 px nicht unterschreiten, wobei diese Angabe stark fontabhängig ist. Für den Zeilenabstand ist jeweils das 1,2-fache des Schriftgrades optimal. Die Verwendung von schlanken Serifenschriften (wie z. B. die Onyx) ist grundsätzlich zu hinterfragen.
Bleibt noch die Eingangsfrage. Hier ein weiterer (kryptischer) Hinweis:
Na dämmert’s allmählich? Die Spätgeborenen werden mit den Hinweisen herzlich wenig anfangen können, Vertreter meiner Generation wissen aber spätestens jetzt, daß hier die Rede vom vierten Werk der wahren Götter des Rocks ist. Die Seite der LP-Innenhülle mit den Songtiteln ist in einer Schrift vergleichbar der HillHouse gesetzt. Wer’s nicht kennt, sollte umgehend den nächsten Plattenladen stürmen (behelfsweise geht auch der Download bei iTunes & Co.), aber eigentlich zählt nur das leider vergriffene Vinyl.
 I |
 II |
 III |
 IV (Zoso) |
 Houses of the Holy |
 PhysicalGraffiti |
Und sofern es das Haushaltsgeld hergibt, empfehle ich uneingeschränkt gleich noch den Zukauf der anderen fünf Meisterwerke aus der ersten Schaffensperiode der Zeppeline.