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

[Ibu]

Hallo,

ich wende mich mit einem Thema an Euch, welches vielen vermutlich nicht schmecken wird.

Webtypografie. Skalierend.

Ich gebe mich keinen Illusionen hin. Aus der Vergangenheit weiß ich, dass den meisten hier beteiligten Typografen Skalierbarkeit entweder unwichtig ist oder sie diese sogar ablehnen. Das bedauere ich.

Langfristig, davon bin ich überzeugt, wird es auch in der Typografie eine Öffnung für Skalierbarkeit geben.

Eine Grundsatzdebatte zu diesem Thema führt typischerweise nicht weiter.

Selber sehe ich Skalierbarkeit als eines der edelsten Merkmale des Webs an.

Mir gefällt es, Sehschwachen wie Adlern guteTypografie zu präsentieren.

Mir gefällt es, Smartphonisten (400px) und Großgerätegenießern (2560px) gute Typografie zu präsentieren.

Skalierbarkeit betrachte ich als Herausforderung. Als Prozess.

In dem Medium sind bekanntlich drei wichtige typografische Mittel letztlich unbestimmbar:

1 Die Schriftgröße des Fließtextes (hängt ganz von der Sehkraft des

Lesers ab) [Wird häufig geändert]

2 Die schmalste Zeilenbreite (hängt vom verwendeten Display/Fenster des

Lesers ab - die maximale Breite einer Zeile lässt sich problemlos per CSS begrenzen) [Verschiedene Breiten kommen häufig vor]

3 Die Schriftart (hängt von der Konfiguration des Browsers des Lesers ab) [Wird selten aktiv vom Nutzer geändert]

Hier im Thread soll es um vertikalen Rhythmus gehen.

Gegeben sei:

* Ein Text mit 5 Überschriftenebenen

* H1 ist der Site-Titel, H2 der Seiten-Titel

* Die einzige Bezugsgröße für alle anderen Größen ist die Schriftgröße

von Fließtext

* Alle Schriftgrößen sollen in einer relativen Einheit angegeben

werden

* Alle Zeilenhöhen ebenfalls

* Alle vertikalen Abstände ebenfalls

* Es gibt keine Inhalte, die neben dem Text stehen (wie Marginalien

zum Beispiel)

* Registerhaltigkeit muss keine Rolle spielen

* Die Abfolge von Inhalten kann berücksichtigt werden. Also: Folgt einer Überschrift Fließtext oder folgt ihr eine andere Überschrift?

Mein Anliegen:

Ich suche Inspiration zu einem System, das allein die drei

gestalterischen Mittel Schriftgröße, Zeilenhöhe und vertikaler Abstand

für die Komposition variiert.

Über Hinweise auf empfehlenswerte Infos zum Thema freue ich mich.

Auch von Euch als wohlgelungen bewertete Webseiten helfen mir weiter.

Wichtig ist dabei, wie oben erwähnt, dass es 5 Überschriftenebenen gibt.

Vielen Dank.

Edit:

Es gibt Testseiten, die das ganze Anliegen plastisch machen:

http://borumat.de/css/test-ueberschriften-calibri

http://borumat.de/css/test-ueberschriften-verdana

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

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

[Ibu]

Hhmm.

Offenbar ist meine Fragestellung in dieser Form nicht geeignet.

Da mich das Zusammenspiel der Faktoren tatsächlich sehr interessiert, passe ich meine Frage an.

Ich setze die Zeichenzahl pro Zeile, Fließtextgröße und 2 Schriftarten fest.

Dann kann ich mir später selber Gedanken machen, mit welchen Werten man dann ins "unkontrollierbare Web" hineingeht.

Zeichenzahl pro Zeile: 60

Fließtextgröße: 14px

Zeilenhöhe Fließtext: 1.45

Vertikaler Abstand hinter Fließtext: 0.6em

Schriftfamilie: Sans-Serif

Gewicht aller Überschriften: fett

Schriftart 1: eine sehr breit laufende

Schriftart 2: eine sehr schmal laufende

Wie würdet ihr für die zwei Schriftarten den Satz an Regeln für H1, H2, H3, H4, H5 zusammenstellen?

Schriftgröße, Zeilenhöhe, vertikaler Abstand

