Der Betrachtungsabstand beim Lesen von Texten ändert sich erheblich, wenn man die Nutzung über Smartphones, Tablets, Notebooks und große Desktop-Monitore vergleicht. Je kleiner das Gerät, desto näher ist üblicherweise auch der Betrachtungsabstand. Die gewählte Schriftgröße muss diesen Betrachtungsabstand ausgleichen, was bedeutet, dass Schrift auf Smartphones kleiner sein sollte als auf großen Bildschirmen. Mit Hilfe der CSS calc()-Funktion lassen sich fließend skalierende Texte bzw. Schriftgrößen im Responsive Design realisieren.
Alternative Lösungen für skalierende Schriftgrößen
Die gängigste Lösung zur Veränderung der Schriftgröße ist der weg über CSS Media Queries. Hierbei ändert sich die Schriftgröße jedoch stufenweise – was suboptimal sein kann.
Eine weitere gängige Methode ist die Verwendung der vw-Einheit zur Gestaltung von Schriftgrößen, die sich jedoch sehr schlecht steuern lässt, wenn der Inhalt nicht einspaltig ist.
Responsive Schriftgrößen mit CSS calc()
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 16 Pixel groß ist und bei 1600 Pixeln Viewport-Breite 28 Pixel, dann ist folgende Formel notwenig:
body {
font-size: calc(16px + (28 - 16) * ((100vw - 320px) / (1600 - 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.