Zu Inhalt springen

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

Hervorgehobene Antworten

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     

 

  • Ersteller

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



 

  • Ersteller

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]

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.

Erstelle ein Konto, um zu kommentieren

Wichtige Informationen

Wir setzen Cookies, um die Benutzung der Seite zu verbessern. Du kannst die zugehörigen Einstellungen jederzeit anpassen. Ansonsten akzeptiere bitte diese Nutzung.

Konto

Navigation

Browser-Push-Nachrichten konfigurieren

Chrome (Android)
  1. Klicke das Schloss-Symbol neben der Adressleiste.
  2. Klicke Berechtigungen → Benachrichtigungen.
  3. Passe die Einstellungen nach deinen Wünschen an.
Chrome (Desktop)
  1. Klicke das Schloss-Symbol in der Adresszeile.
  2. Klicke Seiteneinstellungen.
  3. Finde Benachrichtigungen und passe sie nach deinen Wünschen an.