Flüssige Schriftgrößen und Abstände mit clamp()

Die CSS-Funktion clamp() begrenzt einen gewünschten Wert durch eine untere und eine obere Grenze. Damit können Schriftgrößen oder Abstände innerhalb eines bewusst gewählten Bereichs fließend reagieren. Entscheidend sind drei getrennte Entscheidungen: Was ist mindestens nötig, wie soll sich der Wert dazwischen verändern und ab wann soll er nicht weiter wachsen? Die Funktion ersetzt die Begründung dieser Entscheidungen nicht.

Dieser Beitrag entwickelt eine eigene Beispielüberschrift mit einer nachvollziehbaren Formel. Dazu kommen eine Abstandsvorgabe, echte Browserprüfungen und eine genau benannte Grenze des Nachweises. Alle Maße sind Entwurfswerte für das Lernbeispiel. Eine rechnerisch korrekte Kurve beweist weder angenehme Lesbarkeit noch vollständige Barrierefreiheit. Die tatsächliche Textdarstellung und die Bedienung werden zusätzlich geprüft.

Drei Werte mit unterschiedlichen Aufgaben verstehen

Eine typische Schreibweise lautet clamp(Minimum, Wunschwert, Maximum). Liegt der Wunschwert innerhalb der vorgesehenen Grenzen, wird er verwendet. Liegt er darunter, greift die untere Grenze. Liegt er darüber, die obere. Die mittlere Angabe kann beispielsweise einen Wert mit einem relativen Anteil enthalten. Erst diese Abhängigkeit erzeugt die fließende Änderung. Drei feste gleiche Werte würden dagegen keine dynamische Gestaltung schaffen.

Für eine Überschrift kann die untere Grenze aus einer kleinen Ansicht entstehen, in der das Seitenthema früh lesbar sein soll. Die obere Grenze kann aus einer großen Ansicht folgen, in der ein langer Titel nicht alles andere verdrängen soll. Dazwischen wird ein Übergang entworfen. Diese Überlegung ist konkreter als eine zufällig kopierte Kombination von Zahlen, deren ursprünglicher Zweck im neuen Auftritt unbekannt bleibt.

Unterscheiden Sie die technische Begrenzung von einer gestalterischen Zusage. Eine Schriftgröße kann zuverlässig zwischen 24 und 40 Pixeln liegen und dennoch zu einem bestimmten Text nicht passen. Ein festes Wort mit vielen breiten Zeichen verhält sich anders als ein kurzer Titel. Die richtige Grenze gehört deshalb immer zu Inhalt, Schrift und Einbauort. Sie ist keine allgemeine Eigenschaft guter Webseiten.

Zuerst die Eigenschaft und ihre Bezugsgröße wählen

Bei Schriftgrößen, Innenabständen und Abständen zwischen Abschnitten geht es um unterschiedliche Aufgaben. Ein größerer Titel kann die Orientierung stärken. Ein größerer Karteninnenraum kann die Textfläche gleichzeitig so verkleinern, dass mehr Umbrüche entstehen. Eine gemeinsame fließende Formel für alle Eigenschaften wäre daher eine ungeprüfte Vereinfachung. Beginnen Sie mit einer einzelnen gut abgrenzbaren Rolle und beurteilen Sie deren Wirkung auf den tatsächlich benötigten Inhalt.

Überlegen Sie außerdem, worauf die Veränderung reagieren soll. Eine viewportbezogene Einheit folgt dem sichtbaren CSS-Viewport. Eine containerbezogene Einheit kann dem verfügbaren Platz eines Bausteins folgen. Diese Grundlagen sind nicht automatisch austauschbar. Ein großer Bildschirm kann einen sehr schmalen Kartenbereich enthalten. Eine vom gesamten Fenster abgeleitete Überschrift kann dort unpassend wachsen, obwohl die Formel technisch richtig ausgewertet wird.

Unser Hauptbeispiel verwendet bewusst eine viewportbezogene Überschrift. Der Titel gehört zu einem breiteren Inhaltsbereich und soll zwischen zwei festgelegten Entwurfszuständen wachsen. Die Annahme wird dokumentiert. Für eine kleine wiederverwendbare Empfehlungskarte würde die passende Bezugsgröße gesondert untersucht. Die Funktion clamp() legt diese Entscheidung nicht fest, sondern verarbeitet nur die angegebenen Werte.

Eine vollständige eigene Beispielregel aufbauen

