kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Stufenlos skalierende Texte und Schriftgrößen mit CSS calc()

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.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

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

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

3 Kommentare

  1. Webdesign Karlsruhe

    Verfasst am 25. Februar 2019 um 22:42 Uhr.

    Man lernt nie aus. Bis heute hätte ich es Stufenweise umgesetzt. Gibt es eine Möglichkeit mittels CSS die Schriftgröße an die Breite des Containers anzupassen?

  2. Grafikdesign Wien

    Verfasst am 5. Oktober 2019 um 11:18 Uhr.

    Hallo

    Könntest du mal ein komplettes Media Queries Anleitung mit diesem Script Beispiel schreiben bzw. hier veröffentlichen ?

    • Jonas Hellwig

      Verfasst am 6. Oktober 2019 um 11:57 Uhr.

      Das Beispiel funktioniert ohne Media Queries und ist komplett abgebildet. Du kannst hier alles in den DevTools nachschlagen.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.