Wenn meine Frage nach wie vor keinerlei Interesse weckt, würde ich mich freuen, wenn mir jemand einen Hinweis gibt, warum dies so ist.

Wenn man eine klassische Reihe von Schriftgrößen aus dem Druck "12, 14, 16, 18, 21, 24 " zum Beispiel transformiert in eine Reihe aus relativen Größen, ergibt sich:

p { font-size: 1.00em; } /* 12 */

h5 { font-size: 1.17em; } /* 14/12 */

h4 { font-size: 1.33em; } /* 16/12 */

h3 { font-size: 1.50em; } /* 18/12 */

h2 { font-size: 1.75em; } /* 21/12 */

h1 { font-size: 2.00em; } /* 24/12 */

Hier empfinde ich den Sprung von H4 auf H3 als zu gering, damit er klar genug wahrnehmbar ist.

Experimentiert habe ich mit dieser Reihe:

h5 { font-size: 0.94em; } /* d=0.18em */

h4 { font-size: 1.12em; }

h3 { font-size: 1.30em; }

h2 { font-size: 1.48em; }

h1 { font-size: 1.66em; }

h5 habe ich bewußt unter 1em gesetzt, weil das fette Gewicht den Grauwert stark erhöht und somit hervorhebend wirkt.

Für die Zeilenhöhe habe ich eine (arithmetische) Reihe gebildet aus dem Maximum bei Fließtext bis hin zu einem Minimum von 1.1 bei der hochrangigsten Überschrift.

h5 { line-height: 1.38; }

h4 { line-height: 1.31; }

h3 { line-height: 1.24; }

h2 { line-height: 1.17; }

h1 { line-height: 1.10; }

Was denkt ihr zu solchen ersten Experimenten?

[Ralf Herrmann]

Wenn auch jetzt meine Frage keinerlei Interesse weckt, würde ich mich freuen, wenn mir jemand einen Hinweis gibt, warum dies so ist.

Wie du schon sagst: es ist eben zu variabel und unser Job als Designer ist es, das projektbezogen richtig zu machen.

Du kannst gerne einen Screenshot oder Link reinstellen und wir können über Schriften, Abstände, Größen etc. diskutieren. Aber ein allgemeines System wird sich da schwerlich finden lassen.

[Ibu]

Hallo Ralf,

Danke für den Rat.

Ich werde hier eine Beispielseite bereitstellen.

Wie geht ihr als projektbezogene Designer denn damit um, dass ihr keinerlei echte Kontrolle über die Schriftart, die Fließtextschriftgröße und die Viewportbreite des Lesers habt?

Ihr versteht mich völlig miss, wenn ihr glaubt ich sei überzeugt, es gäbe ein perfektes allgemeines System, welches unabhängig von Schriftart, Fließtextgröße und Zeichenzahl pro Zeile sei.

Das gibt es natürlich nicht.

Aber im Web muss man als Designer, durch Tun oder Unterlassen, einen Regelsatz vorschlagen.

Und sich dann der Tatsache stellen, wie sich dieser Regelsatz unter den verschiedenen Situationen beim Empfänger auswirkt.

[Ralf Herrmann]

Wie geht ihr als projektbezogene Designer denn damit um, dass ihr keinerlei echte Kontrolle über die Schriftart, die Fließtextschriftgröße und die Viewportbreite des Lesers habt?

Ist ja nicht so. Es ist zwar variabler als bei Drucksachen, aber den groben Rahmen kennt man ja schon. Die meisten Seiten haben eine feste Breite – wie z.B. hier Typografie.info.

Somit weiß ich, dass die Spaltenbreite nicht 1600 Pixel werden kann. Die Schriftgröße gebe ich in Pixeln an – somit weiß ich auch in etwa was passiert. Der Anwender kann da natürlich manuell eingreifen. Aber dann muss er auch mit den Konsequenzen leben.

Die Schriftarten kommen aus einem Pool von Vorschlägen: font-family: MeinWebfont, Arial, Helvetica, sans-serif;

Ich weiß zwar nicht hundertprozentig, welche dieser Schriften benutzt, aber Überraschungen gibt es da auch nicht.

[Minimalist]