Die folgende Überschrift besitzt einen begrenzten fließenden Wert. Die erste Deklaration stellt einen einfachen Grundwert bereit. Danach folgt die erweiterte Funktion. Wenn die zweite Deklaration bereits syntaktisch nicht unterstützt wird, bleibt die erste verwendbar. Das ist eine begrenzte Aussage über diese Schreibweise. Sie darf nicht auf jeden späteren Fehler mit CSS-Variablen übertragen werden, dessen Ursache erst bei der Berechnung sichtbar wird.

.fluid-title {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, calc(1rem + 2vw), 2.5rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}
.text-area {
  max-width: 66ch;
  padding-inline: 1rem;
}

Die Regel beschränkt den Titel nicht auf eine feste Zeilenzahl. Ein längerer Text darf wachsen und umbrechen. Das verhindert noch nicht jede ungünstige Darstellung, schafft aber eine brauchbare Voraussetzung für die Prüfung wechselnder Inhalte. Ein overflow: hidden als schnelle Reparatur würde möglicherweise gerade die Wörter entfernen, die Besucher zum Verstehen des Angebots brauchen. Solche verlorenen Inhalte dürfen nicht durch eine schöne feste Kartenhöhe verdeckt werden.

Die Klasse beschreibt eine visuelle Rolle. Welche Überschriftenebene im HTML richtig ist, hängt vom Dokument ab. Ein größeres Element wird nicht allein wegen seiner Schriftgröße zur ersten Überschrift. Umgekehrt darf eine fachlich notwendige Untergliederung nicht durch eine passend aussehende Absatzklasse ersetzt werden. Die fließende Größe ergänzt die inhaltliche Struktur und sollte diese bei einer späteren Überarbeitung nicht unbemerkt verändern.

Die konkreten Zahlen des Beispiels nachrechnen

Bei einem Grundschriftwert von 16 Pixeln entsprechen die Grenzen 24 und 40 Pixeln. Der mittlere Ausdruck besteht aus 16 Pixeln plus zwei Prozent der Viewportbreite. Bei 800 Pixeln Breite ergibt das 16 plus 16, also 32 Pixel. Der Wert liegt zwischen beiden Grenzen und wird deshalb verwendet. Diese Rechnung ist überschaubar genug, um sie unabhängig vom sichtbaren Entwurf zu kontrollieren.

Die Werte beschreiben CSS-Pixel innerhalb der angegebenen Prüfumgebung. Sie sind keine Millimeterangaben für ein physisches Telefon und keine Empfehlung für jede Überschrift. Bei anderer Grundschrift ändern sich die rem-Anteile. Auch eine andere Fensterbreite verändert die mittlere Rechnung. Eine korrekt beschriftete Grafik muss diese Voraussetzungen nennen, damit aus einer Momentaufnahme kein unzutreffendes allgemeines Versprechen entsteht.

Prüfen Sie zusätzlich Werte unmittelbar neben den Übergängen. Bei 399 Pixeln bleibt das Ergebnis noch an der unteren Grenze. Bei 401 Pixeln beginnt es im Beispiel darüber zu wachsen. Entsprechend endet die Zunahme bei 1200 Pixeln. Solche Grenzprüfungen zeigen, ob Formel, Erwartung und tatsächliche Browserberechnung zusammenpassen. Ein einziges Bild bei einer mittleren Breite könnte eine falsch gewählte Grenze leicht verbergen.

Eine Formel aus zwei Entwurfszuständen ableiten

Wenn die gewünschte Entwicklung bereits feststeht, lässt sich die mittlere Gerade daraus herleiten. Unser Beispiel möchte bei 400 Pixeln Viewportbreite 24 Pixel Schriftgröße und bei 1200 Pixeln 40 Pixel erreichen. Die Schrift wächst damit um 16 Pixel auf einer Breitenänderung von 800 Pixeln. Das Verhältnis ist 0,02. Als viewportbezogener Anteil entspricht es zwei vw. Der verbleibende konstante Anteil beträgt 16 Pixel.

Mit der gewählten 16-Pixel-Grundschrift lässt sich dieser konstante Anteil als ein rem schreiben. Daraus entsteht der mittlere Ausdruck des Beispiels. Die Begrenzung sorgt anschließend dafür, dass die Gerade außerhalb des gewählten Bereichs nicht unbeschränkt weiterläuft. Die beiden Ausgangszustände bleiben Entwurfsentscheidungen. Die Rechnung erklärt, wie sie verbunden werden. Sie begründet nicht von selbst, weshalb genau diese Schriftgrößen für den Inhalt passend wären.

