Rechnen vs. Schauen – der Vertikalraster

Geschätzte Lesezeit: 2 Minuten

Um alle Elemente der Granaton-Seite proportional richtig anzuordnen, die Abstände korrekt anzulegen und Harmonie in die Textstruktur zu zaubern, will ich einen optischen, horizontalen Linienraster erzeugen, an dem ich alle Kanten ausrichten kann. Doch das ist ein Ding der Unmöglichkeit.

Als ich die urpsrüngliche Typografie für Granaton festgelegt habe, habe ich mich für die Systemschrift Georgia entschieden, habe ihr zur besten Lesbarkeit eine Größe von 0,9 em zugeteilt (14,4 Pixel), habe die Linienhöhe von 1,618 als perfekt harmonisch und für den Lesefluss ideal empfunden und daraus meine „Magic Number“ von sanft gerundet 23,3 Pixel oder ungerundet 1,4562 em ermittelt. Ich möchte nun gerne im Hintergrund einen Raster an die Seite anlegen, um visuell alle Elemente harmonisch aufeinander abstimmen zu können. So eine Art Linienspiegel. Doch wie soll das gehen? Ich grüble und grüble. Ein Bild besteht immer aus ganzen Pixelzahlen, das kleinstmögliche Bild ist 1×1 Pixel breit. Hintergrundbilder kann man über CSS nicht mit einem Margin oder einem Padding versehen, ein gekacheltes Hintergrundbild schließt lückenlos an die nächste Kachel an. Auch dynamische Größen sind für Hintergrundbilder nicht möglich. Also sind für den Raster nur ganze Pixel anwendbar, keine Dezimalzahlen. Ich könnte einen Bildraster erzeugen, der eine Line-height von 233 Pixel hat, um ganze Pixelwerte aus 23,3 zu erzeugen. Das macht keinen Sinn. Um ganze Pixelwerte zu erzielen, zwischen den einzelnen Zeilen, müsste ich die Linienhöhe auf 1,666 erhöhen. Doch dann ist das Schriftbild nicht mehr so angenehm.

Kann ich vielleicht über Horizontal Rules ein Grid programmieren? Ich könnte ein hr-Grid über ein Div mit css margins erzeugen – aber das kann ich nicht als Hintergrund definieren.

Ich glaube, ich habe jetzt zwei Stunden darüber nachgedacht, wie ich ein perfektes Grid visuell erzeugen kann. Ich habe gerechnet, probiert, Screenshots gemacht, getrickst… Ich habe keine Lösung gefunden. Entweder das Grid war unregelmäßig (mit schmäleren und breiteren Zeilen) oder die Zeilenhöhe war nicht harmonisch. Deshalb entschließe ich mich dazu, auf ebendiesen Linienraster einfach zu verzichten. Ich habe meine Magic Number berechnet, kann damit mathematisch alle Vertikalabstände anpassen, das benötigt vielleicht etwas mehr Denkleistung im Kopf, als eine visuelle Angleichung, aber dafür kann ich gleich loslegen und verliere nicht noch mehr Zeit. Und letztendlich habe ich ja auch noch geschulte Augen im Kopf, ein ausgeprägtes Harmoniebedürfnis, und kann aufgrund von Gefühl und Witz ein lebendiges Grid zaubern, das auch die dritte Dimension, die Z-Achse, imaginär mit berücksichtigt.

Teilen Sie Ihre Meinung mit