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

Geschrieben

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     

 

Geschrieben

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



 

Geschrieben

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]

Geschrieben

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

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

Unser Typografie-Netzwerk

Die Datenbank der Schriftmuster der Welt.
Typography.guru – der englischsprachige Ableger von Typografie.info.
Die besten Typografie-Neuigkeiten aus aller Welt bequem per E-Mail erhalten.
FDI Type Foundry besuchen
Eine neues Portal, das die Schriftmuster der Welt sammelt und in einer Datenbank verfügbar macht.
×
×
  • Neu erstellen...

🍪 Hinweis:

Wir benutzen funktionale Cookies.