Dokumentieren Sie bei einer abgeleiteten Formel immer auch die Ausgangsannahmen. Wenn später die Grundschrift oder die gewünschten Endgrößen geändert werden, ist die bisherige Verbindung nicht automatisch noch dieselbe. Eine kurze Notiz mit beiden Entwurfszuständen ist deshalb hilfreicher als eine scheinbar geheimnisvolle Dezimalzahl im Stylesheet. Sie erlaubt eine gezielte Anpassung und verhindert das unkontrollierte Nachregeln einzelner Werte an zufällig ausgewählten Bildschirmbildern.

Den Einfluss der Grundschrift tatsächlich prüfen

Ändert sich der Grundschriftwert auf 20 Pixel, werden die Grenzen im Hauptbeispiel zu 30 und 50 Pixeln. Der mittlere Ausdruck enthält nun 20 Pixel plus zwei vw. Bei 800 Pixeln Viewportbreite ergibt das 36 Pixel. Der fließende Bereich beginnt und endet dadurch an anderen Breiten. Die ursprünglichen Übergänge bei 400 und 1200 Pixeln dürfen nicht als unveränderliche Eigenschaft der Formel beschrieben werden.

Diese Abhängigkeit ist weder automatisch ein Fehler noch automatisch die gewünschte Lösung. Relative Anteile können eine sinnvolle Anpassbarkeit schaffen. Ihre konkrete Wirkung muss jedoch zu den Aufgaben der Seite passen. Verwenden Sie für einen Vergleich dieselben Texte und ändern Sie eine Einstellung nach der anderen. Nur so lässt sich erkennen, ob ein neuer Umbruch aus der Grundschrift, der verfügbaren Breite oder einer anderen Schriftdatei entsteht.

Eine berechnete Schriftgröße sagt außerdem noch nichts über die tatsächlichen Buchstabenmaße einer Schriftfamilie. Zwei Schriften mit demselben CSS-Wert können unterschiedlich breit und unterschiedlich hoch wahrgenommen werden. Prüfen Sie deshalb auch die vorgesehene Ersatzschrift. Ein Ausfall der Webschrift darf weder Inhalte verschwinden lassen noch eine wichtige Aktion unzugänglich machen. Die Größenformel bleibt dabei nur ein Bestandteil des gesamten typografischen Systems.

Vergrößerung gesondert von fließendem Wachstum betrachten

Eine größere Fensterbreite und eine vom Menschen gewünschte Textvergrößerung sind verschiedene Vorgänge. Ein rem-Anteil in der Formel beweist keine bestimmte Vergrößerungswirkung für die gesamte Seite. Im kontrollierten Beispiel bei 800 Pixeln Breite steigt der berechnete Wert von 32 auf 48 Pixel, wenn die Grundschrift von 16 auf 32 Pixel geändert wird. Das entspricht hier dem Faktor 1,5 und nicht automatisch einer Verdoppelung.

Die W3C-Erläuterung zu WCAG 1.4.4 behandelt die Möglichkeit, Text bis auf 200 Prozent zu vergrößern, ohne Inhalt oder Funktion zu verlieren. Die konkrete Prüfung muss einen tatsächlich verfügbaren Vergrößerungsweg und die vollständige Darstellung berücksichtigen. Unsere Berechnung einer geänderten Grundschrift ist dafür ein einzelner kontrollierter Beobachtungsfall. Sie ist kein vollständiger Browserzoomtest und keine abschließende Konformitätsbewertung des späteren Auftritts.

Prüfen Sie bei Vergrößerung vor allem die Folgen: Bleiben Überschrift und Link vollständig sichtbar? Können Felder und Rückmeldungen erreicht werden? Erzeugt ein fester Container unnötige Überlagerungen? Eine erforderliche Anpassung kann die Formel, das Layout oder beides betreffen. Der Zweck der Prüfung ist eine nutzbare Darstellung für die tatsächliche Aufgabe. Ein bestandener Rechenvergleich allein beantwortet diese Frage nicht.

Abstände mit einer eigenen Begründung begrenzen

Für den Abstand zwischen größeren Abschnitten kann eine andere Entwicklung sinnvoll sein als für die Überschrift. Im folgenden Beispiel sind mindestens zwei rem und höchstens fünf rem vorgesehen. Der mittlere Wert folgt vier Prozent der Viewportbreite. Bei 16 Pixeln Grundschrift liegen die Grenzen somit bei 32 und 80 Pixeln. Der Abstand bleibt für den gewählten Versuch kleiner als ein unbegrenzt wachsender Anteil auf sehr großen Ansichten.

.content-section {
  padding-block: 2rem;
  padding-block: clamp(2rem, 4vw, 5rem);
}

