FontSizes

Frank Neumann

FontSizes

Der folgende Inhalt stammt von Rino de Boer und seiner Homepage.
Er hat diese Empfehlung entwickelt und auf seinem  YouTube channel und seiner Webseite LivingwithPixels veröffentlicht.

Thank you very much for your work Rino.

Wenn Sie nicht wissen, welche Schriftgrößen Sie auf Ihrer Website verwenden sollten, dann kann diese Ressource wertvoll sein. Die Schriftgrößen für die Titel sind von Desktop zu Mobile skalierbar. Das bedeutet, dass Sie keine Größen für den Tablet-Modus einstellen müssen.

Alle Werte sind in REM, weil das besser für die Zugänglichkeit ist. Sie sollten sie in der Sektion Global Fonts in Elementor einrichten. Der Klammertext sollte in die Option für benutzerdefinierte Einheiten innerhalb von Elementor gesetzt werden.

Setzen Sie diese Größen nicht in die H1 – H6 im Abschnitt Typografie in den Website-Einstellungen. Denn das ist nicht gut für die Suchmaschinenoptimierung und begrenzt die Überschriften auf maximal 6.

Passen Sie die Größen mit dem Clemprechner an (Mindestwert: 360px, Höchstwert: 1140px)

Title 1 (64 on desktop to 48 on mobile)

clamp(3rem, 2.5385rem + 2.0513vw, 4rem)

Title 2 (48 to 38,4)

clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem)

Title 3 (40 to 33,6)

clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem)

Title 4 (32 to 28,8)

clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem)

Title 5 (28 to 25,6)

clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem)

Title 6 (24 to 22,4)

clamp(1.4rem, 1.3538rem + 0.2051vw, 1.5rem)

Title 7 (20 to 19.2)

clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem)

Subheading (19,2)

1,2

Body (16)

1

Body bold (16)

1

Body big (18)

1,125

Body small (14)

0,875

 

Weitere Tipps und Resourcen für Webdesign findet Ihr zukünftig auf meine Homepage

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.