Kürzlich wurde ich mit der Frage konfrontiert, inwiefern sich auf Websites auch Schriftarten nutzen lassen, die nicht zu den üblichen Verdächtigen wie etwa Arial, Verdana oder Times New Roman zählen. In der Folge nun der Versuch einer allgemeinverständlichen Antwort.

De facto war es bis vor kurzem so, dass auf den Websites nur Schriften für die Darstellung von reinem Text genutzt wurden, die auch auf den Rechnern der Nutzer lagen. Da es ein paar Schriftarten gibt, die bei jedem Betriebssystem standardmäßig mit ausgeliefert werden, wie z.B. Arial, Times New Roman, etc., gelten diese als “websicher”.

In jedem Browser sind Schriftarten als Standard-Schriftarten voreingestellt. D.h., wenn man in eine HTML-Datei einfach nur einen Text reinschreibt und für diesen nicht via CSS speziell eine andere Schriftart angibt, dann wird dieser Text im Browser in der voreingestellten Standard-Schriftart dargestellt.

CSS gibt einem zudem noch die Möglichkeit eine Art Schriftarten-Favoriten-Liste anzugeben. Das sieht dann z.B. folgendermaßen aus:

font-family: Helvetica, Arial, sans-serif;

Diese Angabe interpretiert der Browser, in dem er von vorne nach hinten schaut, ob eine der Schriftarten auf dem Computer installiert ist und sobald er eine findet, stellt er den dazugehörigen Text in dieser dar. In dem Beispiel oben, schaut er zunächst, ob die Schriftart Helvetica installiert ist. Hat der User einen Mac, so ist dies in aller Regel der Fall. Bei einem Windows-Rechner eher nicht. Hat der User also einen Windows-Rechner, so wird der Text höchstwahrscheinlich in Arial dargestellt werden. Sollte auf dem benutzten Rechner weder Helvetica noch Arial installiert sein, so greift der Browser in der Darstellung des Textes auf die in seinen Einstellung als Standardschriftart für eine Sans-Serif-Schriftart zurück.

So ist sichergestellt, dass der Text im Normalfall in einer Schriftart dargestellt wird, die auch zum Design passt. D.h. wahrscheinlich sieht die Website mit der Schriftart Helvetica genau so aus, wie es sich der Designer gewünscht hat. Da aber Arial zwar nicht so gut aussieht, aber zumindest die Gesamtoptik nicht empfindlich stören wird, wurde diese als erste Fallback-Schriftart gewählt. Da viele Browser für Fließtext meist eine Serifen-Schriftart als Standard-Schriftart definiert haben, kann man mit sans-serif als der zweiten Fallback-Angabe immerhin noch beeinflussen, dass der Text zumindest in einer serifenfreien Schriftart dargestellt wird.

Via CSS hat man jedoch eine interessante Möglichkeit, Text in einer selbst gewählten Schriftart darzustellen, in dem man @font-face nutzt. Damit kann man eine auf einem Webserver liegende Schrift-Datei einbinden, auf die man dann in in der CSS-Eigenschaft font-face zugreifen kann. Im CSS-Code sieht dies z.B. so aus:

@font-face {
font-family: 'XYZschrift';
src: local('XYZschrift'), url('XYZschrift.ttf') format('truetype');
}

Und das Beispiel von oben lässt sich dann folgendermaßen erweitern:

font-family: XYZschrift, Helvetica, Arial, sans-serif;

In diesem Beispiel versucht der Browser zunächst die Schriftart XYZschrift zur Darstellung des entsprechenden Textes zu nutzen. Bei modernen Systemen und Browsern wird dies auch gelingen. Dort wo dies nicht gelingt, wird wieder der Reihe nach versucht werden eine Schriftart zu finden, in der sich der Text darstellen lässt.

Da es bei der Nutzung einer Schriftart auch auf die entsprechenden Lizenzen zu achten gilt, muss man beim Erwerb einer Schriftart auch darauf achten, dass man auch die Nutzungsrechte fürs Web mit erwirbt. Zudem gibt es inzwischen auch Webschrift-Anbieter, bei denen man das Recht eine Schriftart auf der Website erwerben kann, die Schriftarten jedoch auf deren Servern verbleiben. Zu diesen Anbietern gehören u.a. Typekit oder Typotheque. Auch Google gehört zu diesen Anbietern, meines Wissens muss man dort aber für die Nutzung nichts zahlen.

Es ist eine tolle Sache, dass man sich im Internet über viele Sachen informieren kann. Auch über so etwas, wie einen Bundeshaushalt. Aber alleine die Selbstverständlichkeit der Bundesregierung, diese Zahlen und Fakten zu veröffentlichen, bewirkt noch nicht, dass man diese Zahlenwüsten auch verstehen und überblicken kann.

Und da ist es doch erfrischend, dass es auch Unternehmen Netzwerke wie Tactical Tools gibt, die solche komplexen Datenansammlungen wie den Bundeshaushalt verständlich und ansprechend visualisieren können.

via KoopTech

Die in der vergangenen Woche veröffentlichte Version 3.6 des Firefox unterstützt als erster Web-Browser das WOFF. Viele denken jetzt wahrscheinlich “Das Was?”.

