Responsive Typo: Stufenlos skalierende Texte und Schriftgrößen mit CSS

Von: Jonas, Robert

Mit CSS-Techniken wie clamp() und calc() können Texte so gestaltet werden, dass die Schriftgröße zwischen verschiedenen Viewport-Größen stufenlos skaliert.

Aktualisiert von 2016 – 2023 6 Kommentare

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 von CSS lassen sich fließend skalierende Texte bzw. Schriftgrößen im Responsive Design realisieren.

Stufenlose Skalierung mit Hilfe von CSS clamp()

Die CSS-Funktion clamp() ermöglicht es, Texte stufenlos zu skalieren und hierbei einen minimalen und maximalen Wert nicht zu übersteigen. Die Funktion benötigt hierzu drei, durch Komma getrennte, Angaben:

• min – Minimalwert
• val – dynamischen Mittelwert an (%, vw, cqw, …)
• max – Maximalwert

Im folgenden Beispiel ist unsere Schriftgröße 2.8vw und skaliert somit bei Veränderung der Viewport-Breite mit. Durch die Angaben min = 1em (16px) und max = 1.75em (28px) definierten wir die Range, in der unsere Schriftgröße sich verändern darf und wo ihr die Grenzen gesetzt werden.

body {
   font-size: clamp(1em, 2.8vw, 1.75em);
}

Beispiel anschauen

Um die Skalierung von Schriften mit Hilfe der clamp() Funktion noch granularer zu steuern, sind hier auch weitere Verschachtelungen und Berechnungen möglich. Wir nutzen hierfür gerne Tools wie den »Fluid type scale calculator«.

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 wir möchten, dass der Text bei 320 Pixeln Viewport-Breite 16 Pixel groß ist und bei 1600 Pixeln Viewport-Breite 28 Pixel, dann ist folgende Formel notwendig:

body {
 font-size: calc(16px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
}

Beispiel anschauen

Erklärung der calc()-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.

CSS clamp() vs. calc()

Vergleichen wir einmal die beiden Funktionen clamp() und calc() im Kontext der stufenlosen Skalierung von Texten, fällt ein Unterschied am meisten auf:

• Mit clamp() können wir genau steuern, welche Schriftgrößen nicht unter- oder überschritten werden dürfen.
• Mit calc() definieren wir konkrete Schriftgrößen für konkrete Breakpoints, alles was dazwischen liegt, wird stufenlos skaliert, aber auch das was außerhalb liegt. Es gibt also keine minimale und maximale Schriftgröße.

Alternative Lösungen für skalierende Schriftgrößen

Eine Alternative 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 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.

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Robert Menzel

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«