Ich hab vor geraumer Zeit angefangen mich mal ganz langsam in diese Webgeschichten reinzuarbeiten ... Ich muss sagen, dass meine Erwartungen bezüglich unkontrollierbarer Layouts zum Teil widerlegt – oder zumindest stark relativiert – wurden, dass dafür aber auch andere Schwierigkeiten offenbar wurden 8)

Beispiel: Ich kann im Prinzip an so einem Weblayout fast alles festschreiben: Breiten, Höhen, Fonts und Fontgrößen ... Aber das ist genau das, was man, wie ich zumindest verstanden habe, nicht tun soll, da man sich so Wege verbaut, dem Betrachter das Layout angenehmer zu machen. Ideal ist es wohl, das Layout so flexibel wie möglich zu machen, indem man Werte in Prozenten und Em angibt, möglichst keine Grafiken zu verwenden außer für tatsächliche Bilder, um Ladezeiten gering zu halten und Pixeltreppen beim Zoomen zu vermeiden ... Ich war ziemlich entsetzt; nachdem ich festgestellt hatte, dass ich doch nicht die Kontrolle über mein Layout aufgeben muss, dann doch sehr stark vermittelt zu bekommen, dass ich das zugunsten der Flexibilität des Betrachters aufgeben sollte ... :o

Beim Rumprobieren habe ich dann festgestellt, dass ich mit einem flexiblen Layout doch gar nicht so viel Kontrolle aufgebe ... Je nachdem, wie man diese flexiblen Werte verwendet, kann man Flexibilität und Layouttreue doch ganz gut miteinander vereinbaren Und mittlerweile bin ich auf der Lernkurve an dem Punkt angelangt, an dem ich feststelle dass die diversen Browserhersteller einem da doch eine Vielzahl an Knüppeln vor die Beine werfen, insbesondere wenn man ältere Versionen des Internet Explorer unterstützen möchte, die ja in unheimlich vielen Unternehmen aus verschiedensten Gründen doch noch verwendet werden ...

Es ist wirklich unendlich frustrierend, ich habe hier schon mehrere Tischplatten durchgebissen ... Hut ab vor den drei oder vier zumindest der Wahrscheinlichkeit nach auf der Welt existierenden Menschen, die es schaffen, vernünftige und funktionierende Websites zusammenzubasteln ...! Semi-Offtopic Ende, thank you for listening ;)

[Joshua K.]

Dieser Aufsatz kann Deine Fragen nicht beantworten, stellt aber schonmal eine gewisse Herangehensweise dar; vielleicht hilft Dir das:

http://24ways.org/2006/compose-to-a-vertical-rhythm

[Ibu]

Wie geht ihr als projektbezogene Designer denn damit um, dass ihr keinerlei echte Kontrolle über die Schriftart, die Fließtextschriftgröße und die Viewportbreite des Lesers habt?

Ist ja nicht so. Es ist zwar variabler als bei Drucksachen, aber den groben Rahmen kennt man ja schon. Die meisten Seiten haben eine feste Breite – wie z.B. hier Typografie.info.

Ich muss Dir widersprechen.

Welche Bedeutung hat aus Deiner Sicht die Nutzergruppe mit schmalen Displays wie Smartphones und Netbooks (deren Anzahl stetig zunimmt)?

Welche Bedeutung hat die Nutzergruppe mit Sehschwachen?

Es geht ja nicht um Nutzer, die um des Spielens willen versuchen ein Layout kaputt zu skalieren.

Es geht um IMHO legitime Bedürfnisse.

Ich kann jedem Websitebetreiber nur raten, sich seine Site wenigstens einmal auf einem Smartphone/ Netbook anzusehen und zu benutzen, und sich einmal daneben zu setzen, wenn ein Mensch mit einer Sehschwäche (zwei bis drei Stufen im Browser hochgezoomt) die Site benutzt.

[Ibu]

Dieser Aufsatz kann Deine Fragen nicht beantworten, stellt aber schonmal eine gewisse Herangehensweise dar; vielleicht hilft Dir das:

http://24ways.org/2006/compose-to-a-vertical-rhythm

Danke.

Rutters Text kannte ich.

Er hält an Registerhaltigkeit fest.

