Zuviel Abstand ist manchmal unschön
Viele Webdesigner beachten inzwischen den immer noch zutreffenden Ratschlag »Mehr Weißraum! Mehr Zeilenabstand!«
Das ist eine gute Sache und dient der ästhetischen Qualität im Netz.
Manchmal jedoch wird des Guten zuviel getan, und ganz besonders gerne sieht man das bei Headlines ab etwa 24 Pixel Schriftgrad. Zum Beispiel hier beim Webwork-Magazin:
Das Problem hierbei ist nicht unbedingt nur der große Zeilenabstand in der Headline, sondern vor allem, dass unterhalb einer mehrzeiligen Headline eine Zeile mit Meta-Informationen platziert wird. Der Abstand von Headline zur »Metazeile« ist jedoch geringer(!) als der Abstand zwischen den einzelnen Headline-Zeilen. Und das wirkt visuell sehr seltsam: Durch das Gesetz der Nähe begreift man die letzte Zeile der Headline und die Metazeile als eine Einheit. Durch das Gesetz der Ähnlichkeit hingegen sieht man die gesamte Headline als eine Einheit. Und je nach persönlicher Ausprägung wechseln diese Wahrnehmungen ständig hin und her.
Deshalb: Klare Verhältnisse! Dinge, die zusammen gehören, kompakt zusammenfassen und andere Informationsebenen klar genug abtrennen. Ein Zeilenabstand von 1.5em ist zwar für den Fließtext eine gute Wahl, aber bei großen Headlines tun es oft sogar nur 1em oder 1.2em.
hans am 11. Januar 2010 #
ich finde in dem beispiel den zeilenabstand der überschrift wesentlich schlimmer als den vermeintlichen verstoß gegen das fummelgesetz.
Eric Eggert am 11. Januar 2010 #
Line-height benutze ich übrigens immer ohne Einheit, also @line-height:1.5;@ o.ä., das bringt meist konsistentere Ergebnisse bei Verschachtelungen. (Und hat nichts mit dem Thema des Blogbeitrags zu tun.)
Max am 11. Januar 2010 #
Ich hätte die Zeile so gar nicht wahrgenommen einfach weil sie so hell ist, dass mein günstiges LCD kaum einen Kontrast zum Hintergrund hinbekommt….
Don am 12. Januar 2010 #
jep, ich geh da grob nach der Formel: Basis-lineheight/Schriftgrösse(h1,h2 ect) = neues LineHeight!
Also zB: Wenn dein Standart line-height 1.5 ist, ist das Line heigh deiner H1 bei 1.8em:
1.5/1.8 = 0.8333em
den gleichen Wert auch fürs Margin nehmen!
Also insgesammt (um den verticalen Rythmus zu bewahren) gleiches Verhältnis von line-height/margin und fontsize, alles in ems natürlich :)
Den Stoff hab ich mir da http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.1/ reingezogen, und funktioniert eigentlich, bzw. gut das zu wissen :)
Manne am 12. Januar 2010 #
<klugscheiß>Zuviel Abstand ist immer unschön, das impliziert schon das „zu“.</klugscheiß>
Wishu am 13. Januar 2010 #
Auf meinem Lappi hab ich die Meta-Zeile irgendwie auch nie gesehen. Aber den Blog lese ich nur noch im Feedreader. Die allgemeine Zurichtung gefällt mir irgendwie nicht.