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)));
}

Beispiel anschauen

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.