Textgestaltung mit CSSSchöne Worte
CSS vs. font-Tag
Textgestaltung mit CSS
Bis vor kurzem standen viele Webdesigner Cascading Stylesheets (CSS) negativ gegenüber. Warum CSS verwenden, wenn es mit dem font-Tag auch geht? Mittlerweile ist klar, dass CSS sich durchsetzen wird. Die Vorteile überwiegen einfach: Stil-Befehle sind flexibel einsetzbar und mittels externer Stylesheet-Dokumente auch zentral für die ganze Website geeignet.
Dazu kommt, dass die neueren Browser alle einen Großteil der CSS-2.0-Spezifikation (kurz: CSS 2) unterstützen. Mit ein wenig Mühe sehen per CSS formatierte Seiten sogar auf dem Netscape Navigator 4.x noch gut aus.
Klasse oder nicht?
Textgestaltung mit CSS
Schriftart
Textgestaltung mit CSS
Den Anfang jeder Textformatierung macht die Wahl der Schriftart. Eigentlich ist die Wahl der Schriftart sehr einfach: Sie definieren sie im allgemeinen font-Befehl, der auch die Angabe von Größe, und Formatierung erlaubt, oder im speziellen font-family-Befehl, der nur die Schriftart festlegt.
Mehrere Schriftarten fügen Sie durch Kommas getrennt hintereinander:
.text {font-family: Arial, Helvetica, sans-serif}
Sans-serif ist die Gattungsbezeichnung für Schriften ohne Schnörkel und kleine Anhängsel an den Buchstaben (Serifen). Serif steht für Serifenschriften, monospace für dicktengleiche Schriften. Dicktengleich bedeutet, dass alle Buchstaben gleich breit sind.
So weit, so gut. Ein Problem besteht noch: Die Schriftart kann zwar ausgesucht werden. Hat der Nutzer sie aber nicht auf dem Rechner, kann sie nicht verwendet werden. In diesem Fall wird immer die nächste Schrift in der Reihe benutzt. Bleibt keine Schrift übrig, verwendet der Browser die Standardschrift.
Dieser Zustand ist für professionelle Designer nicht zumutbar. Sie wollen exakt wissen, wie eine Seite beim Nutzer wirkt. Daraus entstand die Idee, Fonts per Internet mitzuschicken. Dabei gibt es zwei Ansätze für die Realisierung dieser so genannten dynamischen Fonts: Microsoft bietet für den Internet Explorer eine Lösung, Fonts mit der Seite mitzusenden. Entsprechende Fonts haben die Dateiendung EOT und werden mit dem Web Embedding Font Tool (WEFT) erstellt und in eine Seite eingebunden (www.microsoft.com/typography/web/embedding/weft2/weft1.htm).
Der zweite Ansatz kommt von der Firma Bitstream. Ihr dynamisches Font-Format Truedoc ist direkt im Netscape Navigator 4.x integriert und als ActiveX-Plug-in für den Internet Explorer verfügbar. Font-Dateien haben die Endung PFR. Leider ist die Bitstream-Technologie trotz einiger Diskussionen nicht in neueren Browsern wie Mozilla integriert.
In CSS fügen Sie einen dynamischen Font ? ob nun für das Microsoft- oder das Bitstream-System ? folgendermaßen ein:
@font-face {
font-family:IhrFontName;
src:url(IhrFontUrl)
}
In der Praxis haben sich dynamische Fonts nicht durchgesetzt. Dies hat wohl mehrere Gründe: Die Handhabung ist relativ unpraktisch, zusätzliche Daten müssen übertragen werden und die Systeme sind auf bestimmte Browser beschränkt. Die meisten Designer greifen deswegen lieber zu Grafiken, wenn sie außergewöhnliche Schriftarten einsetzen möchten.
Farbe und Kontrast
Textgestaltung mit CSS
Die Farbe von Schrift wird in CSS mit dem color-Befehl vorgenommen:
.text {color: red}
Farbangaben erfolgen entweder als Farbname, als hexadezimaler Wert oder als RGB-Wert. Der RGB-Wert darf entweder in Farbwerten von 0 bis 255 oder in Prozent von 0% bis 100% angegeben sein.
.text {color: rgb(100%, 0%, 0%)}
Diese Farbangaben unterstützen auch ältere Browser wie der Netscape Navigator 4.x. Neu in CSS 2 und insofern auf neuere Browser beschränkt ist die Möglichkeit, Farben des Fenstersystems zu vergeben. Der folgende Befehl verwendet beispielsweise die Farbe der Menüleiste:
.text {color: menu}
Einen vollständigen Überblick über alle Möglichkeiten erhalten Sie in der Spezifikation unter www.w3.org/TR/REC-CSS2/ui.html#system-colors. In der Praxis sind diese Farbbefehle noch recht selten zu finden, da die meisten Unternehmen und Website-Betreiber ihre Farben selbst bestimmen möchten.
Beim Einsatz von Farben müssen Sie vor allem auf eines achten: Verwenden Sie ? zumindest für Fließtexte ? starke Kontraste. Als am angenehmsten gilt im Allgemeinen dunkle Schrift auf hellem Grund.
Simple Typo
Textgestaltung mit CSS
Normaler Text
Wichtige Formate
Textgestaltung mit CSS
Wenn Schriftart und -größe erst einmal stimmen, geht es an die übrigen Formatierungsoptionen. Die verschiedenen Schriftschnitte einer Schrift sind in CSS auf zwei Befehle aufgeteilt. font-weight dient zur gefetteten Darstellung eines Texts. Ist als Wert bold angegeben, verwendet der Browser den zugehörigen Schriftschnitt oder ? falls nicht vorhanden ? berechnet die fette Schrift. Alternative Werte können Sie in Zahlen von 100 (sehr dünn) bis 900 (sehr dick) oder relativ (zum Beispiel bolder für fetter, lighter für dünner) angeben. In der Praxis ist allerdings fast nur der Wert bold zu sehen.
Font-style enthält den zweiten Teil der Schriftschnitte. Italic verwendet einen kursiven Schriftschnitt, oblique stellt die Schrift ebenfalls schräg. Allerdings besitzen manche Schriften für italic abweichende Schriftschnitte.
.format {font-weight: bold; font-style: italic}
Das Angenehme an diesen Formatbefehlen ist, dass sie auf keinem Browser Probleme machen. Die Empfehlungen aus der Spezifikation werden sauber eingehalten (siehe www.w3.org/TR/REC-CSS2/fonts.html#propdef-font-style).
Font-variant funktioniert dagegen nicht unter Netscape 4.x, dafür aber in den übrigen relevanten Browsern. Der einzige relevante Wert neben dem Standard normal ist small-caps für Kapitälchen:
.kap {font-variant: small-caps}
In diesem Fall verwendet der Browser entweder einen Schriftschnitt mit Kapitälchen oder berechnet die Kapitälchen selbst. Wollen Sie statt Kapitälchen lieber nur Klein- beziehungsweise Großbuchstaben, verwenden Sie den Stilbefehl text-transform:
.grossklein {text-transform:lowercase}
Der Wert lowercase macht alle Buchstaben zu Kleinbuchstaben, uppercase zu Großbuchstaben und capitalize beginnt jedes Wort mit Großbuchstaben.
Detailarbeit
Textgestaltung mit CSS
Bei längerem Fließtext ist es oft angenehm, die Abstände zwischen Buchstaben und Worten noch ein wenig zu verändern. Dafür sieht CSS2 die beiden Befehle letter-spacing und word-spacing vor.
.abstand {letter-spacing: 2px; word-spacing: 5px}
Beide akzeptieren ein beliebiges Längenmaß als Angabe. Das Längenmaß wird immer zum Standardabstand dazugezählt. Um den Abstand zu verringern, geben Sie negative Werte an.
.abstand {letter-spacing: -2px; word-spacing: -5px}
Unterstützt werden letter-spacing und word-spacing zwar von allen Browsern außer dem Netscape Navigator 4.x, dennoch sollten Sie Vorsicht walten lassen. Veränderte Abstände beeinflussen die Lesbarkeit eines Textes ganz gewaltig. Ebenfalls ungeahnte Auswirkungen auf den Text kann der Befehl text-decoration haben. Der bekannteste Wert ist none. Damit wird bei Links die Unterstreichung beseitigt. Das genaue Gegenteil bewirkt underline: Der Text erscheint unterstrichen. Auf Letzteres sollten Sie im Web immer verzichten, da die Verwechslungsgefahr mit Links einfach zu hoch ist.
Die übrigen Optionen overline (Linie darüber) und line-through (durchgestrichen) sind seltener im Einsatz, aber durchaus ab und an praktisch. Dagegen gilt blink als sehr umstritten. Dieser Befehl sorgt auf allen Browsern außer dem Internet Explorer für blinkenden Text. Hier stellt sich unter Umständen sogar Dankbarkeit beim Nutzer ein, dass Microsoft eine Funktion einmal nicht integriert hat. Interessant ist auch, dass blink laut CSS2-Spezifikation ausdrücklich nicht implementiert werden muss.
Effekte
Textgestaltung mit CSS
Nach der Pflicht folgt die Kür ? nach der Typografie also noch ein wenig Effekthascherei. Ein Effekt mit Praxiswert sind die Pseudo-Klassen first-letter und first-line.
p:first-letter {color: red; font-size: 2em}
p:first-line {color: blue; font-size: 1.2 em}
Ähnlich wie ihre Pendants bei Links sind sie für die Formatierung bestimmter Elemente zuständig ? in diesem Fall des ersten Buchstabens beziehungsweise der ersten Zeile eines Textes.
Mit text-indent können Sie zusätzlich die erste Zeile des Absatzes um ein beliebiges Längenmaß einrücken:
p {text-indent:10px}
Netscape 4.x-Nutzer müssen hier auf die Pseudo-Klassen verzichten. Ihnen steht also nur die Einrückung mit text-indent zur Verfügung.
Fazit
Textgestaltung mit CSS
Wer nicht damit leben kann, dass Schriftart und -größe von Browser zu Browser unterschiedlich aussehen, der sollte zu Flash greifen oder seinen Text als Grafik anlegen. Meist ist das aber nicht sinnvoll. CSS hilft bei der Formatierung und erlaubt schon recht ausgefeilte typografische Steuerungsmöglichkeiten. Die Browser-Unterstützung ist im Allgemeinen gut. Nur Netscape 4.x-Nutzern bleibt einiges vorenthalten. Allerdings gibt es in CSS2 immer noch einige Formatierungsbefehle wie font-size-adjust, font-stretch oder text-shadow, die bisher noch in keinem Browser umgesetzt wurden. Man darf gespannt sein, ob sie in der nächsten Browser-Generation landen.
Was bringt CSS 3?
Textgestaltung mit CSS
Obwohl CSS 2 noch nicht vollständig implementiert ist, laufen schon die Arbeiten an der nächsten Generation.
Der Seitentitel von
www.w3.org/Style/CSS/current-work ist jedoch bezeichnend: Under Construction. Die einzelnen Bestandteile von CSS 3 befinden sich in unterschiedlichen Stadien des W3C-Prozederes, einige sind Working Drafts, einige schon Candidate Recommendation. Es dürfte dennoch noch einige Zeit ins Land gehen, bis Version 3.0 von CSS offiziell verabschiedet wird ? bedenkt man, dass CSS 2 aus dem Jahr 1998 stammt und noch immer nicht komplett implementiert ist. Bis dahin liefert die nicht-normative Einführung in CSS 3 unter www.w3.org/TR/2001/WD-css3-roadmap-20010523/ gute Informationen über das, was erwartet werden darf.
Zu den Neuerungen gehört unter anderem die Unterstützung von mehrspaltigem Text, wozu es bis dato mühsamer Workarounds bedurfte. Außerdem wird es möglich sein, auf Informationen wie Seitentitel und Seitennummer zuzugreifen und sie direkt auszugeben (»Sie befinden sich gerade auf Seite 74 dieses Hefts«). Beim media-Attribut können Sie nicht nur angeben, für welche Medien das Stylesheet eingesetzt werden soll, sondern dort auch Bedingungen verwenden wie etwa eine Mindest-Bildschirmauflösung.
Der ganzen Ungeduld und Spannung zum Trotz ? wenige Teile von CSS 3 werden schon von manchen Browsern unterstützt, zum Beispiel im Bereich Cursor und Opazität.