Ich empfehle folgenden Ansatz NICHT standardmässig. Nutze am besten einfach 100% als font-size.
Achtung, funktioniert nur wenn du 100% Kontrolle über jede einzelne Komponente deiner Website hast. Sonst musst du ggf. Schriftgrössen genutzter Frameworks/Libraries manuell anpassen, was richtig mühsam ist. Test
// Setze die html font-size auf 62.5%, so dass 1rem 10px entspricht.
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
// Beispiel für ein Website-Container mit einer Breite von 1400px
h1 {
font-size: clamp(2.8rem, 3vw, 4.2rem);
}
// Erklärung
// Die maximale Grösse der h1 beträgt 42px und die minimale Grösse 28px.Die vw bekommst du raus, indem du die maximale Schriftgrösse zusammen mit der Weite deines Website-Containers kalkulieren lässt.
Hier findest du ein praktisches Tool dazu.
Rem Werte bei Standard-Browsereinstellungen
Wenn du nicht 100% Kontrolle über den Code Output hast, dann nutze die gängigsten Standard-Browser-Schriftgrösse-Einstellungen bei font-size: 100% und 1rem = 16px.
Bei WordPress Themes und Plugins die selbst barrierefrei sind oder barrierefreie Blocks/Funktionen anbieten funktioniert der font-size: 62.5% Trick eigentlich nie, weil die sich auf Standard-Browser-Schriftgrösse-Einstellungen beziehen.
Hier findest du einen Rem-PX Umrechner.
| rem | px | clamp vw bei 1440px |
| 0.5rem | 8px | 0.55 |
| 0.625rem | 10px | 0.7 |
| 0.75rem | 12px | 0.85 |
| 1rem | 16px | 1.1 |
| 1.125rem | 18px | 1.25 |
| 1.25rem | 20px | 1.4 |
| 1.375rem | 22px | 1.5 |
| 1.5rem | 24px | 1.66 |
| 1.75rem | 28px | 1.95 |
| 2rem | 32px | 2.2 |
| 2.25rem | 36px | 2.5 |
| 2.5rem | 40px | 2.77 |
| 2.75rem | 44px | 3.05 |
| 3rem | 48px | 3.3 |
| 3.25rem | 52px | 3.6 |
| 3.5rem | 56px | 3.88 |
| 3.75rem | 60px | 4.16 |
| 4rem | 64px | 4.4 |
| 4.25rem | 68px | 4.7 |
| 4.5rem | 72px | 5 |
| 4.75rem | 76px | 5.28 |
| 5rem | 80px | 5.5 |
| 5.25rem | 84px | 5.83 |
| 5.5rem | 88px | 6.1 |
| 5.75rem | 92px | 6.38 |
| 6rem | 96px | 6.66 |
Weitere Infos
Warum nicht px? Pixelwerte kannst du für margins, paddings und vielleicht noch für position: absolute Elemente verwenden. Aber für Schriftgrössen eignen die sich schlichtweg nicht.
Warum nicht? Weil wenn du Pixelwerte angibst, dann gibst du all deinen Usern vor, wie sie deine Website zu sehen haben.
Zoom? Funktioniert nicht wie gewünscht.
Wenn jemand andere Standardschriftgrössen eingestellt hat? Funktioniert auch nicht.
Deshalb rem Werte für Schriftgrössen einsetzen. Die berücksichtigen User Einstellungen wie Schriftgrössen und Zoomlevel.