Überschriften: Schriftgröße, Zeilenhöhe & vertikale Abstände

[Ibu]

@Joshua K.

Zunächst mal tut es gut zu lesen, dass sich auch jemand anderes bereits Gedanken zu ähnlichen Fragen gemacht hat.

Danke für Deine Kommentare zu den Fragen.

http://www.deutscheschrift.info/formate.css

Hauptunterschied Deines Satzes zu meinem:

h1, h2, h3, h4, h5, h6 {
line-height:1;
margin-bottom:0.5em;
margin-top:1.5em;
}

Also identische relative Zeilenhöhe bei allen Überschriften. Oberer vertikaler Abstand dreimal so groß wie der untere.

Ich habe diese Regeln dem Beispiel hinzugefügt:

http://borumat.de/css/test-ueberschrift ... ana-joshua

Zur Zeilenhöhe:

Längere Überschriften brechen um.

Ich gestehe, dass ich 1em skeptisch gegenüber stehe.

In meinem Beispiel ist eine h5 länger.

Dazu würde ich gerne noch einige Bewertungen hören.

Zum oberen vertikalen Abstand:

Wie siehst Du es, wenn einer Überschrift (auch wenn man dies inhaltlich zu vermeiden sucht) direkt eine andere Überschrift folgt?

Soll der Abstand dann nicht reduziert werden?

Wirkt dann der Abstand zwischen den beiden Überschriften noch passend.

Technisch wäre die Reduktion per CSS über den Nachbarschafts-Selektor kein Problem.

h3 + h4, h4 + h6 { margin-top: 0.5em; }

Ich würde auch mal mit verschiedenen Abständen herumprobieren. In diesem Beispiel (gedruckt) sind die beiden Überschriften Zweiter Teil … und I. Einführung … aus derselben Schrift gesetzt, unterscheiden sich aber klar durch den Abstand.

Hhmm. Mich überzeugt so eine Variante nicht.

Weder die Kennzeichnung der Ebene allein durch Abstand, noch Zentrierung als gestalterisches Mittel bei Überschriften überhaupt.

Dazu kommt, dass in dem Beispiel ein Nummerierungssystem als Kennzeichnung der Ebene hinzukommt.

Davon möchte ich, im Beispiel, unabhängig bleiben.

Trotzdem Danke für die Anregung.

[TobiasMüller]

Hallo,

also ganz grundsätzlich finde ich schon, dass solche abstrakten Überlegungen ihre Berechtigung haben. Natürlich wirkt ein Layout, bloß weil das Gedankengerüst dahinter logisch ist, noch lange nicht harmonisch oder ist schön anzusehen. Dafür hat Typografie viel zu viel mit unterbewusstem, gefühlsmäßigem Wahrnehmen zu tun (jaja, Widerspruch in sich aber Empfinden klang mir zu esotherisch). Aber ich finde in solchen Gedankengerüsten selbst liegt eine gewisse Schönheit. Ja, man muss sie fast immer opfern, wenn es um konkrete Gestaltung geht, aber als Ausgangspunkt eignen sie sich.

soviel dazu ...

Konkreter stört mich an deinem Beispiel zu erst einmal, dass du dem Anspruch nicht gerecht wirst, nur durch Größe und Positionierung der einzelnen Elmente verschiedene Bedeutungsebenen kenntlich zu machen (wenn ich dich richtig verstanden habe, war er das).

Durch die farbige Auszeichnung und den fetten Schriftschnitt bringst du wieder zwei Gestaltungsmittel ins Spiel, die du in einer Konkreten Gestaltung brauchst, die dir aber bei deiner abstrakten Frage nach den "richtigen" Größenverhältnissen eher im Weg stehen, weil sie ablenken. Also alles Schwarz und nichts fett und dann springt dich das bereits genannte Problem der zu geringen Größenunterschiede in deinem Beispiel noch viel deutlicher an.

Warum bist du so zaghaft mit der Differenzierung? Eine Überschrift darf auch richtig knallen! Die darf ruhig um ein vielfaches größer sein als der Grundtext. So geringe Unterschiede bei fünf Hierarchieebenen, da hat nichtmal ein geübter Schriftgucker die Chance, das Prinzip dahinter zu begreifen. Das sollte viel deutlicher sein.