Zudem betrachtet er nur 2 Überschriftenebenen und geht nicht auf den Fall des direkten Aufeinanderfolgens von zwei Überschriften ein.

Ich benötige Beispiele, die dichter dran sind an meinem Szenario.

[Minimalist]

Als amtierender Minimalist sag ich das ja nur ungern, aber bei der Anzahl an Ebenen wirst Du nicht drum rum kommen, außer der Schriftgröße noch eine weitere Auszeichnung zu verwenden ... Zumindest für mein Empfinden ist ein halbwegs moderater Schriftgrößenunterschied auf irgendeinem Display viel weniger deutlich, als wenn man eine Schrift gestochen scharf und auf Papier vor sich hat. Will heißen: 10, 12, 16pt sind bei einer Website nicht wirklich Größenunterschiede die ins Gewicht fallen und sich in einem längeren Text auf Anhieb auseinanderhalten lassen ... eher schon 10, 16, 28pt oder sowas ... Da bekommt man dann aber, gerade auf einem kleinen Display, oder wenn man als Maulwurf da etwas reinzoomt, schnell Probleme mit Überschriften die vielleicht sogar mehrmals umbrechen und im schlimmsten Fall dabei noch das Layout zerstören. Bei so vielen Ebenen solltest Du also verstärkt mit kursiv, fett und/oder Farbe arbeiten, um deutliche Unterschiede herauszuarbeiten, würde ich sagen. War das jetzt so eine Antwort wie Du sie Dir erhofft hattest ...? ;)

[Ralf Herrmann]

Ich muss Dir widersprechen.

In Bezug worauf?

Welche Bedeutung hat aus Deiner Sicht die Nutzergruppe mit schmalen Displays wie Smartphones und Netbooks (deren Anzahl stetig zunimmt)?

Darauf kann man ja gezielt eingehen. Entweder mit komlett getrennten Seiten, oder eben mit sowas hier: http://praegnanz.de/weblog/neue-referen ... icksdesign

Aber in deinem Ursprungsbeitrag klingt es ja so, als ob man überhaupt nicht wüsste, was beim Betrachter tatsächlich ankommt.

Welche Bedeutung hat die Nutzergruppe mit Sehschwachen?

Auch das kann man (bis zu einem gewissen Grad) einplanen, indem sich der Textfluss innerhalb bestimmter Grenzen bewegen kann, bevor das Layout zusammenbricht. Das andere Extrem, das Minimalist schon anspricht, also alles komplett prozentual zu machen, halte ich für einen Mythos. Das klingt nur in der Theorie überzeugend. Klar könnte man hier das Forum z.B. auf 95% Breite setzen, damit es ein iPad und einem Standardmonitor gleichermaßen füllt. Aber laut Besucherzählen haben 10% der Leute hier auch eine Auflösung von 1920 in der Breite. Was sollen da für Zeilenlängen herauskommen?

Man muss also natürlich einen gesunden Mittelweg zwischen Flexibilität und Standardwerten finden. Aber wie gesagt: Das ergibt sich konkret, wenn man das Layout entwirft. Schon je nachdem, wie breit die Schrift läuft oder welche x-Höhe sie hat, würde ich schon wieder andere Werte für Größe und Zeilenabstand wählen. Und natürlich kommt es auch auf die Textmengen selber an. Einen werblichen Teaser-Text setze ich mit ganz anderen Abständen als die Datenschutzerklärung etc.

Mit deinen theoretischen Überlegungen zu den Schriftgrößenverhältnissen kann ich also ohne konkretes Anwendungsbeispiel nicht viel anfangen. :?

[Minimalist]

Das andere Extrem, das Minimalist schon anspricht, also alles komplett prozentual zu machen, halte ich für einen Mythos. Das klingt nur in der Theorie überzeugend.

Soweit ich es verstanden habe, bietet es sich an, für bestimmte Sachen Prozentwerte und für andere Em zu nehmen, ich glaube es ging um x- und y-Werte ... Wenn es Dich interessiert schaue ich später oder morgen mal durch meine Bookmarks, ob ich den Artikel finde, der das so einleuchtend beschrieben hat ... :?

[Ibu]

Ich muss Dir widersprechen.

In Bezug worauf?

In Bezug auf "Den groben Rahmen kennt man ja schon."

