Jump to content
Die besten Typografie-Links bequem per E-Mail erhalten.

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

Empfohlene Beiträge

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,
      },

style-typography-styles-scale.thumb.png.9c6ecc67001a484b4d775b493e9eded8.png     

 

Link zu diesem Kommentar
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,
      },



 

Link zu diesem Kommentar
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.

  • Gefällt 1
Link zu diesem Kommentar

Erstelle ein Benutzerkonto oder melde dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Einloggen

Du hast bereits ein Benutzerkonto? Melde dich hier an.

Jetzt anmelden

Unsere Partner

Hier beginnt deine kreative Reise.
FDI Type Foundry besuchen
Mit über 130.000 Fonts der größte Schriften-Shop im Internet.
Entdecke hunderte Font-Sonderangebote.
Zeige deine Liebe zur Typografie mit unseren Merchandise-Produkten.
×
×
  • Neu erstellen...

🍪 Hinweis:

Wir benutzen funktionale Cookies.