Cascading Style Sheets (CSS) gibt es nun seit gut zehn Jahren. Sie haben sich zum Standard für die Formatierung von Schriften und Aussehen von HTML entwickelt. Die Angaben, die entweder in einer ausgelagerten Datei oder im Code der Seite selbst eingebettet sein können, haben den Tag <font> abgelöst. Durch Vergabe von eindeutigen Bezeichnungen und für mehrere Elemente verwendbare Klassen lassen sich im Zusammenspiel mit Javascript komplexe Programme erstellen, die somit auf die einzelnen Teile zugreifen und sie verändern können.
Aber das wirklich tolle an Cascading Style Sheets CSS ist, dass sich damit auch einige anspruchsvolle Formatierungen nachbilden lassen, die die Herzen von Typografen höher schlagen lassen werden. Stilistische Veränderungen, die man vorher nur von anspruchsvollen Textsatzprogrammen wie Quark XPress oder Adobe InDesign kannte, gehen bis zu einem gewissen Grad auch in CSS. Selbst Formatierungen, die das typografisch sowieso nicht besonders fähige Microsoft Word nicht kann, lassen sich erzeugen.

Hier mal ein kurzer Schnelldurchlauf:

font-weight:bold

Dieser Absatz ist in Bold gesetzt, zu deutsch in Fettschrift

font-style: italic

Dieser Text ist kursiv gesetzt

Neben den Selbstverständlichkeiten wie der Veränderung von Schriftschnitt, Schriftfarbe und Größe kann man mit dem Kommando line-height die Zeilenhöhe beeinflussen.

Dieser Beispieltext hat einen ganz engen Zeilenzwischenraum. Er ist mit einem Zeilenabstand von nur 12 Punkt formatiert, wodurch sich das Lesen des Textes deutlich erschweren dürfte. Das ist absichtlich passiert. um den Effekt dieser Formatierung auch mal über mehrere Zeilen hin demonstrieren zu können.

Diese Formatierung dürfte vor allem dann hilfreich sein, wenn man Kleingedrucktes noch etwas kleiner und unleserlicher am unteren Rand einer Seite anzeigen lassen möchte. Normalerweise möchte man als Webdesigner ja vermeiden, dass manche Texte nicht zu lesen sind, aber wenn man besonders fiese Klauseln abdrucken muss, aber nicht unbedingt will, dass die Kunden sie auch wirklich lesen bevor sie sie akzeptieren, dann dürfte ein kleiner Zeilenabstand dabei helfen. Ein Schelm übrigens der Böses dabei denkt.

Auch ein sehr netter typografischer Effekt ist die Einrückung des Absatzanfangs. Der Einzug, also der Leerraum zu Beginn eines Absatzes, kann auch mit Cascading Style Sheets erzeugt werden. Hierfür muß dem<p>, das den Absatz umfasst, über die Erweiterung style=“text-indent:1em“ mitgeteilt werden, wie groß die Einrückung sein soll. Die Werte können in Punkt (pt), Pica (pc), Zoll (in), Millimeter (mm), Zentimeter (cm), Pixel (px), Element (em), kleines x (ex) oder relativ in Prozent (%) angegeben werden.

Dies ist ein weiterer Beispieltext, bei dem das erste Wort des Absatzes eingerückt ist, die restlichen Zeilen hingegen sodaß ein klassisches Textbild entsteht, dass den Leser zum Weiterlesen animiert und den Text harmonisch und gefällig aussehen lässt. Diese Art von Textsatz sieht man noch häufig im Buchsatz und in einigen Zeitschriften. .

Man kann das Ganze aber auch anders herum verwenden und nur die erste Zeile links anfangen lassen, während die restlichen Zeilen eines Absatzes eingerückt werden. Dies erreicht man indem man dem Attribut text-indent einen negativen Wert gibt, den Abstand (padding) aber positiv hält.

text-indent:-2em;
padding-left:2em;

Dies ist ein Beispiel für negativen Einzug am Absatzanfang und positiven Abstandwert für den restlichen Absatz. Es gibt mit Sicherheit einige Verwendungsmöglichkeiten für diese Art von Formatierung.

Auch Kapitälchen lassen sich umsetzen, also die Großbuchstaben, die anstelle der Kleinbuchstaben eingesetzt werden.
font-variant: small-caps

Dieser Text wurde mit Kapitälchen gesetzt. Alle Buchstaben sind Großbuchstaben, nur die Versalien sind richtig große Großbuchstaben

Mit letter-spacing kann man auch Sperrungen erzeugen. Zulässig sind hierbei ebenfalls Zahlenwerte in Punkt (pt), Pica (pc), Zoll (in), Millimeter (mm), Zentimeter (cm), Pixel (px), Element (em), kleines x (ex) oder relativ in Prozent (%).

letter-spacing:.2em;

Dieser Text wurde mit einer Sperrung von 5em gesetzt. Dabei stehen die einzelnen Buchstaben sehr weit auseinander, wodurch der ganze Text relativ schwer zu lesen ist. Diese Art der Formatierung eignet sich wohl eher für Headlines and auszeichnungen als für Fließtext.

Mehr zum Thema:
Barrierefreies Webdesign – Typografie | Lankau.de


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.