WOFF steht für das Web Open Font Format. Dies ist ein komprimiertes Dateiformat für Schriftarten. So wie etwa auch die Bilder und Fotos des Webs in aller Regel auch in einem komprimierten Dateiformat wie JPG, GIF oder PNG dargestellt werden, soll es in Zukunft auch möglich sein, im Bezug auf ihre Dateigröße schlanke Schriftarten in Web-Browsern zu nutzen.

Interessant ist diese Neuerung, da sich im Zuge von HTML5, der aktuellen Diskussion um das wieder entdeckte @font-face, Schriftarten-Services wie typekit usw., die Webdesigner dieser Welt sich nicht mehr mit den so genannten sicheren Web-Schriften begnügen wollen, und somit mit WOFF ein weiterer kleiner Schrift in Richtung Gestaltungsvielfalt im Web gemacht wurde.

Weitere Beiträge zu WOFF: So kannst Du den ersten .woff-Font testen auf Fontblog und Web Open Font Format for Firefox 3.6 auf hacks.mozilla.org.

Mit der CSS-Regel @font-face kann man mit dem Internet Explorer schon seit langem alternative Schriftarten verlinken. Inzwischen unterstützten fast alle der neuen Browser diese Regel, wodurch man im Web bald nicht mehr auf die Standartschriftarten oder Flash-/Bilderlösungen angewiesen sein wird. Das Problem dahinter ist nur, dass die meisten Lizenzen für Schriftarten die direkte Verlinkung im Web nicht erlauben, da man die Schriftarten leicht klauen kann.

Genau hier kommt typekit ins Spiel. typekit bietet mehrere (JavaScript-)Sicherheitsmaßnahmen, womit Web-Lizenzen möglich sind. Je nach gewähltem bzw. gekauftem Paket kann man unter unterschiedlich vielen Schriftarten die passende auswählen und mittels typekit oder CSS auf die Webseite anwenden.

Das Ganze funktioniert sehr schnell und einfach, der größte Nachteil an der Sache ist allerdings, dass @font-face nur mit dem IE und den neusten der anderen Browsern funktioniert. Die älteren (und noch weit verbreiteten) Versionen von Mozilla & Co bekommen nur eine Fallback-Schriftart zu sehen. Auch ist man auf vorgegebene Schriftarten beschränkt und kann keine Eigenen verwenden. Von daher ist typekit eine gute Lösung in der Zukunft aber mit der momentanen Browserkompatibilität noch nicht zu empfehlen.

Was ich heute Morgen gemacht habe, prägte in ähnlicher Form irgendwann einmal den Begriff “durchs Web surfen”. Mit meinem RSS-Reader als Ausgangspunkt, habe ich mich durchs Web treiben lassen. Hier die Wegpunkte meines Web-Spaziergangs:

Mein RSS-Reader führte mich zuerst zum Dr. Web Autorenwettbewerb, genauer gesagt zum heutigen Beitrag Das Kaufhausbummeldesign – Wie der Alltag Ihnen bei Design-Ideen hilft. Besonders gut hat mir darin die Metapher “Das Supermarktregal – auf Augenhöhe sein” gefallen. Damit wollte der Autor Björn Dammann noch mal klar machen, dass das jeweils Wichtigste auf jeder Seite auch wirklich “auf Augenhöhe” platziert werden soll. Im Web ist das: Sichtbarer Bereich, Mitte. Eine Anforderung, die das nur all zu oft uniformierte Design vieler Websites nur bedingt bedienen kann. Wir setzen darum immer häufiger auf das Inhaltselement der Bühne.

In dem Artikel wird auf savethechildren.de hingewiesen, mein nächster Anlaufpunkt. Dies ist eine Kinderrechtsorganisation, die sich Themen verschrieben hat, wie weltweit das Überleben und die Gesundheit zu sichern oder auch die Ausbildung von Kindern zu fördern. Gutes und wichtiges Thema.

Mein nächster Anlaufpunkt ist netzwertig.com, wo sich Marcel Weiss mit Twitters für 2010 angekündigter Echtzeit-API Firehose beschäftigt. Marcel geht stark davon aus, dass das Implementieren auf Basis dieser Firehose-API kostenpflichtig und damit zum ersten richtigen Geschäftsmodell von Twitter wird.

Im Webzeugkoffer Blog beschäftigt sich dann Björn Seibert mit minimalistischem Webdesign und verweist auf einen gelungenen Beitrag When Minimalism Backfires: When Too Little Is Not Enough im Webdesigner Depot. Auf dieser Website gefällt mir, dass beim Überfahren des Logos mit der Maus, eine kleine, aber auffällige Info dargestellt wird. Diese macht deutlich, dass wenn man dem Link folgt, man zur Startseite zurück kommt. Eine angenehme Lösung des Problems, dass auch heute noch viele Leute nicht wissen, dass man in aller Regel nach einem Klick aufs Logo wieder zur Startseite der Website zurückkommt.

Ein weiterer Artikel auf Webdesigner Depot informiert mich darüber, dass es eine Wikipedia Usability Initiative gibt und dass man auf Wikipedia über den Try this-Link zu einer Beta-Version der optimierten Wikipedia-Ansicht gelangen kann. Neugierig geworden, schaue ich nach, ob es das auch auf der deutschsprachigen Wikipedia gibt und werde fündig. Der Link Beta ausprobieren am oberen Rand jeder Seite war mir bisher völlig entgangen. Ich beginne mit dem “Betatesten” und habe schon wieder eine Idee für einen weiteren Blogeintrag im Hinterkopf …