Professionelle Textgestaltung

Textgestaltung mit CSS 2.1 - So zähmen Sie Texte

Vor allem in komplexen, mehrspaltigen Weblayouts ist die Ggestaltung von Text mit CSS 2.1 nicht gerade einfach. Internet Magazin erläutert, wie Sie Texte und Überschriften in Ihrem Layout zähmen.

Textgestaltung mit CSS

© Archiv

Textgestaltung mit CSS

Vor allem in komplexen, mehrspaltigen Weblayouts ist die Gestaltung von Text mit CSS 2.1 nicht gerade einfach. Internet Magazin erläutert, wie Sie Texte und Überschriften in Ihrem Layout zähmen.

Weblayouts haben inzwischen einen so hohen Reifegrad erreicht, dass sie Printmedien in nahezu nichts mehr nachstehen. Mediengestalter aus der Druckbranche würden allerdings staunen, wenn sie wüssten, wie komplex die praktische Umsetzung von Textattributen im Web wirklich sein kann.Im Print muss das Layout weder nachträglich skaliert werden, noch ändern sich die je nach Leser verwendeten Schriften auf dem Papier. Ganz anders dagegen im Web.

Vor allem in Weblayouts, die auf einem imaginären Raster aufsetzen, ist die Gestaltung von Text mit CSS 2.1 alles andere als trivial. Die Webseite muss in allen gängigen Webbrowsern, potenziell mit Ersatzschriften und in benutzerdefinierter Vergrößerungsstufe, auf jeder Art Display unabhängig von der Bildschirmauflösung eine gute Figur abgeben.

Viele Webdesigner verlieren unzählige Stunden ihrer Zeit mit der Aufgabe, den Text in ihrem Layout in den Griff zu bekommen, genau so, wie es der Auftraggeber haben will, und nicht anders.

Die erste Frage, die Sie sich stellen sollten, um den Text in komplexen Weblayouts zu zähmen, hängt mit den verwendeten Einheiten für die verschiedenen Textparameter wie Schriftgröße und Zeilenabstand zusammen: Sie müssen entscheiden, mit welchem Maßstab Sie den Text und alle ihm übergeordneten Elemente messen. Diese Entscheidung hat nämlich überraschende Konsequenzen.

Einheitlich oder absolut genau?

Bei der Formatierung von Text steht Ihnen eine Vielzahl von Einheiten zur Verfügung, doch Vorsicht: Der Text in der ganzen Dokumentstruktur verhält sich unterschiedlich in Abhängigkeit von der gewählten Einheit, da Eigenschaften wie die Zeichengröße (font-size) und Zeilenabstand (line-height) von übergeordneten Seitenelementen je nach Einheit geerbt oder eben nicht geerbt werden.

Zwecks Vereinfachung nutzen viele Designer die Möglichkeit, Textgröße mit einem Schlüsselwort zu definieren, zum Beispiel: xx-small, x-small, small, medium, large, x-large und xx-large für absolute Zeichengröße und smaller oder larger für relative Zeichengröße zum übergeordneten Element. Zum Beispiel:

p {
font-size: medium;
}
und
h1 {
font-size: larger;
}

Diese etwas grobe Methode ergibt von Browser zu Browser im direkten Vergleich überraschend konsistente Resultate, aber sie gibt Ihnen kaum Kontrolle über die wirkliche Schriftgröße. Einige Webdesigner setzen daher einmal die Ausgangsschriftgröße und legen sie sonst überall in Prozent fest.

Wenn es auf die Präzision ankommt, werden oft absolute Einheiten bevorzugt: px (Pixel) für die Bildschirmdarstellung und pt (Punkt) für die Druckausgabe.

Bei der pixelgenauen Positionierung von Textelementen am Layoutraster bevorzugen viele Webdesigner den Einsatz von Pixeln als Einheit für die Formatierung von Text. Diese Methode galt eine Zeit lang als kein guter Stil. Das wichtigste Argument gegen den Einsatz von Pixeln als Einheit war ursprünglich die fehlende Unterstützung für das Anpassen der Schriftgröße in älteren Versionen von Internet Explorer 6, Google Chrome 1 und Safari 3.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".