Wichtiges zu Schriften im Internet

Überschrift oder Fließtext?

Von ganz entscheidener Bedeutung ist es, ob man eine Schrift für Headlines oder für den Mengentext einsetzen will. Grob definiert reichen die Schriftgrade mit Mengentextcharakter von 9px bis 15px (Es gibt die Unterscheidung zwischen Pixelpunkten »PX«  und Schriftsatzpunkten »PT« ). Was darüber hinausgeht, wirkt schon zu groß und erinnert an Seitengestaltung für Sehbehinderte.

Überschriften hingegen beginnen etwa bei ca. 15px Schriftgrad und können beliebig groß werden. Eine Verdoppelung des Schriftgrades (z. B. von 12px auf 24px) zieht eine Vervierfachung der verwendeten Pixel nach sich: Der individuelle Charakter einer Schrift bildet sich so viel deutlicher heraus.

Während es in langen Fließtexten primär um gute Lesbarkeit geht – unter anderem, weil es am Bildschirm ohnehin schon schwer genug ist – kann und sollte man bei den Headlines durchaus auch die formale Schönheit und den Charakter einer Schrift in seine Entscheidung mit einbeziehen.

Serifen oder nicht?

Im Normalfall gilt, dass eine hochwertige Serifenschrift, im Vergleich zu einer Grotesken, für den Fließtext besser geeignet ist: Die Serifen erwirken eine stärkere Zeilenbildung, ihre Formgebung treibt das Auge in Leserichtung, die individuellere Form einzelner Buchstaben führt zu prägnanteren und damit schneller erfassbaren Wortbildern.

Diese Binsenweisheiten würden zwar prinzipiell auch am Bildschirm gelten. Doch wie sieht es aus, wenn so ein kleines »n« nur 6 Pixel hoch ist? Und das große »R« gerade mal 9 Pixel? Ist da noch viel mit Serifenformgebung und prägnanten Wortformen? Nein, in diesen Pixeldimensionen kämpft jede Schrift ums nackte Überleben, beziehungsweise darum, überhaupt noch unterscheidbar zu sein. Bei 11 Pixel Kegelhöhe zählen ganz andere Dinge als beim Offsetdruck in 11 Punkt.

Im Klartext: Eine Serifenschrift, gesetzt in 11px oder weniger, ist auf dem Bildschirm unbrauchbar, ganz besonders im ungeglätteten Zustand. Und das bringt uns zum nächsten Thema.

Glättung oder nicht?

Dies ist eigentlich eine Pseudo-Frage, denn wir HTML-Schaffenden haben leider nicht die Wahl! Machen wir einen kurzen Exkurs zu unseren geschätzten Kollegen, den Flash-Gestaltern, die sich in einer beneidenswerten Situation befinden: Völlige Schriftfreiheit bei jeder typografischen Entscheidung! Ein Flasher kann jede Schrift aus den vergangenen 500 Jahren in geglätteter Form in seine Gestaltung einbetten. Dadurch, dass das Flash-PlugIn systemübergreifend identisch ist, wird sein Entwurf auf jedem Rechner der Welt die gleiche hübsche Schriftglättung aufweisen.

Darüber hinaus kann unser Kollege sich aus der ständig wachsenden Zahl von ungeglätteten Pixelschriften bedienen. Es gibt hier, neben viel Schrott, einige exzellente Exemplare, die jeden HTML-Designer blass vor Neid werden lassen.

Im HTML-Design spielt die Glättung zwar seit einigen Jahren auch eine wichtige Rolle, jedoch haben die Web-Designer darauf absolut keinen Einfluss: Ob eine Schrift geglättet wird – und wenn ja, ab welchem Schriftgrad –, bestimmt das Betriebssystem, der Browser und eventuell der Nutzer – wenn er die richtigen Einstellungen findet, um das Anti-Aliasing nach seinen Wünschen zu beeinflussen.

Sämtliche Kombinationen aufzuzählen, wäre hier müßig; nur soviel: Windows besitzt seit XP eine systemweite Schriftglättung, MacOS X schon etwas länger. Safari glättet sämtliche Schriften, Mozilla ist da etwas behutsamer. Windows 98 glättet in bestimmten Fällen. Linux beherrscht mit den modernen Distributionen und unter KDE/Gnome auch Anti-Aliasing.

Ein genereller Vorteil von Schriftglättung ist der, dass eine Schrift hierbei nicht Pixel für Pixel in Buchstabenform und Kerning optimiert werden muss, um auf dem Bildschirm einigermaßen vernünftig auszusehen. Durch Anti-Aliasing können außerdem auch halbe Pixel bzw. Viertelpixel simuliert werden, was entscheidende Vorteile mit sich bringt, zum Beispiel bei der Festlegung der Laufweite per CSS.

Schriften definieren

Es gibt bekanntermaßen nur eine Handvoll Schriften, die wirklich bei jedem Internet-Surfer auch korrekt angezeigt werden. Dabei kann der Browser des Nutzers prinzipiell jede Schrift darstellen, die auf dem System installiert und aktiv ist.

Es gibt durchaus Fälle, in denen man seine Zielgruppe kennt und die Schriftwahl entsprechend anpassen kann: Eine Seite mit Tuning-Tipps für MacOS X kann getrost mit Headlines in der Lucida Grande gesetzt werden – eine der nicht deaktivierbaren Systemschriften von MacOS X. Gleiches gilt beispielsweise für die Verwendung der Tahoma auf Windows-spezifischen Websites.

Es gibt folgende zwei Grundhaltungen:

Verwendung der Basis-Fonts, sprich Arial, Times New Roman und Courier. Da weiß man, was man hat. 

