Bessere Webtypografie: Font Stacks

2

typo

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/

Post to Twitter Post to Facebook

kommentieren

26. Januar 2009

Kategorien

CSS, Typografie, Webdesign

Tags

, , ,

Mediengestalter.cc

ist das Blog eines Mediengestalters und Netzbürgers, der über das schreibt, was ihm im Laufe seines Onlinelebens über den Weg läuft

Folge mir per:





  • Mediengestalter.cc auf Flickr

    Zensursula bekämpft jetzt auch Obdachlosigkeit Schweinegrippe-Notstand

  • Letzte Kommentare

    • Wandtattoo Blog: Nett gemachtes PIC. Viele Grüße vom Wandtattoo Blog
    • Sebastian: Hier der Beitrag der Besserverdiener … Ein kleines Dankeschön: http://www.youtube.com/watc...
    • Sebastian: Und wenn es darum geht, Software gratis zu vermarkten?? Du kannst dir ja die kostenpflichtige Version...
    • Andi: Wenn es darum geht, Software mit Werbung zu verpesten: Ja.
    • Sebastian: und die Entwickler sind dir egal?


    Abmahnungen Apple Beeindruckend Blog Blogger Browser CDU Computer CSS Datenschutz Design Fernsehen Firefox Foto Google Heidi Klum HTML iPhone Kino Kunst Lustig Mac MacBook MacBook Pro Mac OS X Musik Nintendo Photoshop Satire Schäuble Silvester Star Wars Suchmaschine Tutorial Twitter Typographie Ursula von der Leyen Video von der Leyen Web 2.0 Webdesign Weihnachten Werbung Zensur Zensursula

    MEDIENGESTALTER.CC

    | Allgemein | Apple | Beeindruckend | Computer | CSS | Design | Fernsehen | Fonts | Gadgets | HTML | Kunst | Kurios | Mediengestalter | Netzwelt | Photoshop | Printdesign | Software | Tutorials | Typografie | Videos | Web2.0 | Webdesign | Werbung |

    Webdesign / Redaktionsystem • Mediendesign Aachen