Schriften fürs Web
Font-Guide

DeveloperIT-ProjekteNetzwerk-ManagementNetzwerkeSoftware

Webdesigner machen sich oft wenig Gedanken über Fonts, dabei ist die Wahl der richtigen Schrift für ein gutes Design entscheidend. Der Artikel verrät, wie Sie Fonts auswählen, einsetzen und verwalten.

Darum geht’s

Schriften fürs Web

Ein Webradio nur über Schrift oder gar eine Konferenz nur für Typografie? Dabei denkt man zuerst einmal an die Schriftgestaltung für den Print-Bereich. Webdesigner werden beim Thema Schrift eher weniger hellhörig. Dass das eigentlich schade ist, zeigen nicht nur die Beiträge im Typeradio oder die alljährlich in Berlin stattfindende Typo-Konferenz.

Die Standardschriften für HTML-Text und CSS-Formatierungen haben dazu geführt, dass das Interesse an Fonts im Web nicht ganz so hoch ist wie im Print-Bereich. Trotzdem sind außergewöhnliche Fonts für spannende Webseiten, lebendige Logos, Flash-Anwendungen und gute Gestaltung unabdingbar. Deswegen sollte sich ein Webdesigner intensiver mit den Fonts beschäftigen, die er einsetzen möchte. Dieser Artikel versteht sich als Einstieg ins Thema: Ein Überblick über Font-Formate und Font-Kategorien zeigt, welche Fonts es gibt. Aus rechtlicher Sicht sind die Lizenzen und aus finanzieller Sicht lizenzfreie Fonts besonders interessant. Außerdem stellt der Artikel Werkzeuge zur Font-Verwaltung und zum Erstellen und Bearbeiten eigener Fonts vor.


Font-Formate

Schriften fürs Web

Der Ursprung aller Schriften sind die Bitmap-Fonts. Bei diesen Schriften ist jede Buchstabenform aus Bildpunkten zusammengesetzt. Der Nachteil ist offensichtlich: Diese Schriften lassen sich nicht skalieren. Deswegen wurden die Bitmap-Fonts Anfang der neunziger Jahre abgelöst. Allerdings ist eine kleine Nische erhalten geblieben: Vor allem wegen der schlechten Schriftglättung in Flash kamen die Bitmap-Fonts wieder in Mode und sind auch heute noch nicht vollständig ausgestorben. Mit den ursprünglichen Formaten haben die heutigen Bitmap-Fonts allerdings nicht mehr viel gemeinsam.

Nach den Bitmap-Fonts ging der Trend hin zu Schriften, die ihre Forminformationen mathematisch abgelegt haben. Die Bildpunkte werden bei der Umwandlung in eine Grafik oder jeweils vom darstellenden Programm berechnet. So sieht die Schrift in jeder Größe ordentlich aus. Die zuständigen Formate für Schriften waren Postscript Type1 von Adobe und Truetype von Apple. Truetype wurde auch von Microsoft für Windows lizenziert, und daraus entstand Windows Truetype, das lange Zeit nicht mit der Mac-Variante kompatibel war. Seit MacOS X versteht der Mac allerdings auch die Windows-Variante mit der Dateiendung TTF.

Die Beschränkung der alten Formate, beispielsweise bei Truetype-Schriften auf 255 Zeichen, und die lange Zeit im Print-Bereich nervenden Inkompatibilitäten führten zur Entwicklung des Formats Opentype. Dieses Format wurde gemeinsam von Microsoft und Adobe in Angriff genommen und bietet vor allem Unicode-Unterstützung. Wenn Sie sich einen Zeichensatz unter Windows beispielsweise über Start, Programme, Zubehör, Systemprogramme, Zeichentabelle näher ansehen, erkennen Sie allein schon an der Menge an Zeichen, ob es sich um einen Opentype-Font handelt. Am Mac können Sie die Schriftsammlung verwenden, um Schriften und Buchstaben durchzugehen.

Das Dateiformat TTF ist für Opentype geblieben. Im Fonts-Verzeichnis von Windows, das sich im Windows-Hauptverzeichnis befindet, erkennen Sie den Unterschied an den verschiedenen Icons. Neben der Truetype-Variante von Opentype gibt es noch ein Opentype-Postscript-CFF-Format mit der Dateiendung OTF. Opentype steht in den modernen Betriebssystemen wie Windows 2000, XP, MacOS X und unter Linux per Freetype 2 zur Verfügung.

