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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…