Jump to content

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


Aaron

Empfohlene Beiträge

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

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

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.

Link zu diesem Kommentar

Diskutiere mit …

Du kannst jetzt schreiben und dich später registrieren. Wenn du bereits einen Account hast, melde dich an, um von deinem Account aus zu schreiben.
Hinweis: Dein Beitrag muss von einem Moderator zunächst freigeschaltet werden.

Gast
Auf dieses Thema antworten ...

×   Du hast formatierten Text eingefügt.   Restore formatting

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Neu erstellen...

Hinweis

Wie die meisten Websites, legt auch Typografie.info Cookies im Browser ab, um die Bedienung der Seite zu verbessern. Sie können die Cookie-Einstellungen des Browsers anpassen. Anderenfalls akzeptieren Sie bitte die Speicherung von Cookies. Weitere Details in der Datenschutzerklärung