Beurteilen Sie die Abstände im Zusammenhang mit angrenzenden Elementen. Eine große Innenfläche und ein zusätzlicher äußerer Abschnittsabstand können zusammen eine unerwartet große Lücke erzeugen. Die einzelne Funktion kann dabei vollkommen korrekt arbeiten. Die Verantwortung für die Trennung zweier Inhaltsgruppen sollte deshalb nachvollziehbar an einer Stelle liegen. Mehrere gleichzeitig fließende Regeln erschweren sonst die Beurteilung, welche tatsächlich den sichtbaren Raum bestimmt.

Auch Innenabstände von Karten brauchen eine eigene Prüfung. Wenn auf schmalen Ansichten viel Fläche für Ränder verwendet wird, bleibt weniger Textbreite übrig. Eine großzügige Obergrenze auf dem großen Bildschirm kann sinnvoll sein, während die Untergrenze für einen kleinen Einbauort zu groß ist. Wählen Sie die Werte anhand der benötigten Inhaltsfläche und nicht ausschließlich anhand einer angenehmen Ansicht im Entwurfsprogramm.

Unpassende Grenzen und falsche Werttypen erkennen

Die Funktion ist nicht als frei sortierbare Liste von drei Werten zu verstehen. Die untere und obere Angabe haben feste Rollen. Werden sie widersprüchlich angeordnet, entsteht nicht automatisch die erwartete kleine Spannweite. Für einen einfachen technischen Lehrfall liefert clamp(30px, 20px, 10px) den Wert 30 Pixel. Ein vermeintliches Maximum von zehn Pixeln ist also kein Schutz gegen eine irrtümlich höher festgelegte Untergrenze.

Für ein Gestaltungssystem sollte eine solche Konstellation als fehlerhafte Vorgabe erkannt und korrigiert werden. Schreiben Sie die beabsichtigte Reihenfolge ausdrücklich auf und prüfen Sie deren Einhaltung bei Änderungen. Das ist besonders wichtig, wenn mehrere Personen Größenrollen pflegen. Ein visuell zufällig passendes Ergebnis kann eine widersprüchliche Ausgangskonfiguration verdecken und später an einer anderen Stelle unerwartet wirksam werden.

Die Werte müssen außerdem zur vorgesehenen Eigenschaft und zur zulässigen Rechnung passen. Eine Winkelangabe zwischen Längenwerten bildet keine passende Schriftgrößenformel. Für den begrenzten Syntaxversuch kann eine solche ungültige Deklaration gezielt getestet werden. In einer echten Regel soll sie gar nicht erst entstehen. Aussagekräftige Namen und klar abgegrenzte Tokens helfen mehr als eine sehr verschachtelte Rechnung ohne nachvollziehbare Einheiten.

CSS-Variablen mit einer klaren Zuständigkeit verwenden

Wiederkehrende Rollen lassen sich als eigene Variablen ablegen. Dabei sollte der Name den Zweck beschreiben, etwa eine Hauptüberschrift oder den Abstand zwischen Abschnitten. Ein rein nummerischer Name macht die spätere Verwendung schwerer verständlich. Die Variable ist Teil einer Vereinbarung: Wo wird sie definiert, welche Werte sind zulässig und an welchen Stellen darf sie überschrieben werden? Diese Fragen bleiben auch bei einer sehr kurzen Formel relevant.

:root {
  --type-title: clamp(1.5rem, calc(1rem + 2vw), 2.5rem);
}
.page-title {
  font-size: 1.5rem;
  font-size: var(--type-title);
}

Eine vorhandene Variable kann trotzdem einen für die Eigenschaft ungeeigneten Wert enthalten. Wenn --type-title später beispielsweise auf broken gesetzt wird, ist die zweite Deklaration zunächst als Variablenverwendung lesbar. Der Fehler zeigt sich erst bei der Berechnung. Die erste Schriftgrößendeklaration ist dann nicht automatisch die Rettung. Im kontrollierten Versuch mit ansonsten geerbten 16 Pixeln fällt das Ergebnis auf diesen geerbten Wert zurück.

Auch ein Ersatzwert innerhalb von var() ist keine vollständige Typprüfung einer vorhandenen Variable. Eine fehlende Definition und ein vorhandener ungeeigneter Wert sind unterschiedliche Fälle. Prüfen Sie deshalb die tatsächlich verwendeten Tokens an ihren Einsatzstellen. Die technische Möglichkeit, eine Variable zu überschreiben, bedeutet noch nicht, dass jede solche Änderung innerhalb des bestehenden Gestaltungsvertrags sinnvoll oder zulässig ist.

Einbauort, Text und Grenzen gemeinsam abnehmen

