Tips für Web-Profis (Designer & HTML-Autoren)

◀Zurück zur Übersicht aller Themen

Auswahl von Schriftarten

Zusammenfassung

  1. In der Liste der Schriftarten gibt man in CSS-Definitionen als erstes die Schriftart an, die man als Designer im Idealfall sehen möchte.

  2. Es können weitere konkrete Schriftarten folgen, die man als Alternative auch ganz gerne sähe, wenn die davor gelistete Schrift auf dem Zielsystem nicht installiert sein sollte.

  3. Als letztes gibt man einen generischen Font-Typ an. Diese Angabe kommt zum Tragen, wenn keine der zuvor angegebenen Schriftarten auf dem Zielsystem verfügbar ist. Der Browser wird dann eine auf dem System verfügbare Schriftart auswählen, die diesem generischen Typ gerecht wird. Die generischen Typen sind:
    serif
    sans-serif
    cursive
    fantasy
    monospace

Typographische Grundlagen

Benutzer zeitgenössischer Betriebssysteme werden schon vom Betriebssystem mit einer Fülle von Schriftarten versorgt. Man findet originelle, edle, lustige, chaotische Schriften für jeden Zweck.

In der Typographie sollte sich das Zielpublikum dieser, meiner Seiten (also Webdesigner mit Anspruch) eigentlich besser auskennen als ich. Für Quereinsteiger und Bluffer hier ein paar Grundregeln:

Angabe der Schriftart und Browser-Kompatibilität

Die Zeiten des <FONT>-Tags sind gottseidank vorbei. Schriftarten und andere Design-Angaben gehören in den meisten Fällen in CSS-Dateien (Cascading Style Sheets).

CSS 3 bietet die Möglichkeit, beliebige Fonts in eine Seite einzubinden; diese also dem Browser für die Dauer des Besuchs zur Verfügung zu stellen. Das kann technische und urheberrechtliche Probleme bergen, die hier nicht näher erläutert werden. Ich würde darauf nur zurückgreifen, wenn es nicht zu umgehen und gut bezahlt ist. Statt Fonts durch das Internet zu schieben wollen wir lieber mit dem arbeiten, was die Browser von Haus aus bieten.

Allerdings scheint oft nicht so ganz klar zu sein, wie man Schriftarten möglichst browser-kompatibel angibt. Genau wie beim Thema Bildschirm-Auflösung oder Farbtiefe müssen sich Designer hier der Philosophie des Web beugen:

Inhalte sollen auf jedem Web-Endgerät -- wenn auch vielleicht mit Einbußen bei der Darstellung -- in vollem Umfang lesbar sein.

Ein Browser kann nur solche Schriftarten umsetzen, die auf dem System des Betrachters installiert sind. Das System kann ein Windows-PC, ein iMac, ein Linux-PC, aber auch ein mobiles Endgerät sein.

Gebe ich also als Schriftart "Vrinda" ein und teste das auf meinem PC, so sehe ich eine elegante, serifenlose Schrift:
font-family: Vrinda;

Wenn diese Schriftart auf dem System des Betrachters nicht installiert ist, wird man allerdings nur die Standard-Schriftart des Browsers sehen. Das kann sehr unschön sein.

Teilweise kann man dieses Problem dadurch beheben, dass man in der CSS-Datei mehrere Schriftarten angibt. Der Browser verwendet dann aus der angegebenen Liste die erste, die auf dem System verfügbar ist. Arial und Helvetica sind ähnlichen Typs wie Vrinda. Die beiden sind seit langem unter Windows bzw. Mac-OS verfügbar. Damit die Schrift also auch auf älteren Windows- und Mac-Rechnern ins Bild passt, nehmen wir diese in die Liste mit auf:
font-family: Vrinda,Helvetica,Arial;

Damit weiß ich jetzt, was den Betrachter erwartet, wenn er zwar nicht Vrinda, dafür aber enteweder Arial oder Helvetica installiert hat. Damit sind wir fast komplett. Welche Schriftart soll denn auf Systemen angezeigt werden, die wir gar nicht kennen? Welche Fonts sind auf Web-TV-Geräten verfügbar? Was tun wir mit den Leuten, die auf dem PC eine handverlesene Liste von Schriftarten installieren? Welche Linux-Distributionen schließen welche Schriftarten mit ein? Welches Smartphone kennt welche Schriften?

Hier kommen generische Schriftarten als Retter ins Spiel. Wir definieren für den Browser einfach: Nimm irgendeine Schriftart ohne Serifen! Damit wird unser Text immer in einer Schrift aus der Familie Arial/Helvetica/Verdana/... dargestellt.
font-family: Vrinda,Helvetica,Arial,sans-serif;

Die generischen Schriftarten

Folgende generische Schriftarten stehen laut CSS2-Spezifikation zur Verfügung:

Die Beschreibungen (übersetzt nach W3C) sind in der jeweiligen generischen Schriftart gesetzt und können demnach in ganz unterschiedliche echte Schriftarten aufgelöst werden. Es kann daher interessant sein, diese Seite mit verschiedenen Endgeräten bzw. Browsern zu betrachten.

serif

Zeichen im Schrifttyp „serif” (so wie dieser Ausdruck in CSS benutzt wird), haben Abschlußstriche, zulaufende oder glockenförmige Enden, oder Haarlinien als Abschluß. Serifenschriften sind typischerweise Proportionalschriften, d.h. ein „I” nimmt weniger Platz ein als ein „W”. Oftmals sind die Unterschiede zwischen dicken und dünnen Strichen größer als bei serifenlosen Schriften der generischen Familie „sans-serif” (s. unten).

sans-serif

Zeichen im Schrifttyp „sans-serif” (so wie dieser Audruck in CSS benutzt wird), haben gerade Strichenden ohne jede Verzierung, Querstriche oder sonstige Ornamentierung. Auch die serifenlosen Schriften sind typischerweise Proportionalschriften (s.o.). Dicke und dünne Strichen unterscheiden sich verglichen mit den Schriften der Familie „serif”, nur sehr wenig.

cursive

Der schräggestellten Schriftschnitt ist nicht unbedingt das maßgebliche Kennzeichen von Schriften der Familie „cursive” (so wie der Ausdruck in CSS benutzt wird). Zusätzlich (oder auch stattdessen) treten hier Verbindungsstriche oder sonstige Kursiv-Charakteristika auf. Die Zeichen sind teilweise oder ganz miteinander verbunden. Das Ergebnis sieht mehr wie eine Handschrift mit Stift oder Pinsel aus denn nach klassischem Druck auf Papier. Manche Schriften, z.B. Arabisch, erscheinen fast immer im Typ „cursive”.

fantasy

In CSS versteht man unter „fantasy” vornehmlich dekorative Schriftarten. Hier kann man wahrscheinlich die größten Überaschungen erleben. Es ist praktisch nicht vorhersehbar, ob eine mit „fantasy” spezifizierte Schrift zum sonstigen Design einer Seite passt; daher mit Vorsicht zu genießen.

monospace

Das einzige Kriterium, welches eine Schriftart vom Typ „monospace” auszeichnet ist die einheitliche Zeichenbreite. Dadurch können manche Schriften (z.B. Arabisch) sehr eigenartig aussehen. Das Schriftbild sieht nach altertümlicher Schreibmaschine aus. Oft wird dieser Schrifttyp verwendet, um Computer-Kode darzustellen.

© Hermann Faß, 2005-2012