Website-Tipp: Typefacts
Vergangene Woche habe ich mich hier mit einem Beitrag über Schriftarten im Web mächtig aus dem Fenster gelehnt, da ich auf diesem Gebiet alles andere als ein Experte bin. Darum möchte ich heute diesbezüglich wieder einiges gut machen, in dem ich euch die Website Typefacts empfehle.
Auf Typefacts bin ich gestoßen, da ich auf der Suche nach neuen, außergewöhnlichen und obendrein freien Schriftarten war. Dort fand ich dann auch eine sehr beeindruckende Liste an Freefonts. Des weiteren beeindruckt die Website mit eine ganzen Reihe an interessanten Artikeln, Workshops und Tipps.
von Matthias Zellmer
Texte im Web … mal anders
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.
von Matthias Zellmer
Firefox 3.6 unterstützt WOFF
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.
von Matthias Zellmer
Welche Schrift, in welchem Browser, auf welchem Betriebssystem?
Die Seite ist zwar nicht mehr die allerneuste, aber wenn ich mir Gedanken zu Schriftarten für Websites und ihre web-sichere Darstellung auf Macs und Windows-Rechnern mach, dann schau ich immer wieder gerne bei Common fonts to all versions of Windows & Mac equivalents nach. Der Beitrag gehört zu den durchaus interessanten Web design tips & tricks von AMPsoft, einer Website, die sich eigentlich mit Freeware Tools beschäftigt.
von Matthias Zellmer
typekit – kurz angeschaut
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.
von Christopher Frühwirth
Die neusten Beiträge
Die neusten Kommentare