Aus typografischer Sicht bieten Opentype-Fonts eine Reihe von Vorteilen: So lassen sich für bestimmte Buchstabenkombinationen, beispielsweise st, Ligaturen definieren. Das heißt, Verbindungen zwischen den Buchstaben, die nur in der jeweiligen Kombination zum Einsatz kommen. Vor Opentype wären hierfür mehrere Schriftschnitte notwendig gewesen. Bei solchen Funktionen gibt es noch erhebliche Unterschiede zwischen verschiedenen Plattformen. Neben den gängigen Schriftformaten gibt es noch einige Exoten. Dfont (Data Fork Truetype Font) ist ein von Apple leicht abgewandeltes Truetype-Format. Photofont erlaubt Schriften mit vielen Farben und Transparenzen. Damit lassen sich also Bilder sehr einfach als Schriftsammlungen speichern. Bei dieser Technik handelt es sich allerdings um ein proprietäres Verfahren der Firma Fontlab.


Font-Kategorien

Schriften fürs Web

Haben Sie das passende Schriftformat gewählt, bleibt noch eine Unmenge an verschiedenen Schriftarten. Die Schriftarten sind in Kategorien sortiert, die sich beispielsweise auch in HTML und CSS wiederfinden:

font-style: sans-serif;

nimmt beispielsweise die Standardschriftart des Systems für serifenlose Schriften.

Neben den gebräuchlichen Schriftarten gibt es allerdings noch wesentlich mehr Font-Kategorien und ganze Systeme zur Schriftklassifikation. Bevor Sie sich in die Einteilung stürzen, aber noch ein paar Grundlagen: Man unterscheidet bei Schriften zwischen der Glyphe, der Form eines Zeichens, und dem Zeichen (Character) an sich. Das Zeichen an sich ist nur der Wert des Zeichens, nicht aber das Aussehen. In den meisten Schriften sieht ein a zwar auch aus wie ein a, aber es gibt beispielsweise Symbolschriften wie die Symbol, die bestimmte Zeichen einfach mit eigenen Glyphen versehen.

Die bekanntesten Schriftarten sind Serifen-Schriften und serifenlose Schriften. Als Serifen werden die kleinen Fortsätze an den Buchstaben bezeichnet, die beispielsweise eine Schrift wie die Times New Roman auszeichnen. In der Klassifizierung sind die serifenlosen Schriften auch die Linearen. Allerdings ist es recht schwer, festzustellen, welche Klassifizierung eigentlich offiziell ist. Es gibt eine DIN-Norm (DIN 16 518), die Schriften in elf Klassen einteilt. Allerdings wird sie kaum noch verwendet, da sie keine Möglichkeiten für die Einordnung moderner Schriften bietet. Aktueller und realitätsnäher ist die Einordnung nach Wolfgang Beinert. Er unterteilt in Haupt- und Untergruppen.

Diese Gruppierung findet sich natürlich nicht unbedingt auf den Font-Seiten im Web wieder. Aber die grobe Einteilung ist meist recht ähnlich. In der Praxis kommen allerdings oft noch einige Schrifttypen hinzu, die bei Beinert Untergruppen sind. Beispielsweise Monospace-Schriftarten, bei denen alle Buchstaben die gleiche Breite und den gleichen Abstand haben. Solche Schriften werden beispielsweise für Quellcode in Programmiersprachen verwendet. Der bekannteste Vertreter ist die altehrwürdige Courier.


Lizenzen für Schriften

Schriften fürs Web

Ähnlich wie bei Bildern gelten bei Fonts teilweise strenge Lizenzbedingungen. Und ebenfalls ähnlich wie bei Bildern werden diese Lizenzgrenzen im Web fleißig aufgelöst – das Urheberrecht hat es schwer in einer schrankenlosen Welt. Wer seriös und auf Dauer ohne juristische Probleme arbeiten möchte, sollte sich allerdings um seine Font-Lizenzen kümmern.

