Skalierbare Schriftgrößen mit Clamp + REM

Wenn du nicht weißt, welche Schriftgrößen du auf deiner Website verwenden sollst, kann diese Ressource hilfreich sein. Die Schriftgrößen für die Titel sind von Desktop bis Mobil skalierbar. Das bedeutet, dass du keine Größen im Tablet-Modus festlegen musst.

Alle Werte sind in REM, weil das besser für die Barrierefreiheit ist. Du solltest sie im Bereich „Globale Schriften“ in Elementor einstellen. Der Clamp-Text sollte in die benutzerdefinierte Einheitsoption in Elementor eingefügt werden.

Setze diese Größen nicht in die H1 – H6 im Typografie-Bereich der Website-Einstellungen ein. Das ist schlecht für SEO und begrenzt deine Überschriften auf maximal 6.

Passe die Größen mit dem Clamp-Rechner an (ich habe den Mindestwert: 360px, maximal: 1140px verwendet).

Titel 1 (64 auf Desktop bis 48 auf Mobil)

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

Titel 2 (48 bis 38,4)

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

Titel 3 (40 bis 33,6)

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

Titel 4 (32 bis 28,8)

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

Titel 5 (28 bis 25,6)

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

Titel 6 (24 bis 22,4)

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

Titel 7 (20 bis 19,2)

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

Unterüberschrift (19,2)

1,2rem

Fließtext (16)

1rem

Fließtext fett (16)

1rem

Großer Fließtext (18)

1,125rem

Kleiner Fließtext (14)

0,875rem