Welche Bedeutung hat aus Deiner Sicht die Nutzergruppe mit schmalen Displays wie Smartphones und Netbooks (deren Anzahl stetig zunimmt)?

Darauf kann man ja gezielt eingehen. Entweder mit komlett getrennten Seiten, oder eben mit sowas hier: http://praegnanz.de/weblog/neue-referen ... icksdesign

Die dort angesprochenen Beispiele von Media Queries, also Regeln, die abhängig von der Viewportbreite angewendet werden, sind eine sehr feine Sache.

Ab einer gewissen Schmalheit wird eine sonst neben dem Hauptinhalt dargestellter Inhalt unter diesem dargestellt.

Schick.

Ich wollte auf solche komplexen Layouts in meinem schlichten Posting noch gar nicht hinaus.

Mir ging es um Ein-Spalten-Layouts.

Ich weise ja auch extra darauf hin, dass es z.B. keine Marginalien etc. gibt.

Ich möchte mich vom einfachen Fall her nähern.

Getrennte Seiten halte ich für keine sinnvolle Option.

Das senkt die Zugänglichkeit.

Mir sind auch keine Persönlichkeiten aus dem Kreis der Aktivisten für ein zugängliches Web bekannt, die so etwas propagieren.

Aber in deinem Ursprungsbeitrag klingt es ja so, als ob man überhaupt nicht wüsste, was beim Betrachter tatsächlich ankommt.

Nein.

Ich spreche von drei Merkmalen.

1 Schriftart. Nicht allzuviele Nutzer ändern diese in den Optionen in ihrem Browser.

2 Fließtextgröße. Viele Nutzer passen die Größe ihren Sehbedürfnissen an. Die Funktion Zoomen ist sehr leicht zugänglich.

3 Viewportbreite.

Alle anderen Gestaltungsmerkmale werden kaum je von Nutzern verändert. Die kleine Gruppe, die sich Userstylesheets verfasst, kann man vernachlässigen. Vor allem braucht ein Webautor, wie Du zu Recht anmerkst, auf Nutzer, die aufgrund ästhetischer Vorlieben die Site anpassen, keine Rücksicht zu nehmen.

Die sind in der Tat selbst verantwortlich.

Welche Bedeutung hat die Nutzergruppe mit Sehschwachen?

Auch das kann man (bis zu einem gewissen Grad) einplanen, indem sich der Textfluss innerhalb bestimmter Grenzen bewegen kann, bevor das Layout zusammenbricht. Das andere Extrem, das Minimalist schon anspricht, also alles komplett prozentual zu machen, halte ich für einen Mythos.

Lassen wir das ohne Wertung stehen.

Mich reizt genau diese Herausforderung.

Gute Webtypografie bei vollständiger Skalierung.

Nur zur Klarstellung: eine Begrenzung der Zeichenzahl auf ein Maximum pro Zeile ist selbstverständlich bei Fließtext. Darüber müssen wir nicht diskutieren.

Es geht also nicht um die Riesendisplays (nochmal zur Erinnerung, wir sind bei Ein-Spalten-Layouts), sondern um schmale Displays.

Mit deinen theoretischen Überlegungen zu den Schriftgrößenverhältnissen kann ich also ohne konkretes Anwendungsbeispiel nicht viel anfangen. :?

Ich werde wie versprochen hier sehr bald ein Testcase einstellen.

Fiktiver Inhalt wird ein wissenschaftlicher Text sein.

Dann können wir die Grundsatzdiskussionen zur Seite packen und über ein ganz konkretes skalierendes Layout diskutieren.

[Ibu]

Soweit ich es verstanden habe, bietet es sich an, für bestimmte Sachen Prozentwerte und für andere Em zu nehmen

Exakt.

Es geht um relative Werte für

1 Schriftgrößen

2 Zeilenhöhen

3 vertikale Abstände

Genau das interessiert mich.

Bei 5 Überschriften-Ebenen.

Wobei H1 der Site-Titel ist. Und H2 der Page-Titel.

Also bleiben drei Überschriften zur Gliederung des Inhaltes.

Zu Deinem anderen Post:

Volle Zustimmung, dass zur eindeutigen Unterscheidung von Ebenen auf dem Display größere Schriftgrößen-Unterschiede notwendig sind als auf Papier.

Siehe mein eigenes Posting weiter oben dazu.

Ich stimme Dir auch zu, dass es eventuell besser geeignete Gestaltungsmittel als allein die Größe gibt um Ebenen unterscheidbar zu machen.

Keine Frage, die gibt es.

Dennoch geht es mir zunächst um den einfachen Fall, wo man den Höhenverbrauch von großen Schriften hinnimmt und für diesen Gestaltungsfall ein wohlausgewogene Proportion sucht.

Für die erwähnten drei Variablen Schriftgröße, Zeilenhöhe, vertikaler Abstand.

[...] Wenn es Dich interessiert schaue ich später oder morgen mal durch meine Bookmarks, ob ich den Artikel finde, der das so einleuchtend beschrieben hat ... :?

Gerne.

[Ralf Herrmann]

Getrennte Seiten halte ich für keine sinnvolle Option.

Das senkt die Zugänglichkeit.

Mir sind auch keine Persönlichkeiten aus dem Kreis der Aktivisten für ein zugängliches Web bekannt, die so etwas propagieren.

Schon mal was von Smartphone-Webseiten gehört, z.B. Facebook für’s iPhone etc.? :wink:

Dennoch geht es mir zunächst um den einfachen Fall … Für die erwähnten drei Variablen Schriftgröße, Zeilenhöhe, vertikaler Abstand.

Und da kann ich nur wiederholen, dass das von Schrift zu Schrift und Anwendung zu Anwendung unterschiedlich ausfallem MUSS. Das wird dir jeder Grafikdesigner bestätigen.

[Ibu]

Getrennte Seiten halte ich für keine sinnvolle Option.

Das senkt die Zugänglichkeit.

Mir sind auch keine Persönlichkeiten aus dem Kreis der Aktivisten für ein zugängliches Web bekannt, die so etwas propagieren.

Schon mal was von Smartphone-Webseiten gehört, z.B. Facebook für’s iPhone etc.? :wink:

Klar hab' ich von sowas gehört.

Bei Facebook handelt es sich um hochgradig interaktive Seiten.

Ich möchte hier selbstverständlich nicht sämtliche Arten von Webauftritten betrachten.

Hier soll ein einfacher Fall im Fokus stehen.

Ein umfangreicher Text. Einspaltig. Ein Text für Leser.

Dennoch geht es mir zunächst um den einfachen Fall … Für die erwähnten drei Variablen Schriftgröße, Zeilenhöhe, vertikaler Abstand.

Und da kann ich nur wiederholen, dass das von Schrift zu Schrift und Anwendung zu Anwendung unterschiedlich ausfallem MUSS. Das wird dir jeder Grafikdesigner bestätigen.

Ich widerspreche doch gar nicht.

Leider kommt meine Botschaft nicht durch.

Es geht um einen Entwurf, der nicht kaputt geht, wenn der Nutzer in seinem Browser eine andere Schrift wählt.

Optimal den Wünschen des Grafikers entspricht das Layout selbstverständlich bei der von ihm vorgeschlagenen Schriftart.

Was anderes, weil ich gerade das Testcase baue:

Welche zwei serifenlosen Schriften wünscht ihr Euch?

Es soll eine schmal und eine breit laufende sein.

Sonst beziehe ich schon gleich zu Anfang "Prügel", wenn ich sie auswähle ;)

Also: Wunschkonzert!

[Ralf Herrmann]

Verdana läuft sehr breit.

Die CleartType-Fonts (z.B. Calibri) sind ein interessanter Vergleich, da sie deutlich kleiner auf dem Kegel sitzen.

[Sebastian Nagel]

Ist diese Diskussion nicht etwas abstrakt?

Je nach Inhalt ist doch diese oder jene Lösung sinnvoll – vom flexiblen layout über halbflexibles layout (maxwidth, ...) bis hin zu medienspezifischen stylesheets oder ganzen webseiten ... je nachdem wen man wie mit was bedienen will.

[Ibu]

Verdana läuft sehr breit.

Die CleartType-Fonts (z.B. Calibri) sind ein interessanter Vergleich, da sie deutlich kleiner auf dem Kegel sitzen.