Font-Lizenzen ähneln eher Software-Lizenzen, wohingegen Bilder-Lizenzen für Stock-Fotos meist nutzungsabhängig sind. Das heißt, die meisten Font-Lizenzen gehen davon aus, dass die Schrift auf einem Rechner installiert wird und dort eingesetzt werden kann. Wie viele Logos, Grafiken et cetera daraus produziert werden, ist dabei nicht erheblich. Diese Lizenzsituation ist natürlich für den Designer recht angenehm: Er zahlt einmal für jeden Schriftschnitt, und der Kunde muss nicht jedes Mal extra zahlen, es sei denn, er möchte die Schrift auch auf seinem System. Ein Unternehmen benötigt seine Hausschrift natürlich trotzdem für einzelne oder alle Arbeitsplätze. Dafür sehen die meisten Font-Anbieter Volumenlizenzen vor.

Bis jetzt besteht also kein Problem: Der Designer, der Kunde oder die Agentur kauft einen Font, erstellt daraus Grafiken und kann diese Gra
fiken dann weltweit verwenden. Die Einschränkungen entstehen meist bei Dokumenten, in die Schriften eingebettet werden. Hierfür ist teilweise eine eigene Lizenz notwendig (zum Beispiel www.myfonts.com/viewlicense?id=98). Die Abgrenzung ist hier je nach Font-Anbieter sehr unterschiedlich. Linotype begrenzt beispielsweise seine Lizenz nur dahingehend, dass Fonts nicht als Software an sich weitergegeben werden dürfen (www.myfonts.com/viewlicense?id=8). Das heißt, das Einbetten in PDFs und Flash ist erlaubt, solange der Font an sich ausreichend geschützt ist. Andere Lizenzen sind da weniger gnädig und untersagen beispielsweise eine Einbettung in PDF. Dafür gibt es dann meist spezialisierte und damit etwas teurere Lizenzen.

Ein Lizenzproblem ist unter Umständen auch der Einsatz eines Truetype-Fonts auf dem Server. Wenn zum Beispiel mit Typo 3 ein Menü generiert wird, muss die Font-Datei dafür auf dem Webserver liegen. Demnach muss für den Webserver eine eigene Lizenz gekauft werden, da die Schrift ja normalerweise auch noch auf dem Rechner des Designers und noch dazu gleichzeitig zum Einsatz kommt.


Kommerziell und frei

Schriften fürs Web

Der Markt an kommerziellen Fonts wird von einigen größeren Anbietern dominiert: Adobe ist nicht nur zweitgrößter Software-Anbieter der Welt, sondern auch ein Platzhirsch auf dem Font-Markt. Die deutsche Firma Linotype ist ebenfalls stark vertreten und bietet Klassiker wie Helvetica und Frutiger. Neben ihren Fonts bietet Linotype noch eine kostenlose Font-Verwaltung, die natürlich auch mit dem eigenen Webshop verbunden ist.

Neben den großen gibt es allerdings auch viele kleine Büros und Schriftgestalter, die über die Font-Plattformen ihre Schriften vertreiben. Hier lohnt es sich, sowohl bei den Font-Shops im Web als auch bei den kleineren Anbietern selbst vorbeizuschauen.

Nun aber zu den Font-Plattformen: Die bekannteste deutsche Anlaufstelle ist der Fontshop. International bieten beispielsweise Myfonts.com und Fonthouse.com eine gute Auswahl.

Kostenpflichtige Fonts sind meist gar nicht allzu teuer: 10 bis 30 Euro ist die normale Spanne. Allerdings ist dafür oft nur ein einziger Schriftschnitt erhältlich. Für kursive oder fette Schriftschnitte wird derselbe Obolus erhoben. Wer mehrere Schnitte von einem Font benötigt, sollte prüfen, ob es von der Schrift die ganze Familie im Komplettpaket gibt.

Bei vielen Font-Portalen gibt es einige kostenlose Fonts und dazu dann kostenpflichtige. Beispielsweise werden die Fonts von Ray Larabie, die bereits für einen Internet-Professionell-Design-Artikel in Ausgabe 7/2003 zum Einsatz kamen, größtenteils als Truetype kostenlos angeboten. Die Opentype-Varianten sind kostenpflichtig und mittlerweile über Myfonts.com zu beziehen.

