Skip to content

Webfonts: Ein Blick auf die Pixel

by - 28. April 2010

Seit März 2010 vertreibt der FontShop die Schriftenreihe Webfonts. Webfonts – dies sind nicht einfach einige neue Schriften. Diese Fonts sollen eine neue Qualität ins Web bringen: nach der vieljährigen Beschränkung auf die wenigen Systemschriften wird die Schriftenvielfalt ins Web Einzug halten können. Und zwar ohne die flashigen und javascriptigen Tricks, Workarounds und Einschränkungen von sIFR, Cufon und Co.

.

Endlich! endlich! seufzt mein von der jahrelangen Arialisierung des Web geplagtes  Gestalterherz, das mittlerweile auch Verdana und die Handvoll anderer Systemschriften nicht mehr ertragen kann, weil es schon lange nur diese und keine anderen gesehen hat. FontShop – zeige mir die typografische Zukunft im Web!

.

Einige Fakten

Vom Start weg werden 30 Schriftfamilien mit 1.250 einzelnen Fonts angeboten. Damit kann man schon mal einiges versuchen. Viele sind angenehm sachliche und für seriöse Kommunikation geeignete Typos, aber auch rauhe und expressive Schriften – darunter auch eine alte Bekannte wie die Trixie, die schon in den 90ern die damals bereits verschwundenen Typenhebel-Schreibmaschinen imitierte.

.

Diese Schriften funktionieren nur im Web, da sie in den Formaten EOT Lite und WOFF bereit gestellt werden. Na gut – es kommt mir ja erst mal auf die Schriftenvielfalt im Web an, die Vielfalt in der Printproduktion haben wir ja schon seit über zwei Jahrzehnten.

.

First Step: Ein kleiner Test auf meinem Rechner

Der FontShop stellt auf seiner Webfont-Seite die Schrift Nuvo im Schriftschnitt Medium im WOFF-Format kostenlos zur Verfügung. Ich untersuche die mitgelieferte HTML-Seite auf grafische Qualität der Schriftdarstellung auf meinem Notebook (Windows 7, Firefox 3.6.3)

___ bei deaktiviertem ClearType

  • Die mitgelieferte lokale HTML-Seite zeigt insgesamt eine sehr sauber laufende Typo.
  • Insbesondere in 14 px sind die Rundungen gut geglättet und die Zeichen- und Wortabstände ausgeglichen.
Nuvo - 14 px - ClearType deaktiviert - Orginalgröße

Nuvo - 14 px - ClearType deaktiviert - Orginalgröße

  • Die dargestellten kleineren Schriftgrade von 9 bis 11 px wirken dagegen unscharf und verwaschen.
Nuvo - 9 px - ClearType deaktiviert - Originalgröße

Nuvo - 9 px - ClearType deaktiviert - Originalgröße

  • Die Rundungen großer Schriftgrade werden sehr sauber geglättet. Sehr harmonische Zeichenabstände.
Großer Schriftgrad im Browser (72 px, ClearType deaktiviert, Originalgröße)

Großer Schriftgrad im Browser (72 px, ClearType deaktiviert, Originalgröße)

.

___ bei aktiviertem ClearType

  • Schrift in allen Schriftgraden wirkt insgesamt schwärzer und konturschärfer, allerdings in den kleinen Schriftgraden noch nicht randscharf.
  • In den kleinen Schriftgraden hat man den für die Clear-Type-Technik typischen Effekt, dass einzelne Stellen farbstichig wirken.
  • Große Schriftgrade werden in den Rundungen nicht so smooth dargestellt wie man gerade durch das Anti-Aliasing von ClearType erwarten würde. Das Anti-Aliasing ist überraschenderweise geringer als die bei deaktiviertem ClearType. Dieses wird in der Vergrößerung deutlich.
Nuvo - 72 px - ClearType links aktiviert / rechts deaktiviert im Vergleich - 4fache Vergrößerung

Nuvo - 72 px - ClearType links aktiviert / rechts deaktiviert im Vergleich - 4fache Vergrößerung

.

Erste Hürden in der täglichen Entwurfsarbeit

Kann ich Screenentwürfe wie bisher mit PhotoShop und Fireworks simulieren? Momentan wohl eher nicht: ein Arbeiten mit .woff in PhotoShop & Co scheitert bereits daran, dass Windows 7 eine Übernahme des Testfonts in den Schriftarten-Ordner verweigert mit dem Hinweis „scheint es sich nicht um eine gültige Schriftart zu handeln“.

.

Next Steps

Weitere und vertiefende Untersuchungen sollen die Qualität der Webfonts unter den verschiedenen Bedingungen von Betriebssystem, Browser, Anti-Aliasing-Einstellungen etc. klären. Auf flickr gibt es bereits  Screenshots des FontShops, wir wollen aber eigene Testreihen mit eigenen Fragestellungen zur grafischen Qualität erstellen …. Demnächst mehr!

.

Aithalides

From → Typografie

3 Kommentare
  1. Für weitere Vergleiche möglicherweise ebenfalls interessant ist Googles-Fontverzeichnis

  2. @ Frederik Bader:

    Danke für den Hinweis auf Googles Fontverzeichnis. Dieses wird auch ein Thema der Projektgruppe sein und ich bin gespannt, was der Vergleich mit den Webfonts des Fontshops ergibt.

    @ all:
    Eine gute Übersicht und Bewertung der bisher verfügbaren Technologien von „customized fonts“ sowie eine Bewertung der aktuellen Technologien mittels @font-face gibt es von Jonathan Snook bei der von mir andernorts im Blog erwähnten Webdeveloper-Konferenz MIX10: http://live.visitmix.com/MIX10/Sessions/DS15. Er betrachtet das Thema weniger unter dem Aspekt der Abbildungsqualität von Schriften, stellt dafür mehr Kriterien wie beispielsweise Performanz, Praktikabilität in der Produktion / Pflege einer Website oder die Nutzbarkeit der Schriften auf mobilen Geräten in den Vordergrund. Absolut empfehlenswerte Präsentation!

Trackbacks & Pingbacks

  1. Webfonts: Das Projekt läuft « Beiträge zur empirischen Designforschung

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: