Was fluide Typografie bedeutet
Klassische responsive Typografie wählt einige feste Größen und tauscht sie per Media Query aus: 16px auf dem Smartphone, 18px auf dem Tablet, 20px auf dem Desktop. Fluide Typografie ersetzt diese Stufen durch eine stetige Funktion der Viewport-Breite. Mit CSS clamp() passt die ganze Regel in eine Zeile, und der Browser berechnet für jede Breite zwischen deinen beiden Endpunkten die passende Größe.
Die Formel hinter clamp()
Eine fluide Größe ist eine Gerade durch zwei Punkte: (min. Viewport, min. Größe) und (max. Viewport, max. Größe). Die Steigung ist (max. Größe − min. Größe) ÷ (max. Viewport − min. Viewport); mit 100 multipliziert ergibt sie den vw-Koeffizienten. Der Achsenabschnitt ist min. Größe − Steigung × min. Viewport. Heraus kommt clamp(min. Größe, Achsenabschnitt + Steigung·100vw, max. Größe). Der Generator oben rechnet genau so und rundet auf die gewählte Anzahl Nachkommastellen.
Gute Größen wählen
Fließtext muss sich selten stark ändern: 16 bis 18 oder 16 bis 20 Pixel decken die meisten Leselayouts ab. Überschriften profitieren mehr, denn eine 48px-Headline, die auf dem Laptop gut aussieht, belegt auf dem Smartphone den halben Bildschirm. Beginne mit der größten Überschrift und arbeite dich nach unten; je kleiner der Text, desto kleiner sollte das Verhältnis zwischen Minimum und Maximum sein.
Leite den Viewport-Bereich aus deinem Layout ab, nicht aus Gerätelisten. Das Minimum liegt meist bei 320 oder 360 px. Das Maximum ist die Breite, bei der dein Inhaltscontainer seine max-width erreicht; danach wächst die Zeilenlänge nicht mehr, also sollte auch die Schriftgröße nicht weiter wachsen.
Checkliste Barrierefreiheit
Halte Minimum, Maximum und Achsenabschnitt in rem, damit die Schrifteinstellungen der Nutzer weiter greifen. Prüfe WCAG 1.4.4 mit 200 % Zoom: Ist das Maximum mehr als etwa das 2,5-Fache des Minimums, vergrößert der Zoom den Text womöglich nicht genug – das Tool warnt dich. Verwende eine relative Zeilenhöhe (etwa 1.5), damit sie mit der Schrift skaliert, und teste deine längsten Wörter auf dem schmalsten Bildschirm.