Text am Grundlinienraster
Die ebenfalls neu eingeführte Einheit rem entspricht der Zeichengröße des Root-Elementes (root em). vw entspricht der Breite des Viewports und vh der Höhe des Viewports. Die Einheit vm entspricht entweder der Höhe oder der Breite des Viewports, je nachdem, welcher dieser Werte geringer ausfäll...
Die ebenfalls neu eingeführte Einheit rem entspricht der Zeichengröße des Root-Elementes (root em). vw entspricht der Breite des Viewports und vh der Höhe des Viewports. Die Einheit vm entspricht entweder der Höhe oder der Breite des Viewports, je nachdem, welcher dieser Werte geringer ausfällt. Die Einheit ch gleicht der Breite der Glyphe "0" (ZERO, U+0030) für die gegebene Zeichengröße und Schrift.
Falls diese Glyphe im Zeichensatz nicht definiert ist, kann sich der Browser mit einem Durchschnittswert behelfen). Somit werden rasterbasierte Layouts mit CSS3 beliebter. Wenn Sie bereits heute rasterbasierte Layout-Konzepte umsetzen möchten, können Sie es mit CSS2.1 tun.
Text am Grundlinienraster
Mit wachsenden ästhetischen Ansprüchen an das Webseitendesign professioneller Websites wächst die Beliebtheit rasterbasierter Weblayouts mit am Grundlinienraster ausgerichtetem Text.
In Webdesign-Seminaren hört man des Öfteren, dass sich Grundlinienraster auf Webseiten nicht umsetzen ließen, da man nicht erzwingen könne, dass alle Webseitenobjekte vertikal an einem imaginären Raster ausgerichtet würden, geschweige denn, dass man sogar exakt vorhersagen könne, wo ein Element genau zu liegen käme.
Mit einigen elementaren mathematischen Berechnungen und etwas Liebe zum Detail geht es aber durchaus und wir zeigen Ihnen im Folgenden Schritt für Schritt, wie Sie das für Ihre Webseiten umsetzen können.
Viele Webdesigner kennen Layoutraster noch aus den Urtagen des Webs als Orientierungshilfe in grafischen Wysiwyg-Editoren. Damals wurden Layoutraster mit heutzutage zu Recht verpöntem Tabellen-basierten Layout-Konstruktionen erzielt, die viele Nachteile aufweisen.Unter anderem ist damit die saubere Trennung von Inhalt und Layout nicht möglich und auch die Barrierefreiheit wird damit infrage gestellt. Heute versteht man unter einem Layoutraster eine imaginäre Konstruktion, die das Ausrichten von Seitenobjekten in einem professionellen Layout mit CSS vereinfacht.
Auch beim Text am Grundlinienraster ist nicht ein Hintergrundbild gemeint, sondern vielmehr eine geometrische Einteilung der Webseite, die der präzisen Ausrichtung von Objekten dient und beim Betrachter unbewusst den Eindruck besonderer Eleganz erwecken soll, die er sonst aus Printmedien kennt.
Auch bei rasterbasierten Layouts kommen Sie nicht umhin, sich die Frage nach der optimalen Einheit zu stellen. Für beide Ansätze - absolute sowie relative Einheiten - gibt es gute Gründe.
Im Folgenden nehmen wir als Ausgangspunkt für unsere Betrachtungen ein paar Werte, die besonders oft Verwendung finden: 12 Pixel als Standardgröße für den Fließtext und 18 Pixel für den Zeilenabstand. Die Zahlen 12 und 18 wurden in diesem Beispiel bewusst gewählt, weil sich 12 als 2 * 2 * 3 und 18 als 2 * 3 * 3 faktorisieren lässt. Außerdem ist 18 um 50 Prozent größer als 12 und wir vermeiden damit Rundungsfehler.
Diese Werte sind nicht verpflichtend, doch die Primzahlen 17 oder 19 sind nur durch sich selbst und durch 1 teilbar und nicht faktorisierbar. Sie lassen sich nicht rundungsfehlerfrei in kleinere Anteile splitten. Es ist wichtig, sich die Relation zwischen Pixelgröße und Zeilenabstand vorab zu überlegen.