Irgendwie Sowas in der Art könnte ich mir vorstellen als Ausgangspunkt ...

1fache Textgröße (12)

5/4 Textgröße (15)

3/2 Textgröße (18)

2fache Textgröße (24)

3fache Textgröße (36)

...

so, das wars, was mir dazu im Kopf rum ging, keine Ahnung, ob das irgendwie hilfreich ist.

Gruß! Tobi

[Ibu]

Konkreter stört mich an deinem Beispiel zu erst einmal, dass du dem Anspruch nicht gerecht wirst, nur durch Größe und Positionierung der einzelnen Elmente verschiedene Bedeutungsebenen kenntlich zu machen (wenn ich dich richtig verstanden habe, war er das).

Richtig, darum geht es mir.

Bei "Positionierung" ist allein die vertikale gemeint.

Durch die farbige Auszeichnung und den fetten Schriftschnitt bringst du wieder zwei Gestaltungsmittel ins Spiel, die du in einer Konkreten Gestaltung brauchst, die dir aber bei deiner abstrakten Frage nach den "richtigen" Größenverhältnissen eher im Weg stehen, weil sie ablenken.

Im Grunde gebe ich Dich Recht.

Man kann auch diese Mittel für das Beispiel noch weglassen.

Hier kommt Deine Variante:

http://borumat.de/css/test-ueberschrift ... ana-tobias

Letztlich spiegelte Farbe für Überschriften eine starke persönliche Vorliebe von mir wider.

Ich mochte es schon immer.

Normales Gewicht bei Überschriften jedoch verkompliziert die Lage beim Skalieren:

Beim Hochskalieren gelangt man an eine Stelle, wo die Linienstärke der Fließtextschrift von 1px auf 2px springt. Wenn dann die niederrangigste Überschrift ebenso eine Linienstärke von 2px besitzt, sinkt die Unterscheibarkeit der niederrangigsten Überschrift vom Fließtext drastisch.

Ähnlich ist es beim Herunterskalieren. Hier springt die Linienstärke der niederrangigsten Überschriften, von 2px auf 1px.

Wieder sinkt die Unterscheidbarkeit von Fließtext und niederrangigster Überschrift drastisch.

http://borumat.de/+screenshots/hc-2010. ... _12_15.png

http://borumat.de/+screenshots/hc-2010. ... _12_53.png

http://borumat.de/+screenshots/hc-2010. ... _39_57.png

Unter anderem deshalb ziehe ich fettes Gewicht für Überschriften vor.

Wie empfindet Dein Auge das?

Warum bist du so zaghaft mit der Differenzierung? Eine Überschrift darf auch richtig knallen!

Es ist in der Tat mein Ziel, mit so wenig Unterschied wie gerade nötig auszukommen.

Drauflegen kann man immer.

Aber ich höre Deine Kritik.

Du empfindest die aktuellen Unterschiede als zu gering.

Irgendwie Sowas in der Art könnte ich mir vorstellen als Ausgangspunkt ...

1fache Textgröße (12)

5/4 Textgröße (15)

3/2 Textgröße (18)

2fache Textgröße (24)

3fache Textgröße (36)

OK.

Verstehe ich Dich richtig, dass Du diese Reihe auf Schrift in normalem Gewicht beziehst.

Ein Wert fehlt übrigends. Denn wir brauchen ja 5 Größen, die über der Fließtextgröße liegen.

Übersetzt in relative Werte entspräche Deine Reihe:

p: 1.00em

h5: 1.25em

h4: 1.50em

h3: 2.00em

h2: 3.00em

Also keine arithmetische Reihe (nur als nüchterne Feststellung). Die Differenz zweier benachbarter Werte ist nicht mehr konstant.

Hättest Du Lust noch etwas zu den Punkten Zeilenhöhe und Abstand zu sagen?

Und zu "Überschrift folgt einer Überschrift direkt"?

Ich freue mich über Eure weiteren Anmerkungen.

Folgen, welche sich durch eine mathematische Regel (ab)bilden lassen, kommen ja in diversen künstlerischen und handwerklichen Bereichen vor.

Kennt ihr eine Quelle, wo speziell dieses Thema in Bezug auf Typografie beleuchtet wird?