Veröffentlicht in Web.

Fluid Typography

Michelle Ahrens | 05.2025.

Co-Autor(en): Tabea Geiger

Fluid Typography sorgt dafür, dass sich Schriftgrößen an verschiedene Bildschirmgrößen anpassen. In diesem kurzen Blogbeitrag zeigen wir euch verschiedene Möglichkeiten, wie Fluid Typography mit modernen HTML- und CSS-Techniken umgesetzt werden kann, und geben einen Einblick, wann ihr Einsatz besonders sinnvoll ist und wann eher nicht.

Was ist Fluid Typography?

Fluid Typography bedeutet, dass sich die Schriftgröße dynamisch an die Breite des Browserfensters anpasst. Sie ist ideal für flexible Designs und eine verbesserte Lesbarkeit. Auch responsive Typography kann weich wirken, aber fluid bedeutet konkret, dass die Schriftgröße kontinuierlich skaliert – und nicht nur in Stufen über Media Queries angepasst wird. Fluid Typography ist also nicht auf breakpoints angewiesen.

Step 1: Textinhalt im HTML Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fluid Typography Demo</title>
  <link rel="stylesheet" href="CSS Clamp.css">
</head>
<body>
  <h1>So funktioniert Fluid Typography</h1>
  <p>Der Text den du hier liest passt sich automatisch an deine Bildschirmgröße an</p>
</body>
</html>

In Step 1 wird das HTML Grundgerüst mit den Pflichtelementen <!DOCTYPE html>, <head> und <body> angelegt sowie der Verweis auf den Zeichensatz und insbesondere die CSS Datei. In den <body> wird wie gewohnt der gewünschte Text eingefügt.

Step 2: CSS mit `calc()`

Eine gängige Methode für Fluid Typography ist es, die Größe der Schrift anhand der Bildschirmbreite(vw - Viewport Width) zu definieren. Dies kann unter anderem mit calc() erzielt werden.

calc() ist eine Funktion die es ermöglicht, Berechnungen direkt in CSS vorzunehmen. Sie kann verwendet werden, um z.B. Werte für Eigenschaften wie Breite, Höhe, Margin, Padding über Addition, Subtraktion, Multiplikation oder Division zu berechnen.

body {
  font-size: calc(1rem + 1vw);
}

1rem : Schriftgröße startet bei der Basisschriftgröße

1vw : Verändert die Schriftgröße basierend auf der Viewportbreite

Bei einem Browserfenster von 1000px Breite, entspricht 1vw 10 Pixeln. Berechnet man hier die Schriftgröße mit der Formel aus dem CSS-Code, ergeben sich folgende Werte:

1rem (angenommen = 16px) + 1vw(10px) führt zu Schriftgröße 26px.
Verkleinert sich die Viewport Breite auf 500px, entspricht 1vw nur noch 5px. Somit ergibt sich eine Schriftgröße von 21px.

`Rem (root em)`

Rem ist hierbei ein zusätzlicher Startwert. 1rem ist gleich der Größe des root-Elements. (meist 16px)

! Problem: Keine einstellbare Ober-Untergrenzen für diese Skalierung

Wünscht man trotzdem eine Begrenzung mit der calc() Funktion, muss mit Media Queries oder zusäzlichem clamp() gearbeitet werden.

Begrenzung mit Media Queries

@media (min-width: 720px) and (max-width: 1280px) {
  html {
    font-size: calc(16px + (24px - 16px) * ((100vw - 720px) / (1280px - 720px)));
 }
}

-> Wenn der Viewport zwischen 720 px und 1280 px breit ist, soll die Schriftgröße von 16 px auf bis zu 24 px anwachsen.

Dieser Code basiert auf folgender Basis:

html { 
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / 
  ([maximum viewport width] - [minimum viewport width]))); 
}

Erklärung der Bestandteile:

minimum size die kleinste gewünschte Schriftgröße.
maximum size die größte gewünschte Schriftgröße
minimum vw Die Breite des Viewports, ab der die Schriftgröße bei dem Minimalwert beginnt.
maximum vw Die Breite des Viewports, ab der die Schriftgröße bei dem Maximalwert endet.

Ist der viewport also kleiner oder gleich der minimum vw ist die Schriftgröße gleich der minimum size.

Ist der viewport jedoch größer oder gleich der maximum vw ist die Schriftgröße gleich der maximum size.

Dazwischen wird die Schriftgröße linear skaliert.

Begrenzung mit zusätzlichem clamp()

Auch durch die Kombination von clamp() und calc() kann die Schriftgröße auf einen bestimmten Bereich begrenzt werden. Die clamp()-Funktion kapselt die dynamische Skalierung ein und sorgt dafür, dass die Schriftgröße nie kleiner als 16px und nie größer als 24px wird – selbst wenn die calc()-Berechnung außerhalb des definierten Viewportbereichs liegen würde.