Eine gute Testfläche enthält kurze und lange Überschriften, mehrere Textabsätze sowie mindestens eine bedienbare Aktion. Für den fiktiven Beratungsauftritt wird dieselbe Titelklasse zunächst mit einem kurzen und dann mit einem ausführlichen deutschen Seitentitel verwendet. Die Texte werden nicht verkürzt, um ein gewünschtes Bildschirmbild zu retten. Stattdessen wird beurteilt, ob Umbruch und Abstände die Informationen vollständig und verständlich erhalten.

Prüfen Sie mehrere Breiten und veränderte Texteinstellungen. Ein größerer Wert kann auf einer schmalen Seite zu mehr Zeilen führen und einen darunterliegenden Kontaktweg verschieben. Das ist nicht grundsätzlich falsch. Problematisch wird es, wenn wichtige Teile abgeschnitten werden, sich überlagern oder unerreichbar werden. Eine flexible Höhe und eine klare Inhaltsfolge sind deshalb häufig ebenso wichtig wie eine passend begrenzte Schriftgröße.

Notieren Sie im Prüfergebnis, was tatsächlich beobachtet wurde. Der verwendete Browser, die CSS-Viewportbreite, der Grundschriftwert, die konkrete Textfassung und die berechnete Größe schaffen eine reproduzierbare Grundlage. Ein Satz wie „auf dem großen Bildschirm gut“ reicht dafür nicht. Ebenso sollte eine simulierte Änderung der Grundschrift nicht nachträglich als Prüfung aller realen Zoomwege bezeichnet werden. Ein belastbarer Nachweis bleibt seinem tatsächlichen Umfang treu.

Eine vorhandene Größenrolle schrittweise umstellen

Für eine bestehende Webseite beginnen Sie mit einer einzigen Rolle und halten deren bisherige Darstellung fest. Ändern Sie beispielsweise zuerst nur den Seitentitel. Absatzschrift, Karteninnenraum und Abschnittsabstände bleiben während dieses Vergleichs in ihren bisherigen Rollen. So wird erkennbar, ob die neue Titelentwicklung tatsächlich die gewünschte Wirkung hat. Eine gleichzeitige Umstellung aller Abstände würde die Zuordnung einer beobachteten Verbesserung oder eines neuen Problems erschweren.

Verwenden Sie eine kleine feste Sammlung repräsentativer Inhalte. Dazu gehören ein langer deutscher Titel, eine kurze Bezeichnung und eine Übersetzung mit anderer Wortlänge. Prüfen Sie die Sammlung nach einer Anpassung erneut. Wenn eine Formel nur bei einem ausgesuchten Beispiel gut aussieht, ist die Größenrolle noch nicht ausreichend verstanden. Die nächste Entscheidung sollte aus der konkreten Abweichung folgen und nicht aus weiteren zufälligen Nachkommastellen im mittleren Ausdruck.

Die freigegebene Rolle bekommt eine kurze Begründung und nachvollziehbare Prüffälle. Bei späteren Änderungen an Schriftfamilie oder Seitenlayout wird genau diese Grundlage wieder aufgegriffen. Dadurch bleibt die fließende Größe ein gepflegter Teil des Systems. Sie wird nicht zu einer schwer erklärbaren Einzelregel, die aus Sorge vor unbekannten Auswirkungen dauerhaft unverändert kopiert wird.

Checkliste für begrenzte fließende Größen

• Ist die Aufgabe der betroffenen Schriftgröße oder des Abstands klar?
• Sind untere Grenze, Veränderung und obere Grenze getrennt begründet?
• Passt die Bezugsgröße zum tatsächlichen Einbauort?
• Sind die Ausgangsannahmen einer abgeleiteten Formel dokumentiert?
• Wurden Grenzen und Werte unmittelbar daneben nachgerechnet?
• Sind veränderte Grundschrift und tatsächliche Vergrößerungswege gesondert geprüft?
• Bleiben lange Texte vollständig und bedienbare Elemente erreichbar?
• Werden widersprüchliche Grenzen und ungeeignete Variablenwerte erkannt?
• Ist der Prüfnachweis auf die tatsächlich getesteten Bedingungen begrenzt?

Quellen und fachlicher Stand

Quellenstand: 9. November 2026. Die Primärquellen erläutern die Funktion und die Anforderungen an Textvergrößerung. Der CSSWG-Text ist ein Arbeitsentwurf. Formeln, Textbeispiele und kontrollierte Prüffälle dieses Beitrags sind eigene Ausarbeitungen.

• MDN: clamp()
• CSSWG-Arbeitsentwurf: CSS Values and Units Level 4
• W3C WAI: Understanding Resize Text