Voilá:

http://borumat.de/css/test-ueberschriften-calibri

http://borumat.de/css/test-ueberschriften-verdana

Einige der zu treffenden Entscheidungen beim "System der Faktoren Schriftgröße, Zeilenhöhe und vertikaler Abstand":

* Soll der obere und untere vertikale Abstand einer Überschrift abhängig von ihrer Schriftgröße abhängen?

* Sollen alle Überschriften die gleiche relative Zeilenhöhe erhalten?

* Soll der obere und untere vertikale Abstand einer Überschrift gleich oder verschieden sein?

* Sollen es sich bei den Reihen um arithmetische Reihen handeln?

* ...

Ihr kennt sicher weitere und (wichtigere) Entscheidungen zu den drei oben genannten Faktoren.

Anmerkung:

Es soll hier um den vertikalen Rhythmus gehen. Ich bitte Euch daher, Euch gegebenenfalls andere seitliche Ränder vorzustellen.

Hier nochmal die Reihen:

/* 
Merkmale, die im Experiment nicht betrachtet werden
    * Farbe der Überschriften.
    * Seitliche Abstände. 
Gesetzte Merkmala für das Experiment
    * Maximale Zeichenzahl pro Zeile. Bezugsgröße: die Schriftgröße von body  
    * Gleiches Gewicht für alle Überschriften: fett
    * Gleiche Farbe für alle Überschriften. 
    * Schriftgröße als einziges Unterscheidungsmerkmal zwischen verschiedenen Überschriften.
    * h1 ist der Site-Titel. h2 ist der Seiten-Titel. 
      Daher liegt der Fokus des Experimentes auf den Überschriften h5, h4, h3. 
    * Keine Zentrierung der Überschriften.
    * Keine Kennzeichnung der Überschriften durch Nummerierungen.
Offene Punkte
    * Gleicher Betrag der relativen Zeilenhöhe für alle Überschriften?
    * Oberer vertikaler Abstand größer als unterer?
    * Abstände der Größen wie in einer arithmetischen Reihe?
    * Vertikale Abstände einer Überschrift abhängig von der Schriftgröße der Überschrift oder
      von der Schriftgröße des Fließtextes?
    * Wie groß muss der Schriftgrößenunterschied zwischen zwei Überschriften mindestens sein, 
      damit er gut erkennbar ist?
    * Falls der obere vertikale Abstand größer ist als der untere: soll der obere Abstand reduziert
      werden, wenn eine Überschrift einer anderen direkt folgt?
*/
/* Schriftgrößen */
    /* Bezugsgröße für alle Schriftgrößen: body */
     p { font-size: 1.00em; } 
    h5 { font-size: 0.94em; } /* d=0.22em */
    h4 { font-size: 1.16em; }
    h3 { font-size: 1.38em; }
    h2 { font-size: 1.60em; }
    h1 { font-size: 1.82em; }
/* Zeilenhöhen */    
    /* Bezugsgröße für alle Zeilenhöhen: die Schriftgröße des Elementes */
     p { line-height: 1.45; } /* d=0.07 */
    h5 { line-height: 1.38; }
    h4 { line-height: 1.31; }
    h3 { line-height: 1.24; }
    h2 { line-height: 1.17; }
    h1 { line-height: 1.10; }
/* Vertikale Abstände */ 
    /* Bezugsgröße für alle Abstände: die Schriftgröße des Elementes */
    h1 { margin-top: 0; } /* Site-Titel */
    h2 { margin-top: 3em; } /* Seiten-Titel */
    p, h3, h4 { margin-top: 0.5em; } 
    p, h1, h2, h3, h4 { margin-bottom: 0.5em; }
    h5 { margin-top: 0.53em; } /* Abstand wie bei p: 0.53=0.50/0.94 */
    h5 { margin-bottom: 0.53em; }

Danke für Eure Geduld.

[Ibu]

Ist diese Diskussion nicht etwas abstrakt?

Je nach Inhalt ist doch diese oder jene Lösung sinnvoll – vom flexiblen layout über halbflexibles layout (maxwidth, ...) bis hin zu medienspezifischen stylesheets oder ganzen webseiten ... je nachdem wen man wie mit was bedienen will.

