Fonts & CSS
Schriften im Web
Kompromisse
Fonts & CSS
Typografie für das Web besteht zum größten Teil daraus, Kompromisse zu finden, sei es bei Schriftart, Lesbarkeit oder typografischen Zeichen. Dieser Artikel fasst die Kämpfe mit dem Medium zusammen und stellt sie gängigen typografischen Regeln gegenüber, ohne dabei ein Typografie-Lehrbuch sein zu wollen.
Schriften einbinden
Fonts & CSS
Am Anfang steht die Entscheidung, ob Text als HTML, in Flash oder gar als Grafik angezeigt werden soll. HTML-Text lässt sich mit den typografischen Möglichkeiten von CSS zwar hervorragend formatieren, aber die Beschränkung auf die auf dem System des Nutzers installierten Schriftarten bleibt bestehen.
Vollständig freie Schriftwahl hat nur, wer seine Schrift als Grafik anlegt oder Flash verwendet. Text als Grafik bietet viele Freiheiten: Beispielsweise lässt sich die Schrift auch drehen oder ins Hintergrundbild einbinden. Allerdings geht diese Freiheit auf Kosten der Accessibility und der Suchmaschinenoptimierung. Schriften lassen sich dann nicht mehr vergrößern, sehbehinderte Nutzer müssen das alt-Tag der Grafik zu Rate ziehen und Suchmaschinen-Robots ignorieren Grafik-Links weitgehend. Ist ein Text als Grafik angelegt, kann er außerdem nicht mehr kopiert oder beispielsweise über eine normale Suche gefunden werden.
Unter Umständen helfen hier Kompromisse wie ausgeblendeter Text, der auf dem grafischen Text liegt. Aber gerade Suchmaschinen-Robots reagieren aus gutem Grund allergisch auf solche Tricks.
Die Entscheidung für den Flash-Einsatz sollte natürlich nicht nur von der Schriftwahl abhängen, aber einer der Vorteile von Flash ist nun einmal die große optische Freiheit, zu der auch das Einbetten von beliebigen Schriften zählt – zumindest, wenn man die passende Lizenz erworben hat. Gegenüber der Lösung Text als Grafik lässt sich Flash-Text markieren und kopieren. Theoretisch wäre er auch von Suchmaschinen-Robots deutbar. Die ersten Versuche, das SWF-Format zu indizieren, versprechen allerdings bislang wenig Erfolg. Insgesamt bleibt klar, dass Flash eher für eine Microsite oder eine Anwendung wie ein Spiel oder einen Produktkonfigurator taugt, als für die gesamte Website.
In der Praxis immer weiter verbreitet sind Mischformen aus Text als Grafik oder Flash und Text als HTML. Beispielsweise kann eine klug eingesetzte, außergewöhnliche Schriftart für zusätzliche Aufmerksamkeit sorgen.
Schriftarten-Wirrwarr
Fonts & CSS
Können Sie die folgenden CSS-Zeilen schon nicht mehr sehen?
font-family: Arial, Helvetica, sans-serif;
Die Standardschriftarten im Web haben Vor- und Nachteile. Jeder kennt sie, das heißt, sie sind schon gewohnt, aber auf der anderen Seite optisch auch etwas abgenutzt. Hat man eine Zielgruppe, die bevorzugt mit einem Betriebssystem arbeitet, könnte man auch die dort installierten Schriften, beispielsweise die Tahoma unter Windows, verwenden. Das ist auch nicht weiter gefährlich, wenn Sie eine Ersatzschrift oder die Schriftfamilie für die anderen Betriebssysteme verwenden. Vorsicht, die Schriftfamilie sollte in jedem Fall angegeben werden, da sonst auf Systemen ohne alle vor der Familie angegebenen Schriften die Standardschriftart – meist Times New Roman – verwendet wird. Die Tahoma könnte man beispielsweise so einbetten:
font-family: Tahoma, Arial, sans-serif;
Das Problem für Designer ist, dass sie bei dieser Variante nicht die volle Kontrolle über das Ergebnis haben. Tahoma, Verdana und Arial unterscheiden sich optisch und in der Lauflänge des Textes deutlich voneinander. Auch die Serifenschriften wie Georgia und Times New Roman sind keinesfalls gleich, teilweise noch nicht einmal ähnlich. Und sogar Arial und Helvetica unterscheiden sich untereinander und auf verschiedenen Systemen. Nicht zu Unrecht bezeichnen viele Typografen die Arial als hässlichen Helvetica-Klon aus dem Microsoft-Universum.
Der Designer muss schließlich selbst entscheiden, ob er volle Kontrolle möchte und sich mit den absoluten Standards begnügt oder ob er als erste Wahl eine etwas seltener gesehene Systemschrift vorschickt. Hundertprozentige Verbreitung gibt es übrigens kaum, auch die Arial, eigentlich eine sichere Bank, ist auf Linux-Systemen nicht verfügbar, da Microsoft sie nie offen angeboten hat. Nur die Times beziehungsweise Times New Roman – der Unterschied ist marginal – ist wirklich überall zu finden, aber in Sachen Schönheit und Lesbarkeit auf dem Bildschirm nicht gerade eine traumhafte Wahl. Lesbar ist sie nur in größeren Schriftgrößen ab 12 Pixel aufwärts, und dort merkt man schnell, dass die Times aus recht groben Formen besteht.
Glücklicherweise gehört das font-Tag seit einigen Jahren zu den Akten. Dementsprechend läuft der Großteil der Typografie mit CSS. Dabei gibt es einige Grundregeln: Beispielsweise ist es heute Standard, relative Schriftgrößen zu verwenden, damit die Schrift vom Nutzer im Browser ohne großen Aufwand größer oder kleiner skaliert werden kann. Auch wer sein Layout recht fest vorgeben möchte, sollte relative Größen wählen. Schließlich sind heute die Auflösungen so unterschiedlich, dass kleine Schriftgrößen beispielsweise auf einem 15-Zoll-Notebook mit hoher Auflösung auch ohne Sehbeschwerden kaum noch zu lesen sind.
Typografie mit CSS
Fonts & CSS
Neben den Standardeinstellungen bietet CSS viele Möglichkeiten zur Textauszeichnung. Dazu zählen natürlich die üblichen Schriftauszeichnungen wie fett (font-weight) und kursiv (font-style), die jedem Webdesigner bekannt sind. Aus typografischer Sicht sind sie eine gute Möglichkeit, Text hervorzuheben. Allerdings gilt hier meist: Weniger ist mehr. Das heißt, mehrere Hervorhebungsarten sollten nicht gemischt werden. Und natürlich muss die Auszeichnung auch logisch in die Struktur des gesamten Textes passen. Eine journalistische Textstrukturierung in Hauptüberschrift, eventuell einen Vorspann und einen Text mit Zwischenüberschriften steht auch einer Webseite gut zu Gesicht. Aus Accessibility-Gründen ist der Text so besser erfassbar, und die klare Ordnung gibt den Nutzern Orientierung. Die Auszeichnungen dienen dann dazu, Teile des Textes besonders zu betonen.
Eine Hervorhebungsart ist aus der modernen Print-Typografie größtenteils verschwunden: die Unterstreichung. Sie wird dagegen im Web als Link-Erkennungsmerkmal fleißig gebraucht. Aus typografischer Sicht spart eine korrekte Unterstreichung allerdings die Unterlängen von Buchstaben aus, sprich ein kleines p ist nicht unterstrichen. Die zweite korrekte Variante wäre, die Unterstreichung unter dem Text durchzuführen. Ersteres lässt sich im Web nicht oder kaum realisieren. Zwar wäre es denkbar, mit einem Skript alle Buchstaben mit Unterlängen auszufiltern und separat zu formatieren, aber dieser Aufwand steht in keinem Verhältnis zum Ergebnis. Eine Alternative ist, statt der Unterstreichung einen unteren Rahmen zu verwenden. So lassen sich beispielsweise Links typografisch korrekt auszeichnen:
a {
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid black;
color: black;
}
Mit dem padding lässt sich dann der Abstand zwischen Linie und Text bestimmen. Allerdings hat auch diese Variante Schwächen: Im Prinzip wird eine nicht dafür gedachte CSS-Auszeichnung missbraucht, und wenn die Unterlängen im Wort fehlen, wirkt die Unterstreichung durch den Abstand vom Wort abgetrennt.
Versalien
Fonts & CSS
Aus typografischer Sicht ist eine Schrägstellung (oblique) nicht dasselbe wie eine kursive Schrift (italic). Bei einer kursiven oder auch fetten Schrift wird ein eigener Schriftschnitt verwendet, bei dem Position und Form jedes einzelnen Buchstabens festgelegt ist. Leider haben Sie im Web darauf ke
inen Einfluss. Vor allem bei kursiver Auszeichnung bei etwas kleinerer Schrift leidet die Qualität durch den Treppeneffekt bei den schräggestellten Buchstaben. Die Tendenz geht deshalb dahin, im Web eher fett als kursiv für Auszeichnungen zu verwenden. Ähnlich problematisch ist es bei Versalien, dem Schreiben in Großbuchstaben, und bei Kapitälchen, den kleinen Großbuchstaben. Sie sind gerade in Navigationen oder Überschriften eine sehr moderne Auszeichnungsvariante. Echte Versalien sind allerdings leicht kleiner (circa 95 Prozent) als normale Großbuchstaben. Im Gegensatz zur Schrägstellung können Sie hier mit CSS typografisch korrekte Versalien erzwingen:
.versal {
text-transform: uppercase;
font-size: 0.95em;
}
Empfehlenswert ist noch die manuelle Steuerung der Buchstabenabstände über das letter-spacing. Versalien erfordern je nach Schriftart einen etwas größeren Abstand als sonst üblich, also eine leichte Sperrung, um gut und flüssig lesbar zu sein.
Die Sperrung von Worten können Sie übrigens auch allein zur Auszeichnung verwenden.
letter-spacing: 0.2em;
In der Praxis ist es empfehlenswert, Versalien oder auch Kleinbuchstaben (lowercase) und Camelcase (capitalize) mit text-transform zu erzeugen, statt den Ursprungstext zu ändern. So können Sie problemlos mit verschiedenen Auszeichnungen herumprobieren.
Kapitälchen
Fonts & CSS
Kapitälchen sind große Anfangsbuchstaben gefolgt von kleineren Großbuchstaben. Auch hier können Sie sich nicht auf beim Nutzer installierte Schriftschnitte verlassen, die echte Kapitälchen bieten. Der mit CSS gestartete Automatismus mit font-variant verkleinert Großbuchstaben auf circa 90 Prozent. Im Web ist das die einzige Möglichkeit für Kapitälchen:
.kapi {
font-variant: small-caps;
letter-spacing: 0.1em;
}
Übrigens, aus typografischer Sicht muss aus einem ß in Versalien oder Kapitälchen immer ein Doppel-S werden. Hier unterscheiden sich leider die Browser. Der Firefox schafft den automatischen Wandel, der Internet Explorer belässt das scharfe S. Das heißt also, dass hier Handarbeit angesagt ist.
Als weitere Auszeichnungen bieten sich Schriftgröße, Farbe oder auch Sonderzeichen an. Gerade Letzteres ist sehr häufig anzutreffen: Mit einem Unterstrich (_) oder zwei Doppelpunkten (::) lässt sich eine Textpassage hervorheben oder ein Aufzählungszeichen ersetzen. Bei der Schriftfarbe oder auch bei fett und kursiv gibt es übrigens durchaus die Möglichkeit, Auszeichnung und Umfeld einfach zu tauschen. Sprich, Sie haben roten Text, und darin ist schwarze Schrift eine hervorragende Auszeichnung. Das heißt also, es gibt keine eindeutigen Regeln, welche Auszeichnung wann einzusetzen ist, sondern die Auszeichnung hängt immer von ihrem Umfeld ab.
Gute Lesbarkeit
Fonts & CSS
Typografie sollte immer zum Ziel haben, die Lesbarkeit von Text zu fördern. Neben der Wahl der Schriftart spielt hier vor allem die Spaltenbreite eine Rolle. Klassisch sagt man, eine Textzeile sollte zwischen 60 und 80 Zeichen umfassen. Natürlich gibt es Situationen, in denen man sich bewusst darüber hinwegsetzen kann. Aber aus typografischer Sicht ist es bedenklich, wenn der Nutzer allein mit seiner Auflösung beziehungsweise seiner Monitorgröße die Laufweite des Textes bestimmt. Bei flexibler Textbreite wird aus einem fünfzeiligen Text bei einer 800er-Auflösung schnell mal ein Einzeiler bei 1600 Pixeln. Wer trotzdem einen flexiblen Textbereich möchte, kann ihn in mehrere Spalten aufteilen. Dann ist der Vergrößerungseffekt nicht ganz so schlimm. Aus CSS-Sicht hilft außerdem eine maximale Breite mit max-width, um den meisten Gegebenheiten gerecht zu werden. Leider fällt hier der Internet Explorer bis Version 6 raus.
In Sachen Schriftgröße sind die Miniaturschriften im Web immer seltener zu sehen. Vorhanden sind sie beispielsweise noch auf vielen RSS-Feed-Schaltflächen, die aber schon farblich und formlich erkennbar sind. Ansonsten geht die Tendenz zu besser lesbaren größeren Schriften. Die klassische Print-Empfehlung mit einer Größe von ungefähr 10 bis 12 Punkt ist für den Bildschirm meist zu klein. Die Standardgröße der Browser entspricht meist 16 Punkt. Hiervon ausgehend liegt der Fließtext irgendwo zwischen 0.8 und 0.9 em im Allgemeinen ganz gut. Vergessen Sie allerdings nie, genug Vergrößerungsspielraum für die neueren TFTs und Laptops zu lassen, auf denen eine Website oft verschwindet.
Vor CSS nicht einstellbar waren Buchstabenabstand und Zeilenhöhe. Mittlerweile gibt es die CSS-Befehle letter-spacing und line-height. Sie lassen sich mit relativen Angaben füttern. Der Zeilenabstand wird von den meisten Browsern standardmäßig bei 120 Prozent der Schriftgröße festgelegt. Sie können das testen, indem Sie den Wert 1.2em oder 120% dafür verwenden:
line-height: 1.2em;
Als Empfehlung gilt hier: Je schmaler die Zeilen, desto weniger Zeilenabstand ist nötig. Am Bildschirm kann ausreichend Zeilenabstand allerdings durchaus für gute Lesbarkeit sorgen. Faustregeln sind hier schwierig – das Gefühl des Designers entscheidet.
Vom Blocksatz ist im Web eher abzuraten. Zwar gibt es sowohl mit dem HTML-Attribut align als auch mit dem CSS-Befehl text-align die Möglichkeit, mit dem Wert justify Blocksatz zu erzwingen, aber da der Browser keine Silbentrennung kennt, wirkt das Ergebnis kaum überzeugend.
Den letzten, aber bei weitem nicht unwichtigsten Beitrag zur Lesbarkeit leistet der Kontrast. Da der Bildschirm selbst leuchtet, ist der im Druck oft optimale Farbkontrast zwischen Schwarz und Weiß sehr hart. Empfehlenswert ist hier, entweder den Hintergrund mit ein wenig Grau abzudunkeln oder den Text statt mit Schwarz mit einem dunklen Grau zu schreiben. Auch leicht getönte Schriften und Hintergründe wirken angenehm auf das Auge des Betrachters. Dieser Effekt wird allerdings bisher noch kaum von einem textlastigen Portal genutzt, da sich der Effekt nur schwer beweisen lässt.
Die hier vorgestellten Regeln für bessere Lesbarkeit gelten nur für die Bildschirmdarstellung. Für den Ausdruck sollten Sie eine CSS-Druckversion bereithalten, die für vernünftigen Ausdruck sorgt. Hier ist beispielsweise die Arial als Schriftart nicht optimal geeignet.
Seltsame Zeichen
Fonts & CSS
Typografische Regeln gibt es nicht nur für Schriftauszeichnung und Schriftsatz, sondern auch für den Einsatz bestimmter Zeichen. Beispielsweise gibt es sehr unterschiedliche Arten von Anführungszeichen. Vorne und hinten hochgestellte Anführungszeichen sind englische Anführungszeichen, die im Deutschen nicht gebräuchlich sind. Ebenso sind die einfachen Zollzeichen (“”) nicht als Anführungszeichen zu gebrauchen. Deutsche Anführungszeichen beginnen links unten und enden rechts oben mit festgelegter Richtung und haben wahlweise auch nur einen Strich. Als kleine Merkhilfe: Im Gegensatz zu englischen Anführungszeichen klammern Sie das Wort aus. Gleichwertig im Deutschen gültig sind die umgekehrten französischen Anführungszeichen (»«). Sie werden im Web gerne eingesetzt, da sie im Latin-1-Zeichensatz enthalten sind.
Wann man überhaupt Anführungszeichen einsetzt, ist teilweise strittig. Recht interessant sind dazu die Beiträge des Duden (www.duden.de). Aus optischer Sicht sind Anführungszeichen aber vor allem eine praktische Auszeichnungsmöglichkeit. Eine gute Übersicht über alle Arten von Anführungszeichen und die jeweiligen Sonderzeichen-Codes finden Sie unter www.matthias-kammerer.de/SonsTypo2.htm. Das automatisierte Hinzufügen von Anführungszeichen beschreibt Christoph Päper (webdesign.crissov.de/
Typographie#q). Der Nachteil ist allerdings, dass der Internet Explorer außen vor bleibt.
Neben Anführungszeichen gibt es noch einige weitere typografische Zeichen. Beispielsweise Gedankenstriche (&ndash), die deutlich länger ausfallen sollten als normale Bindestriche. Und der Bindestrich selbst darf wiederum nicht als Minus eingesetzt werden. Dafür steht die HTML-Entität &minus zur Verfügung.
Fazit
Fonts & CSS
Ordentliche Typografie im Web ist bei weitem kein Hexenwerk. Die meisten CSS-Befehle sind Webdesignern bekannt. Es gilt nun nur noch, sich ein wenig Gedanken über Schrift und ihren Einsatz zu machen und auf die wichtigsten Sonderzeichen zu achten. Dadurch werden Websites nicht nur hübscher, sondern auch besser lesbar.