Gunther: Typografie - vertikaler Rhythmus

Beitrag lesen

@@Gunnar:

nuqneH

Hab den Artikel Using Sass to Build a Custom Type Scale with Vertical Rhythm selbst noch nicht gelesen, aber vielleicht ist er was für dich.

Danke für den Tipp ...! :-)

Aber ..., nach dem Durchlesen und Begutachtung des Ergebnisses, finde ich die Variante "nicht gut".
Er steuert den vertikalen Rhythmus einzig über die Zeilenhöhe, die zudem teilweise bei der Art der Berechnung "unbrauchbare" Werte (line-height ~ 1) liefert.

Außerdem berücksichtigt seine "Formel" die Zeilenlänge nicht.

Ich bin inzwischen zu dem "Ergebnis" (oder der Meinung) gekommen, dass man den vertikalen Rhythmus nur unter der Einschränkung einzeiliger Überschriften erstmal per CSS etablieren kann.
Für "mehrzeilige" Überschriften kann man dann ggf. per JS nachhelfen.

Ferner erscheint mir, bis jetzt zumindest, eine Variante mit gleichbleibendem Line-Height-Faktor am geeignetsten.

Und dann, je nach Schriftgröße, ein (ganzzahliges) Vielfaches der Basis-Line-Height (Grundraster).

Margin-top so wählen, dass er immer dem absoluten Wert der Line-Height entspricht, und ansonsten die Überschrift per padding-top + bottom mittig ausrichten.

Als Formel für die Berechnung der Basis-Line-Height "eignet" sich imho diese hier:

  
@mixin lineHeight($font-value, $line-width-value) {  
	$lineHeightRatio : 1.61803398875 - 0.30901699437492734189635854149791 * (1 - $line-width-value/(pow($font-value*1.61803398875, 2)));  
	$lineHeightValue : round($font-value * $lineHeightRatio);  
	$lineHeightRatio : $lineHeightValue / $font-value;  
	line-height: $lineHeightRatio;  
}

Ich versuche mich mal daran, das Ganze möglichst "komfortabel" in SASS umzusetzen.

Im Prinzip ändert sich ja quasi nur die Basis-Schriftgröße (und damit verbunden die Basis-Line-Height, wenn man davon ausgeht, dass die Zeilenbreite bspw. konstant 38em beträgt).

Gruß Gunther