Schlagwort-Archiv: CSS

Typografie, Webdesign, Cascing Style Sheets, Fonts

Usability und Benutzerfreundlichkeit beachten

Neulich lief ich an einer Kunsthandlung vorbei, auf dessen Firmenschild der lateinische Spruche „Ars mihi Lex“ stand, „Die Kunst ist mir Gesetz“. Daraufhin begann ich darüber nachzudenken, wie es denn im Webdesign mit der Kunst aussieht, und wer sich wem unterwerfen muß. In der Online-Zeitung Mittelstandcafé werden im Artikel Modernes Webdesign soll auf den Besucher […]

31. Januar 2012 | Konzeption

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

Fließende Positionierung mit CSS

Während man früher als Webdesigner häufig schon beim Codieren dran denken musste, wo welches Element auf der fertigen Seite hin soll, kann man sich durch die Verwendung von Cascading Style Sheets (CSS) viel Zeit und Nerven sparen und Dinge dynamisch positionieren.

14. Oktober 2011 | CSS