Die clamp()-Funktion legt,

eine minimale Schriftgröße (hier 16px),
eine dynamisch berechnete Zwischenstufe mit calc() (abhängig von der Viewport-Breite), und
eine maximale Schriftgröße (hier 24px) fest.

html { font-size: clamp(16px,
       calc(16px + (24px - 16px) * ((100vw - 720px) / (1280px - 720px))),
       24px)
}

/* zum Vergleich Code von oben */
 font-size: calc(16px + (24px - 16px) * ((100vw - 720px) / (1280px - 720px)));

Fazit: verwendet man nur den calc()-Befehl ohne clamp() oder Media Query, besteht kein Schutz vor Übertretung der Grenzen. Außerhalb der definierten Bereiche wächst oder schrumpft die Schriftgröße einfach weiter.

Step 2: CSS mit `clamp()`

body {
  font-size: clamp(100%, 2vw, 24px);
}

Mit dieser Funktion können Texte ebenfalls Stufenlos skaliert werden. Sie bietet jedoch den Vorteil, dass hier direkt ein Minimaler und ein Maximaler Wert festgelegt werden können die nicht überschritten werden können. Es muss nicht der Umweg über calc() mit Media Queries gegangen werden.

clamp(minimum, Dynamisch, maximum)

Das Minimum legt die kleinstmögliche Schriftgröße fest, was hier 100% sind. Dies entspricht also der Standardgröße des Browsers die oft bei 16px liegt.

Der mittlere Wert legt den Dynamischen Wert fest. Diese Ansichtsbreite liegt in diesem Beispiel bei 2vw also 2% der Viewport Breite.

Das Maximum gibt die Größtmögliche Schriftgröße vor - hier 24px.

Bei dem Dynamischen Wert kann noch ein zusätzlicher rem Wert hinzugefügt werden, um eine Basis-Schriftgröße festzulegen, die mit dem dynamischen Wert vw (Viewport-Breite) kombiniert wird.

Also z.B. 2vw+0.5rem. Zudem sollte hier auf gleiche Einheiten geachtet werden oder calc() verwendet werden.

body {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
}

Darstellung auf verschiedenen Geräten mit `clamp()`

Die Schriftgröße wächst wenn der Bildschirm breiter wird (wegen 2vw, also doppelter viewport), wird jedoch niemals größer als das Maximum (24px). Hingegen schrumpft sie wenn der Viewport kleiner wird, wird aber niemals kleiner als das festgelegte Minimum (100%).

Vorteil der clamp-Methode: die Schrift passt sich mit wenig Code dynamisch der Bildschirmgröße an ohne zu klein oder zu groß zu werden. Es ist eine einfache, moderne und sichere Variante.

Nachteil der clamp-Methode: früher nicht von allen Browsern unterstützt, mittlerweile aber bei allen modernen Browsern vorhanden und könnte auf extremen Bildschirmmaßen doch zu klein oder zu groß wirken

Step 3: Fenstergröße verändern und testen

Sinnvolle Anwendung von Fluid Typography

Fluid Typography ist eine gute Wahl, wenn das responsive Design im Vordergrund steht. Sie eigent sich, wenn es Ziel ist, Schriftgrößen auf verschiedenen Bildschirmgrößen ohne feste Breakpoints gut lesbar zu gestalten. Besonders geeignet ist sie, wenn sich Texte harmonisch in das Gesamtdesign einfügen sollen – unabhängig vom verwendeten Gerät. Ein weiterer Vorteil: Es müssen keine Media Queries für jede Bildschirmgröße geschrieben werden. Eine einmalige Definition reicht aus, um automatische Anpassungen zu ermöglichen.

Nicht geeignet ist Fluid Typography, wenn eine exakte Kontrolle der Schriftgrößen erforderlich ist. In Fällen, in denen konkrete Werte festgelegt werden sollen, kann die fließende Skalierung zu ungenauen Ergebnissen führen. Zudem können, wie bereits beim Einsatz von clamp() erwähnt, extreme Bildschirmformate zu sehr kleinen oder sehr großen Schriftgrößen führen, was die Lesbarkeit beeinträchtigen kann. In solchen Fällen sind unter Umständen feste Größen besser geeignet. In komplexen Layouts mit vielen Elementen kann zudem die Vielzahl an CSS-Berechnungen Auswirkungen auf die Performance haben. Ist eine präzise typografische Hierarchie notwendig – etwa im Editorial- oder Print-Design – kann Fluid Typography das gewünschte Schriftbild stören.

Fazit

Fluid Typography ist hervorragend für flexible, sich automatisch anpassende Designs, aber wenn absolute Kontrolle gewünscht oder sehr spezifische Anforderungen an die Schriftgröße gestellt sind, könnte sie weniger geeignet sein.