Bei den Font-Portalen lohnt sich auch ein Blick auf die Top 10 oder die Bestseller. Hier lassen sich hervorragend Trends beurteilen. Besonders interessant ist natürlich, welche Schriften sich neben den Klassikern besonders gut verkaufen. Myfonts.com bietet hier beispielsweise eine Übersicht der Starlets, der neuen Fonts, die zu Bestsellern geworden sind.

Im Bereich der kostenlosen Fonts werden Sie sowohl auf einigen Font-Portalen als auch auf kleineren Websites von begeisterten Font-Designern fündig. Ein Klassiker für freie Fonts ist das Portal Dafont.com. Dort gibt es Fonts, die nur für den privaten, nicht aber für den kommerziellen Gebrauch frei sind, aber auch Fonts, die komplett kostenlos einsetzbar sind. Bei eingeschränkt kostenfreien Fonts müssen Sie dann die Readme-Datei beim Font bemühen und meist auf der Website des Autors vorbeischauen. Aber auch das kann – beispielsweise im Fall des Entwicklers der Schrift Hotel Coral Essex (www.pennyzine.com) – eine durchaus interessante und inspirierende Erfahrung sein.

Fonts einzeln oder als Sammlungen im Web zu kaufen, ist natürlich sehr gezielt, aber auch nicht ganz billig. Und auch das Sammeln von freien Fonts artet teilweise in aufwendige Recherchearbeit aus. Deswegen greifen viele Designer zuerst einmal auf das zurück, was das Betriebssystem bietet. Dabei wissen sie oft nicht, dass in den eigenen Software-Archiven noch einige Schätze schlummern. Beispielsweise liefert Adobe bei seinen Grafik-Paketen viele Schriften mit. Manche davon sind nur auf den beiliegenden Ressourcen-CD-ROMs oder DVDs zu finden. Font-Sammlungen im Elektromarkt-Wühltisch können zwar auch manchmal Kleinode enthalten, die Erfolgsquote ist allerdings tendenziell sehr gering.


Bequem: Font-Verwaltung

Schriften fürs Web

Wer bei freien und kommerziellen Font-Portalen und Font-Anbietern fündig geworden ist, will die Fülle an Hunderten oder gar Tausenden von Schriften natürlich auch ordentlich verwalten. Windows bietet hier nicht besonders viel: die Zeichentabelle (Start, Programme, Zubehör, Systemprogramme, Zeichentabelle) gibt zwar einen Überblick über die Zeichen und die Kodierung in Ascii und Unicode, liefert aber beispielsweise keine druckbare Vorschau zur Beurteilung der Schriften und hilft auch nicht beim Gliedern. Unter MacOS X gibt es mit der Schriftsammlung eine etwas bessere Verwaltungsoberfläche, die aber bei gehobenen Ansprüchen ebenfalls nicht ausreicht. Unter Linux bieten die einzelnen Desktops verschiedene Verwaltungsmöglichkeiten. Für den KDE geben Sie im Konqueror fonts:/ ein, um die Schriften zu verwalten. Unter Gnome funktioniert das analog im Nautilus mit fonts:///. Die Schriftverwaltung heißt hier passenderweise Fontilus. Aber auch diese Verwaltungen sind für eine große Anzahl von Schriften ungeeignet.

In diese Lücke stoßen diverse Programme zur Font-Verwaltung. Eine gute Font-Verwaltung kümmert sich um die installierten und auch um die noch nicht installierten Schriften. Außerdem enthalten die meisten Font-Verwaltungen eine Zeichentabelle, Such- und Filtermöglichkeiten sowie eine Druckmöglichkeit für Fonts. Wichtig ist außerdem, dass die Schriftverwaltung Duplikate erkennt und Unterschiede feststellt, wenn ein Schriftname von mehreren Herstellern verwendet wird. Zum besonderen Luxus gehören dann noch Font-Vergleiche und detailliertere Informationen zum Aufbau der Fonts.

Der Veteran unter den Font-Verwaltungen ist Suitcase von Extensis. Diese Software gibt es für Mac und Windows. Allerdings ist die Windows-Version nicht ganz so fortschrittlich wie die Mac-Version. Der große Vorteil an der Suitcase-Lösung ist, dass es bei Server-Versionen einen Schriftserver im Hintergrund gibt, der die Verwaltung von Schriften auch für Arbeitsgruppen erlaubt. Eine ähnlich professionelle Lösung ist der Font Agent Pro. Hier gibt es eine Workgroup- und eine Server-Variante. Eine kostenlose Alternative ist der Fontexplorer X von Linotype. Neben einer professionellen Font-Verwaltung integriert das Programm den Linotype-Shop à la iTunes.

