Responsive Schriftgrößen mit CSS calc()
= Dynamische Schriftgröße (Quelle)
Mit Hilfe der CSS-Funktion calc() kann der Text automatisch zwischen einem minimalen und einem maximalen Wert skaliert werden.
Wenn ihr möchtet, dass der Text bei 320 Pixeln Viewport-Breite 10 Pixel groß ist und bei 1920 Pixeln Viewport-Breite 28 Pixel, dann ist folgende Formel notwendig:
body {
font-size: calc(10px + (28 - 10) * ((100vw - 320px) / (1920 - 320)));
}Erklärung der Formel
Die oben gezeigte calc()-Funktion basiert auf folgender Formel:
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}Eine detaillierte Erklärung der Formel findet ihr u.a. beim Smashing Magazine.