Font Stacks, also ein „Stapel Fonts“, ist die Idee, anstatt der Standardwebschrift eine Reihe von Fonts aufzurufen, beginnend mit dem schönsten und an letzter Stelle steht der Webfont, in der Hoffnung, der Besucher hat möglichst schöne Fonts installiert.

Vorteile an dieser Sache sind, dass man neben allerlei schönen Schriften auch alle Systemschriften aller Systeme der Reihe nach abklappern kann.

Beginnen könnte man z.B. in dem man den teuren und edlen Font „Frutiger“ einbindet, dann folgt „Segoe“, die Neueintwicklung von Microsoft für Vista, welcher bekanntlich ein billiger Abklatsch von Frutiger ist, aber immer noch gut aussieht. Dann könnten Fonts nach eigenem Geschmack folgen, die den vorangenannten leider nur ähnlich sehen, aber immer noch besser sind als Systemfonts. Und zu guter Letzt folgen die Systemfonts, z.B. Arial und Helvetica. Und selbst hier kann man was verbessern, indem man erst schöne Versionen von Helvetica nimmt und später die Arial. Besitzer eines Macs oder einer Creative Suite haben meist schöne Helvetica Versionen dabei. Übrigens, Arial ist auch nur wieder eine schamlose Microsoftkopie von der Helvetica. Die machen sowas scheinbar öfter.

Wenn man möchte, kann man dann noch seltenere Systemfonts einbinden, wie das Linux Pendant für die Arial, die Liberation. Ganz zum Schluss folgt noch die font-family, für den unwarscheinlichen Fall, dass niemand die genannten Schriften installiert hat.

So könnte das ganze aussehen:

font-family: Frutiger, "Frutiger Linotype", "Segoe", "Helvetica Neue", "Liberation Sans", "Nimbus Sans L", Helvetica, Arial, sans serif;

Erst die guten Kaufschriften, dann die Vistaschrift, dann kommt eine der Systemschrift aber nicht mehr der Starterschrift ähnliche, dann Unixfonts und dann Systemschriften. Ist jetzt nur mal ein Beispiel auf die Schnelle, probiert ein wenig rum.

Nachteile

Diese Art der Einbindung von CSS Fonts birgt allerdings einige Nachteile:

Man kann keine verbindlichen Entwürfe an seine Kunden verschicken.

Die Schriften haben alle unterschiedliche x-Höhen, Laufweiten, etc. Also kanns da schnell einem mal das Design zerhauen, wenn man denn so gestalten sollte, dass die Schriften so essentiell sind. Befehle für z.B. die x-Höhe wie font-size-adjust sind für Produktivseiten nicht nutzbar.

In Browsern oder Systemen, die kein Anti-Aliasing für die Browserfonts bieten, wirken die Kaufschriften schnell verkrüppelt, da sie nicht die Eigenschaften einer Arial mitbringen, auf die Bildschirmlesbarkeit ausgelegt zu sein.

Fazit
Alles in allem zumindest mal was neues, um etwas frischen Wind in die langweilige Webfontriege zu bringen, aber immer die Nachteile im Hinterkopf haben
Hier ist noch ein Link für einige Inspirationen:
http://www.sitepoint.com/article/eight-definitive-font-stacks/
Andreas ist ein Spezialist für E-Commerce, UX und Digital Marketing. Folgt ihm gerne auf:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

2 Kommentare zu “Bessere Webtypografie: Font Stacks

  1. Andi on

    Sowas setzt freie Schriften voraus. Richtig schöne Kaufschriften kann man schlecht einbinden, da man sie so automatisch zum Download anbietet.

    Hilft nur, dass die Hersteller bestimmte Untermengen rausgeben, für die Webdesigner.

    Antworten