Verwendung auch exotischerer Schriften mit dem Alternativen Angebot. Bei Jeffrey Zeldman, dem CSS-Pionier, sieht das beispielsweise so aus: »Lucida Grande«, »Trebuchet MS«, »Bitstream Vera Sans«, Verdana, Helvetica, sans-serif.

Mit einer umfangreichen Schriftenliste hat man nicht mehr die Kontrolle darüber, wie die Website denn nun tatsächlich beim User dargestellt wird. Für Verfechter der Usability-Philosophie, nach der man dem Nutzer möglichst viele Entscheidungen über das Erscheinungsbild der Website selbst überlässt, dürfte das kein Problem darstellen.

Wer jedoch seinen Entwurf als heilig ansieht, wie die meisten Grafik-Designer und Typografen das tun, muss sich eben auf die Basics beschränken und kann bei dieser Gelegenheit auch gleich darüber schimpfen, dass er keine Kontrolle über die Schriftglättung besitzt (siehe oben).

Die Web-Schriften im Detail

Der Urvater aller Web-Schriften: Die Arial ist seit Windows 3.1 fester Bestandteil des Microsoft-Betriebssystems und somit die verbreitetste Schrift des Universums. Auf Apple-Rechnern ist sie seit MacOS 9 zu finden oder kam bereits davor Huckepack mit Microsoft Office bzw. dem Internet Explorer. Nur Linux-Anhänger müssen leider draußen bleiben; Seltsamerweise bietet Microsoft die Arial nämlich nicht zum freien Download an.

Es ist ja viel Böses geschrieben worden über dieses missratene Helvetica-Plagiat (unter anderem von mir), doch man muss fairerweise zugeben, dass die Arial auf dem Bildschirm eine ganz gute Figur macht – zumindest im Fließtext. Für den Druck sollte man sie allerdings lieber nicht verwenden.

In den letzten Jahren haben sich viele Web-Designer von der Arial abgewandt, so dass man heute schon fast wieder trendy ist, wenn man sie einsetzt.

Es ist tatsächlich so: Die Times New Roman sieht tatsächlich ein wenig anders aus als die Times (ohne New Roman). Doch diesen Unterschied wird man nur im direkten Vergleich sehen.

Erik Spiekermann hat die Times einmal als das typografische Suppenhuhn bezeichnet und meinte damit, dass sie schnöde Allerweltskost darstellt, ohne Charakter oder Charme. Recht hat er. Ich persönlich finde, dass sie auf dem Bildschirm nur im Bereich von 12px–15px erträglich ist: Ist sie kleiner, sumpfen die Serifen zu und alles wird unleserlich; ist sie größer, wird erst deutlich, aus was für ruppigen und unförmigen Buchstabenformen sie besteht.

Leider kommt man nicht ganz um die Times New Roman herum, schließlich ist sie immer noch die einzige hundertprozentig verbreitete proportionale Serifenschrift.

Die Courier ist auf dem Bildschirm grauenvoll, was damit zusammenhängt, dass sie eigentlich für Schreibmaschinen entworfen wurde. Dass man diese Buchstabenformen nicht so einfach auf den Bildschirm übertragen kann, sollte einleuchten. Nicht jedoch den brachialen Microsoft-Leuten. Man hätte meines Erachtens wesentlich mehr Ästhetik und Lesbarkeit rausholen können.

Erstaunlich ist, dass die ursprüngliche Courier (ohne New) unter der Schriftglättung von MacOS X besser aussieht als die angeblich bildschirmoptimierte Courier New. Letztere ist jedoch genauso verbreitet wie Arial und Times New Roman und bildet somit den Abschluss des harten Kern-Trios der Web-Schriften.

Die Georgia ist eigentlich das, was die Times New Roman hätte werden sollen: Eine freundliche, formschöne Serifenschrift. Gut geeignet für die etwas wärmere, persönliche Note. Mit einer wunderbaren echten Kursiven. Und mit Mediävalziffern. Ihre wahren Stärken spielt die Georgia vor allem in geglätteter Darstellung aus.

Trebuchet

Microsoft hat mit dieser Schrift ganze Arbeit geleistet. Die Trebuchet ist eine verhältnismäßig schmale Groteske mit mehr Charme und individuelleren Formen als Arial oder Verdana. Sie besitzt sogar eine echte Kursive, was für serifenlose Schriften eine Besonderheit darstellt.

Man sollte auch bei der Trebuchet mit dem Schriftgrad aufpassen: Unter 12px kann das ungeglättet ziemlich leicht in die Hose gehen. Für Überschriften aller Art ist die Trebuchet jedoch in jedem Falle einen Versuch wert.

Die Geschichte der Trebuchet verläuft parallel zur Georgia und man kann und darf sie als Freeware herunterladen.

Verdana

Die Verdana entstand zeitlich etwas vor Georgia/Trebuchet, nämlich 1994, und gilt als die am besten lesbare Web-Schrift in kleineren Schriftgraden. Die Verdana ist auch in 9px gut zu erkennen. Sie wirkt sogar in groß gesetzten Überschriften noch ganz akzeptabel, wenn auch ein wenig grobschlächtig.

Die universelle Einsatzfähigkeit bezahlt sie mit dem Preis der Charakterlosigkeit. Die Verdana ist das Arbeitstier unter den Web-Schriften und nicht dazu gedacht, aus der Masse hervorzustechen. Es gibt außerdem ein seltsames Problem mit dem fetten Schnitt: Dieser ist nämlich unter MacOS X sehr fett geraten, was mich zwar wundert, aber leider den Tatsachen entspricht.

Dennoch ist man mit der Verdana immer gut beraten, wenn es um Lesbarkeit und Klarheit im Web geht, zumal sie fast ebenso verbreitet ist wie die Arial.

[ zurück ] []