Unter Windows gibt es größtenteils günstigere, aber auch etwas weniger professionelle Werkzeuge. Der Fontexpert hat die modernste Oberfläche. Funktional haben aber auch Maintype, Typograf und X-Fonter die wichtigsten Funktionalitäten integriert.


Individuell: Fonts editieren

Schriften fürs Web

Wer selbst Hand an Fonts legen oder komplett eigene Fonts erstellen möchte, greift zu einem Fontprogramm. Das kann notwendig sein, wenn Sie das Logo in die Hausschrift integrieren möchten, damit es in Photoshop direkt verfügbar ist, oder gar eine komplett eigene Schrift für die Website entwickeln wollen. Der Font-Editor ist im Prinzip ein Vektorgrafikprogramm, das allerdings noch spezielle Fähigkeiten besitzen muss: Beispielsweise muss es die Auftei
lung in Zeichen übernehmen und auch die Abstände der Buchstaben voneinander regeln (Metrics und Kerning). Drei der wichtigsten Font-Editoren gehören dabei zur Firma Fontlab. Den Fontographer hat Fontlab vor geraumer Zeit von Macromedia übernommen. Seitdem hat sich zwar nicht viel getan, der klassische Font-Editor funktioniert aber nach wie vor sehr gut. Einzig die Oberfläche wirkt schon etwas angestaubt und der Komfort ist mit einem modernen Vektorgrafikprogramm nicht mehr zu vergleichen. Für den günstigeren Einstieg bietet Fontlab Type Tool 2.0. Hiermit lassen sich gerade bestehende Schriften einfach verändern. Allerdings gilt dabei natürlich immer nachzuprüfen, ob das überhaupt mit den Lizenzbedingungen zu vereinbaren ist.

Das Flaggschiff von Fontlab ist das Fontlab Studio. Es unterstützt Pixelschriften und bietet ansonsten Highend in der Schriftgestaltung. Auch der Import aus Vektorgrafikprogrammen klappt direkt über die Zwischenablage. Die Oberfläche ist aufgeräumt, aber Einlernzeit ist auf jeden Fall einzuplanen. Speziell für Fonts mit asiatischen Schriftzeichen bietet Fontlab noch das Asiafont Studio.


Werkzeuge

Schriften fürs Web

Einen Font-Editor braucht nur, wer größere Ambitionen in Sachen Schriften hegt. Neben diesen Boliden und der einfachen Font-Verwaltung gibt es noch eine Reihe anderer Werkzeuge, die bei der täglichen Arbeit mit Fonts nützlich sind: Fontdoctor und Smasher versuchen, defekte Schriften aufzuspüren und zu reparieren. Wer sich nicht auf das verbesserte Schrift-Antialiasing in neueren Flash-Versionen verlassen will oder kann, dem sei Fontflasher ans Herz gelegt. Dieses Programm verwandelt Schriften in Pixelfonts, die dann in der exakten Größe in Flash einsetzbar sind. DP4 und Popchar X liefern eine Schriften- und Zeichenübersicht, die sich von den Betriebssystem-Standards durch zusätzlichen Komfort abhebt, und Fontbook dient dazu, Schriftmuster zu drucken. Unter MacOS X können dafür auch nicht installierte Zeichensätze verwendet werden.


Fazit

Schriften fürs Web

Eine schöne und für den Zweck passende Schrift ist ein Kunstwerk. Wie viel Einfluss die Schrift auf eine Website hat, merkt man erst, wenn man sie wechselt. Deshalb sollten Webdesigner sich um die Verwaltung ihrer Schriften kümmern, auch wenn sie nur für Flash und Grafiken zum Einsatz kommen. Wer fleißig Schriften sammeln möchte, sollte sich auf jeden Fall um seine Font-Quellen, Lizenzen und um seine Schriftenverwaltung kümmern, damit er in der immensen Fülle an verfügbaren Schriften für jeden Zweck das richtige findet.