Ich möchte zwar in der Tat vom engen Einzelfall abstrahieren, aber allein schon durch einige Randbedingungen (5 Überschriften) habe ich ja auf eine Gruppe von Inhalten konkretisiert.

Umfangreiche Texte, die von reichhaltiger Gliederung profitieren.

Kein Brimborium.

Keine Neugigkeitenspalte.

Eine Spalte.

Geschmack: Minimal.

Am Rande: Echter Spaltensatz ist ja - leider - noch Utopie im Web - wir hatten gerade eine längere Debatte dazu im Usenet in dciwam.

Als Medium soll hier allein "Screen" im Mittelpunkt stehen.

Ja: hochflexibel. Geschmeidig transformierend.

Ich liebe diese Eigenschaft. Sie fasziniert mich. Sie ist, IMHO, eine der wertvollsten Merkmale des Mediums.

[Ralf Herrmann]

Voilá:

http://borumat.de/css/test-ueberschriften-calibri

http://borumat.de/css/test-ueberschriften-verdana

Würde es mir ja anschauen, aber dein CSS lässt meinen Safari beim Betreten der Seiten sofort abstürzen!

[Gast Schnitzel]

Bei mir geht‘s in Safari, aber die Calibri wird natürlich nicht angezeigt :(

In der Verdana-Version sind die Headline-Unterscheidungen teilweise zu gering. Die müssen ja nicht alle farbig und fett sein, damit kann man auf jeden Fall auch noch etwas variieren.

[Ibu]

Voilá:

http://borumat.de/css/test-ueberschriften-calibri

http://borumat.de/css/test-ueberschriften-verdana

Würde es mir ja anschauen, aber dein CSS lässt meinen Safari beim Betreten der Seiten sofort abstürzen!

Verzeihung bitte.

Ich hatte hier auf Windows 7 sogar kurz in Safari getestet, da gab es kein Problem.

Ich habe jetzt den Block

@media screen and (max-width: 69ex) { body { margin: 5px; line-height: 1.3; } }

auskommentiert. Er ist für den vertikalen Rhythmus nicht von Bedeutung.

Das CSS war und ist valide.

Selbstverständlich sind keinerlei Skripte im Testdokument enthalten.

Bitte lasse es mich wissen, falls das Absturzproblem weiterhin existiert.

[Ibu]

Bei mir geht‘s in Safari, aber die Calibri wird natürlich nicht angezeigt :(

Ich ändere das gerne ab, so dass eine andere sich stark von der Verdana unterscheidende Schrift erscheint, die auf mehr Systemen verfügbar ist.

In der Verdana-Version sind die Headline-Unterscheidungen teilweise zu gering. Die müssen ja nicht alle farbig und fett sein, damit kann man auf jeden Fall auch noch etwas variieren.

Danke für die Bewertung.

Ich möchte zur Zeit den engen Fall betrachten, wo kein Mittel außer Schriftgröße zur Unterscheidung der Überschriften eingesetzt wird.

Natürlich nicht, weil ich glaube, dass das das Nonplusultra ist.

Ich möchte bei dem Thema mit wenigen Faktoren anfangen.

Erweitern kann man immer noch.

Den Schriftgrößenunterschied habe ich jetzt von 0.20em auf 0.22em erhöht.

[Joshua K.]

Ich antworte fürs Erste mal auf die oben gestellten Fragen (alle Antworte sind Meine Meinung™):

? Soll der obere und untere vertikale Abstand einer Überschrift von ihrer Schriftgröße abhängen?

Ja.

? Soll der obere und untere vertikale Abstand einer Überschrift gleich oder verschieden sein?

Der obere soll größer sein.

? Sollen alle Überschriften die gleiche relative Zeilenhöhe erhalten?

Je größer die Überschrift, desto kleiner die relative Zeilenhöhe. Muß aber nicht sein, man kann auch für alle Überschriften die gleiche (kleine) Zeilenhöhe verwenden.

? Sollen es sich bei den Reihen um arithmetische Reihen handeln?

Nö. Kann man machen, muß man aber nicht.

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.

Ich habe mir übrigens mal ähnliche Gedanken gemacht. Das Ergebnis kannst Du Dir hier anschauen:

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