h7 design & webentwicklung

Ich habe mich die letzte Zeit intensiver mit Grundlinienraster für Webseiten beschäftigt. Für die Typografen aus dem Printbereich da draußen ist das ein alter Hut, nur im Web wird so gut wie kein Gebrauch davon gemacht.

Ein mögliches Endergebnis vorweg

Was ist das Grundlinienraster?

Sobald Papier beidseitig bedruckt wird scheint der Inhalt der anderen Seite immer leicht durch das Papier. Damit dies nicht störend wird, bedient man sich einem Grundlinienraster an dem der Fließtext ausgerichtet wird. So sind Vorder- und Rückseite deckungsgleich und stören beim lesen nicht.

Wieso bei Webseiten?

Das Grundlinienraster ist vom Prinzip ein vertikales Raster, nach dem die Text- und Bildelemente des Fließtextes angeordnet werden. Es ergibt sich so ein angenehmeres Textbild, auch am Bildschrim. So erscheinen z. B. Randbemerkungen in einer Marginalspalte neben dem Fließtext mit dem gleichen Zeilenabstand harmonischer.

Wo macht es Sinn?

Keine Frage – nicht bei jeder Seite muss man dies umsetzen. Aber vor allem bei Textlastigem Inhalt macht eine Ausrichtung des Fließtextes und Überschriften und Bildelemente in der Contentspalte Sinn. Schwierig wird das Ganze bei Listen, Aufzählungen, Formularelementen und Zitaten. Möglich ist es, ob es Sinn macht, muss man für den jeweiligen Fall selber entscheiden.

Wie geht man vor?

Zeilenabstand festlegen

Als Erstes muss man einen Zeilenabstand für das Grundlinienraster festlegen. Die hängt von der verwendeten Schriftgröße des Fließtextes (also der p Tags) ab. Bei der Standardschriftgröße 12px verwendet man meist eine Zeilenhöhe (line-height) von 18px, die einem Verhältnis von 150% entspricht.
Eine Eigenheit gibt es dabei zu beachten: setzt man per CSS eine line-height wird zuerst die angegebene Höhe aufgezogen und das Element dann in dieser vertikal zentriert.

Grundlinienraster anzeigen

Die einfachste Variante ist eine Hintergrundgrafik mit dem Raster zu erstellen. Wichtig ist das die erste Linie erst nach einer Höheneinheit beginnt. So werden die Elemente immer vertikal zentriert im Raster angezeigt. Bei dieser Technik muss man bei jedem Projekt mit anderem Raster eine neue Grafik erzeugen oder eine Bibliothek mit den gängigsten anlegen.
Genau da setzt Typogridder an. Über ein Javascript wird der Zeilenabstand des p Tags (jeder andere ist natürlich auch möglich) ausgelesen und über ein PHP Skript eine Rastergrafik erzeugt. Das ganze kann man als Bookmarklet in jeden Browser integrieren und so für jede Seite ein Grundlinienraster anzeigen lassen. In der Datei getBackgroundImage.php kann die Farbe des Rasters angepasst werden:

Zeile 49:

Hier wird jetzt ein Raster mit 90% Schwarz angezeigt, im Gegensatz zum standardmässigen Rot.

Elemente ausrichten

Der Einfachheit werden alle Werte in Pixeln angegeben, um das Prinzip einfacher zu verstehen. Als Erstes legt man die Standardschriftgröße und den Zeilenabstand fest:

Alle Abstände müssen ein Vielfaches unseres Grundlinienrasters, in diesem Beispiel 18px betragen. Da p-Tags immer unter einer Headline oder einem anderen p-Tag vorkommen, erhält dieser nur ein margin-bottom von einer Höheneinheit bzw. 18px.

Interessanter wird die Sache bei Headlines. Möchte man die h1 in 24px setzen muss man die line-height immer auf das passende oder nächst höhere Vielfache unseres Rasters setzen. Eine Schriftgröße von 36px = 2 Höheneinheiten = line-heigt 36px, aber 24px = 1,3 Höheneinheiten = auf 2 Höheneinheiten aufrunden = 36px. Dazu kommt noch ein Abstand von einer Höheneinheit oben und unten.

Möchte man z.B. einen border unter einer Headline, muss man diesen mit in die „Berechnung“ mit ein beziehen. In diesem Fall ist der border unten, also wird die Größe des borders vom unteren Abstand abgezogen = margin-bottom: 17px.

So kann man die analog für alle Headlines anpassen:

Weitere Elemente wie ungeordnete Listen, Definitionslisten, Tabellen usw. muss man selber entscheiden, ob man diese nach dem Grundlinienraster ausrichten möchte.
Listen z.B. werden durch die global in body festgelegte line-height beeinflusst, sobald man margin und padding auf 0 setzt.

Ein Beispiel wie das ganze dann mit mehreren Elementen aussieht:
Das Endergebnis

Weiterführende Links:

• Typogridder
• A List Apart: Setting Type on the Web to a Baseline Grid
• csshowto.com: CSS & The Baseline Grid
• Baseline & Grid Template
• smaschingmagazine: Designing With Grid-Based Approach
• 24 ways: Compose to a vertical rhythm

Der Beitrag wurde am Friday, den 6. July 2007 um 02:18 Uhr veröffentlicht und wurde unter Web, CSS, Guru abgelegt. du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.