Typografie - vertikaler Rhythmus

[Gunther]

Hallo werte Selfgemeinde!

Da ich mich nun schon mehrere Tage intensiv mit dem Thema beschäftigt habe, und trotzdem noch zu keinem "zufriedenstellenden" Resultat gekommen bin, möchte ich doch mal bitte eure Meinung hören.

Erstaunlicherweise sehen (fast) alle Webseiten, die sich mit dem Thema beschäftigen, optisch nicht gerade "ansprechend" aus, was das Thema anbelangt.

Was meinen bisherigen Eindruck, dass man gar nicht alle theoretischen Vorgaben in die Praxis umsetzen kann, nur verstärkt hat.

Aber zur Sache:

Gehen wir davon aus, dass normaler Fließtext eine Schriftgröße von 1em hat, und die line-height 1.5 beträgt (was die line-height anbelangt scheint das auch der weitverbreitste Wert zu sein).

Ferner gehen wir davon aus, dass der Abstand zwischen zwei Absätzen eine (Leer)Zeile beträgt.

p {  
   margin: 1.5em 0;  
}

Für Überschriften sollen folgende Schriftgrößen gelten:

h1 {  
   font-size: 2em;  
}  
h2 {  
   font-size: 1.5em;  
}  
h3 {  
   font-size: 1.17em;  
}  
h4 {  
   font-size: 1em;  
}  
h5 {  
   font-size: 0.83em;  
}  
h6 {  
   font-size: 0.67em;  
}  

Nun stehen uns die Eigenschaften

- line-height
 - margin (top + bottom)
 - padding (top + bottom)

zur Verfügung, um unseren vertikalen Rhythmus zu etablieren.

Vor jeder Überschrift soll mindestens eine Leerzeile Platz sein (außer es handelt sich um die erste Überschrift eines "Blocks").

Das wird ja i.d.R. schon durch unsere Regel für 'p' sichergestellt, da keine zwei Überschriften, ohne unterbrechenden Text, aufeinanderfolgen (sollten).

Die erste "Schwierigkeit" besteht (für mich) schon darin, dass man AFAIS davon ausgehen muss, dass eine Überschrift prinzipiell nicht umgebrochen wird, oder man muss mit "unbrauchbaren" line-height Werten arbeiten.

Denn "optisch" ist speziell für höherrangige Überschriften eine kleinere line-height als die unsere Basis-Line-Height angebracht. Auch sollte der Abstand vor einer Überschrift größer sein, als der nachfolgende.

Eine weitere "Problematik" besteht auch darin, dass egal welche Basis-/ Ausgangswerte man wählt, man immer auch sehr "krumme" Werte (häufig auch Werte mit Periode) erhält, was zu Abweichungen durch Rundungen führt, die sich speziell auf Seiten mit mehr "Text" dann auch optisch bemerkbar machen.

Bis hierhin mag man das, mit gewissen "Einschränkungen", ja noch einigermaßen hinkriegen ...!
Aber wenn ich jetzt auch noch ein mehrspaltiges Layout (bspw. 3 Spalten - 2 Sidebars und 1 Hauptspalte) habe, und den vertikalen Rhythmus dieser Spalten "harmonisieren" (angleichen) möchte, dann ist "der Ofen völlig aus" ...!

Denn im Normalfall sollen die Sidebars eine kleinere Basis-Schriftgröße haben, und somit auch eine geringere line-height. Dürfen aber auch durchaus Überschriften aller Ränge enthalten etc.

Ich habe bisher leider noch keinen geeigneten Weg gefunden, alle diese "Anforderungen" zufriedenstellend unter einen Hut zu kriegen.

Von daher die Frage, wie macht ihr das?

Auch über Links zu Seiten, wo das dementsprechend "gut" umgesetzt ist, würde ich mich freuen (bitte nicht einfach irgendwelche Seiten aus entsprechenden Google Treffern verlinken - die habe ich mit 99%iger Wahrscheinlichkeit auch schon gesehen).

Mir ist durchaus bewusst, dass das wieder so ein Thema ist, wo es nicht "die eine perfekte Lösung" gibt, und man (vermutlich) im Endeffekt irgendeinen Tod sterben muss ...!

Deshalb erwarte ich auch eher eine Diskussion zum Thema, denn "fertige Lösungen".

In diesem Sinne,
Gruß Gunther