Welche Einstellungen habe ich für H1 - H6 und p Tags vorzunehmen?

[Aaron]

Ich versuche gerade zu verstehen, welche Einstellungen ich vorzunehemen habe. Ich habe folgendes Bild bei Google gefunden. Habe ich das Schaubild so richtig erkannt? 
 

h1: {
        fontSize: 112sp,
        fontWeight: 200,
      },
h2: {
        fontSize: 56sp,
        fontWeight: 400,
      },
h3: {
        fontSize: 45sp,
        fontWeight: 400,
      },

     

 

[Ralf Herrmann]

Schwer zu sagen ohne den Kontext der Abbildung. 

[Sebastian Nagel]

In welchem Kontext denn?

dp/sp-Einheiten lassen auf Android schließen, aber so ganz ohne Frage ist eine Antwort schwierig.

[Aaron]

Ich bin gerade dabei meine Website neu zu gestalten. Ich bin mir unsicher mit den Größen für H1 bis H6. Aktuell verwende ich folgende Größen:

Welche Größen verwendet Ihr? Ich weiß, dass ist natürlich von vielen Faktoren abhängig.
 

h1: 48;
h2: 40;

h3: {
        fontSize: 32,
        fontWeight: 500,
      },
      h4: {
        fontSize: 19,
        fontWeight: 700,
      },
      h5: {
        fontSize: 16,
      },
      h6: {
        fontSize: 14,
      },

 

[Aaron]

Bitte schaut Euch einmal meinen ersten Entwurf für meinen Styleguide an.
Vielleicht ist es dann einfacher zu verstehen was ih meine.
[Domain auf Wunsch entfernt]

[Sebastian Nagel]

Letztlich hängt das von der gewünschten Funktionalität und Optik ab ...

 

Ein Ansatz wäre die Skalierung über einen bestimmten Faktor von einer Basisgröße weg ... z.B.

p --> 14 pt

h6 --> 14 pt 700  (gleich groß, fett)

h5 --> 17 pt 700  (Faktor *1,2 und dann gerundet auf Halbpunkte)

h4 --> 20.5pt 600  (wieder *1,2 und gerundet auf Halbpunkte)

h3 --> 24.5pt  600  (...)

h2 --> 29.5pt 500 (...)

h1 --> 35.5pt 400  (...)

Das bringt eine sichtbare Progression rein die sich in der Regel besser macht als für jede Stufe nur einen statischen Wert zu addieren. Ob die Werte passen, und welcher Faktor der richtige ist, hängt vom Design ab. Auch, ob das Gewicht überall richtig ist – je größer die Schrift, desto leichter könnte man sie machen, das hängt wieder vom Design ab, von den Anforderungen (braucht man 6 Hierarchien, welche sind effektiv im Einsatz?) und auch von den verfügbaren Schriftgewichten.

 

Über so einen atomaren Styleguide wie gezeigt lässt sich das nicht direkt einschätzen und auch nicht auf diese Art festlegen.

Der gibt ja nicht das Design vor, sondern dokumentiert nur die Parameter innerhalb des Designs. Das Design selbst kann nur an Beispielen ausgearbeitet und dann der Guide davon abgeleitet werden.