Fluid Typography: So passen sich Deine Schriften stufenlos an jede Bildschirmgröße an, für bessere Lesbarkeit, mehr Zugänglichkeit & ein professionelles Design.
Eine Website ist dann wirklich nutzerfreundlich, wenn Inhalte auf jedem Bildschirm gut lesbar sind – egal ob Smartphone, Tablet oder Desktop. Dabei spielt nicht nur das Layout eine Rolle, sondern vor allem auch die Schriftgröße.
Noch vor wenigen Jahren war die Welt der Bildschirme überschaubar: Ein Breakpoint für Desktop (1920px), einer für Tablet (768px) und einer Smartphone (360px), das reichte völlig aus. Doch die Zeiten haben sich ziemlich geändert …
Heute jonglieren wir mit einer ganzen Armada an Bildschirmgrößen: Von winzigen Smartwatches (280px) über Foldables mit ihren ausgefallenen Zwischenformaten bis hin zu curved (gewölbten) Gamingmonitoren mit satten 5120px (!) Breite. Allein bei Smartphones gibt es inzwischen Dutzende verschiedener Formate – das iPhone 15 Pro Max misst 430px, das Galaxy S23 Ultra 500px, während das kleine iPhone SE bei 375px liegt. Diese Vielfalt macht das klassische Breakpointsystem zur echten Herausforderung 🤯
Und genau hier kommt Fluid Typography ins Spiel.
Inhalt
Was ist Fluid Typography eigentlich?
Ganz einfach gesagt: Fluid Typography (fließende Typografie) sorgt für fließende, stufenlose Übergänge bei der Schriftgröße. Anders als bei klassischen Breakpoints, bei denen die Schrift an festgelegten Punkten „springt“, passt sich die Größe hier kontinuierlich an die Bildschirmbreite an.
Das ist besonders wichtig, weil es heute unzählige verschiedene Bildschirmformate gibt – von kleinen Smartphones bis zu ultrabreiten Monitoren. Mit Fluid Typography vermeidest Du holprige Größensprünge und erhältst stattdessen eine harmonische, durchgängig angepasste Typografie auf allen Geräten.
Im Gegensatz zu starren Pixelgrößen (px) oder reinen relativen Einheiten (z. B. Prozent oder em) verbindet Fluid Typography das Beste aus beiden Welten: Du definierst einen Minimal- und einen Maximalwert für Deine Schriftgröße.
Zwischen diesen Grenzen berechnet eine Formel dann die exakte Schriftgröße, die perfekt zur jeweiligen Bildschirmbreite passt. So stellst Du sicher, dass sich Dein Text flexibel an jedes Format anpasst ohne jemals zu klein oder zu groß zu werden.
Technisch umgesetzt wird das in CSS oft mit der Funktion clamp(). Aber keine Sorge: Als Websitebetreiber:in musst Du jetzt nicht den Taschenrechner hervorholen und die Formeln selbst ausrechnen – es gibt praktische Tools und Lösungen, die Dir das abnehmen (siehe weiter unten).
Warum ist der Einsatz von Fluid Typography sinnvoll?
Stell Dir vor, eine Kundin ruft Deine Website auf dem Handy auf. Wenn die Überschrift zu klein ist, muss sie zoomen, verliert die Übersicht – und im schlimmsten Fall auch die Lust, weiterzulesen. Umgekehrt kann eine große Headline auf dem Desktop, die auch auf dem Smartphone riesig erscheint, schnell unprofessionell wirken.
Ein Blick zurück: Das Web vor Fluid Typography
In den Anfangstagen des Internets waren solche Überlegungen noch kein Thema – Websites wurden starr für Desktopbildschirme entwickelt und mobile Endgeräte spielten keine Rolle. Mit der rasanten technischen Entwicklung haben sich auch die Möglichkeiten im Webdesign dramatisch verbessert. Was früher nur mit komplexen Workarounds oder gar nicht möglich war, lässt sich heute dank moderner CSS-Standards wie Fluid Typography elegant lösen. Diese Evolution des Webdesigns zeigt eindrucksvoll, wie wichtig es ist, mit der Zeit zu gehen und neue technische Standards zu nutzen, um das Nutzererlebnis kontinuierlich zu verbessern.
Fluid Typography sorgt also dafür, dass Deine Texte immer optimal wirken. Das verbessert nicht nur die Lesbarkeit, sondern auch den gesamten Eindruck Deiner Marke. Denn gutes Design wirkt unterschwellig und trägt dazu bei, dass Besucher:innen länger auf Deiner Website bleiben.
So funktioniert Fluid Typography
Hier zur Demonstration ein animiertes Gif, das Dir die Funktionalität von Fluid Typography verdeutlicht. Klicke auf das Bild, um die Animation in Aktion zu sehen.
Tools für Fluid Typography
Ich setze bei jedem neuen Projekt inzwischen variable Schriftgrößen ein. Dazu nutze ich folgendes Tool, um die entsprechenden Formeln zu generieren:
Dazu lege ich mir einmal die verschiedenen Überschriftenhierarchien (h6, h5, h4, h3, h2, h1 und h-title) sowie verschiedene Größen für die regulären Texte (text-xxs, text-xs, text-s, text-m, text-l, text-xxl) an.
Text S oder Text M wird dann die Standartgröße für den Fließtext, während ich Text XS oder XXS quasi für das „Kleingedruckte“ wie den Hinweis auf die Datenschutzerklärung nehme.
Ich habe übrigens nicht unbedingt jede Textgröße im Einsatz, aber da sie aufgrund der Type Scale Ratio im Verhältnis zueinander stehen (im Beispiel oben im Verhältnis von 1 zu 1.125 am Desktop, d.h. die Größe M ist 1.125x größer als die Größe S; L wiederum 1.125x größer als L) habe ich so mehr Auswahlmöglichkeiten.
Formeln in die Website einfügen
Fließtext
--text-xxs: clamp(0.88rem, 0.02vi + 0.87rem, 0.89rem);
--text-xs: clamp(0.94rem, 0.13vi + 0.91rem, 1rem);
--text-s: clamp(1rem, 0.25vi + 0.94rem, 1.13rem);
--text-m: clamp(1.07rem, 0.4vi + 0.97rem, 1.27rem);
--text-l: clamp(1.14rem, 0.57vi + 1rem, 1.42rem);
--text-xl: clamp(1.21rem, 0.77vi + 1.02rem, 1.6rem);
--text-xxl: clamp(1.3rem, 1.01vi + 1.04rem, 1.8rem);
Überschriften
--h-6: clamp(1.13rem, 1.13vi + 0.84rem, 1.69rem);
--h-5: clamp(1.27rem, 1.27vi + 0.95rem, 1.9rem);
--h-4: clamp(1.42rem, 1.44vi + 1.07rem, 2.14rem);
--h-3: clamp(1.6rem, 1.62vi + 1.2rem, 2.41rem);
--h-2: clamp(1.8rem, 1.83vi + 1.35rem, 2.72rem);
--h-1: clamp(2.03rem, 2.06vi + 1.51rem, 3.06rem);
--h-title: clamp(2.28rem, 2.32vi + 1.7rem, 3.44rem);Diese Formeln passe ich dann an und füge sie dann wie folgt in die CSS-Einstellungen meiner Website, in meinem Fall in Elementor Pro unter Website-Einstellungen > individuelles CSS:
/**Fluid Typography**/
:root {
/**Fließtext**/
--text-xxs: clamp(0.88rem, 0.02vi + 0.87rem, 0.89rem);
--text-xs: clamp(0.94rem, 0.13vi + 0.91rem, 1rem);
--text-s: clamp(1rem, 0.25vi + 0.94rem, 1.13rem);
--text-m: clamp(1.07rem,0.4vi + 0.97rem, 1.27rem);
--text-l: clamp(1.14rem,0.57vi + 1rem, 1.42rem);
--text-xl: clamp(1.21rem,0.77vi + 1.02rem, 1.6rem);
--text-xxl: clamp(1.3rem, 1.01vi + 1.04rem, 1.8rem);
/**Überschriften**/
--h-6: clamp(1.13rem, 1.13vi + 0.84rem, 1.69rem);
--h-5: clamp(1.27rem, 1.27vi + 0.95rem, 1.9rem);
--h-4: clamp(1.42rem, 1.44vi + 1.07rem, 2.14rem);
--h-3: clamp(1.6rem, 1.62vi + 1.2rem, 2.41rem);
--h-2: clamp(1.8rem, 1.83vi + 1.35rem, 2.72rem);
--h-1: clamp(2.03rem, 2.06vi + 1.51rem, 3.06rem);
--h-title: clamp(2.28rem, 2.32vi + 1.7rem, 3.44rem);
Um die Schrift dann auszuwählen, muss ich jetzt nur noch im Texteditor- oder dem Überschriftenwidget die Variable in Form von zum Beispiel var(–h-2) angeben:
Weitere Infos zu Elementor & Schriften findest Du in diesem Blogartikel: Schriften in Elementor richtig einstellen
Und schon sehen Deine Schriften auf jedem Gerät gut aus 😊
Fluid Typography und Barrierefreiheit
Variable Schriftgrößen verbessern übrigens auch die Barrierefreiheit Deiner Website spürbar. Wenn sich Schriften dynamisch an den Bildschirm anpassen, können Menschen mit Sehbeeinträchtigungen Inhalte leichter lesen, ohne manuell zoomen zu müssen.
So skalieren sich Überschriften wie Fließtext automatisch, dass sie auf dem Smartphone direkt vor der Nase gut lesbar bleiben und am Desktop auf dem Schreibtisch mit entsprechendem Abstand zum Bildschirm nicht zu klein wirken. Auch Zeilenlängen und Proportionen der Schrift passen sich automatisch an, was das Lesen insgesamt angenehmer macht.
So gestaltest Du Deine Website zugänglich und komfortabel für alle Nutzer:innen, ohne dass jemand an Lesbarkeit einbüßen muss.
Dir ist das alles zu kompliziert?
Fakt: Fluid Typography ist inzwischen ein echtes Must-have für moderne Websites. Und ich richte sowas auch für andere ein 😉
Also, wenn Du Unterstützung dabei suchst, Deine Website fit für modernes Webdesign zu machen, dann lass uns sprechen. Vereinbare einfach ein unverbindliches Kennenlerngespräch mit mir und wir schauen gemeinsam, wie wir Deine Website als starkes Marketingtool einsetzen können.
