Veröffentlicht: 16. Dezember 2025
Responsives Webdesign ist ein Ansatz zum Erstellen von Websites, die in einer Vielzahl von verschiedenen Browsern, Darstellungsbereichen, Geräten und Nutzereinstellungen gut aussehen und funktionieren. Bei der Typografie geht es oft darum, font-size basierend auf der Browserbreite anzupassen. Das kann sich auch auf Abstands-Werte wie line-height und margin auswirken.
Als Designer sollten Sie sich überlegen, wie viel Platz im Browser zur Verfügung steht, und die Typografie entsprechend anpassen. Außerdem ist es wichtig, dass verschiedene Nutzer je nach ihren persönlichen Umständen, die außerhalb Ihrer Reichweite oder Ihres Wissens liegen, unterschiedliche font-size-Anforderungen auf einer Reihe von Geräten haben. Es ist also gefährlich, etwas zu tun, das den Nutzern die Kontrolle über das Endergebnis entzieht. Es gibt zwei primäre Eingaben, mit denen Nutzer die Schriftgröße beim Surfen im Web beeinflussen können:
- Eine Standardeinstellung für
font-sizefür alle Websites festlegen. - Sie können für jede Website einzeln heran- und herauszoomen.
Ziel dieser Demo ist es, die Typografie sowohl an die Größe des Darstellungsbereichs des Browsers als auch an die Nutzereingaben anzupassen. Es ist jedoch wichtig zu wissen, dass je stärker Ihre Typografie auf den Viewport reagiert, desto weniger reagiert sie auf die Nutzerpräferenzen. Wenn Sie responsive Typografie implementieren möchten, sollten Sie dies sorgfältig tun und testen, ob die Ergebnisse weiterhin zugänglich sind.
Eine Basis-font-size basierend auf Nutzerpräferenzen aushandeln
Der erste Schritt beim Definieren von Typografie im Web besteht darin, eine anfängliche Schriftgröße basierend auf der font-size-Einstellung des Nutzers festzulegen. Sie wird für den Großteil des Texts auf der Seite und als Grundlage für andere Schriftgrößen wie Überschriften verwendet. Die einfachste Option ist, dem Nutzer mit 1em die vollständige Kontrolle zu geben, ohne Anpassungen vorzunehmen. Wenn Sie keinen anderen font-size-Wert festlegen, bezieht sich 1em auf die Nutzereinstellung. Am anderen Ende des Spektrums wird durch das Festlegen eines font-size in Pixeln oder anderen absoluten Einheiten (und sogar viewport-relativen Einheiten) die Einstellung des Nutzers vollständig überschrieben. Das sollte vermieden werden.
Für verschiedene Anwendungsfälle ist jedoch eine unterschiedliche Typografie erforderlich. Ein Artikel ist möglicherweise in großer Schrift leichter zu lesen, während datenintensive Websites ein kompakteres Design mit kleinerer Schrift erfordern. In beiden Fällen sollten Sie einen Standardwert vorschlagen, der zum Design passt, dem Nutzer aber trotzdem die Möglichkeit geben, das Ergebnis an seine individuelle Situation anzupassen.
Option 1: Multiplikator auf Grundlage von Annahmen berechnen
Ein häufiger Kompromiss besteht darin, einen angepassten font-size in em- oder %-Einheiten relativ zum Standardwert font-size des Nutzers zu definieren. Bei diesem Ansatz wird in der Regel davon ausgegangen, dass Browser einen 16px-Standardwert bereitstellen und die meisten Nutzer diesen Standardwert beibehalten. Wenn Sie der Meinung sind, dass eine Schriftgröße von 20px besser für Ihre Website geeignet ist, erzielen Sie mit einem font-size von 1.25em oder 125% in der Regel das gewünschte Ergebnis:
html {
/* 20px preferred, 16px expected: 20/16 = 1.25 */
font-size: 1.25em;
}
Sie könnten hier auch eine calc()-Funktion verwenden, um die Berechnung zu zeigen. Sie müssen aber trotzdem wissen, wie die Gleichung lautet: Zielgröße geteilt durch die erwartete Größe, multipliziert mit 1em:
html {
font-size: calc(20 / 16 * 1em);
}
Nutzer mit einer größeren oder kleineren Präferenz können das Ergebnis beeinflussen, da Ihr Standardwert jetzt relativ zu ihrem Wert ist – in diesem Fall das 1,25-Fache ihrer Präferenz. Es kann jedoch seltsam sein, wenn sowohl Sie als auch der Nutzer 20px-Standardwerte anfordern und das Ergebnis 25px ist – die angepassten Standardzeiten multipliziert mit 1,25 – eine Größe, die niemand angefordert hat.
Option 2: clamp() die Arbeit erledigen lassen
Ein differenzierterer Ansatz nutzt CSS-Vergleichsfunktionen, ohne dass Berechnungen erforderlich sind. Anstatt davon auszugehen, dass 1em gleich 16px ist, und unzuverlässige Umrechnungen von px in em vorzunehmen, können Sie sich 1em als Variable vorstellen, die sich auf die Nutzereinstellung bezieht. Unabhängig davon, welchen Pixelwert 1em darstellt, wird bei einem font-size von max(1em, 20px) immer der größere Wert aus Ihrer Designvorgabe (20px) und der Nutzervorgabe (1em) zurückgegeben. So kann der Nutzer größere, aber nicht kleinere Schriftgrößen auswählen.
Wenn Sie zu einer clamp()-Funktion wechseln, können Sie dem Nutzer ermöglichen, in beide Richtungen zu skalieren, wenn seine bevorzugte Größe zu weit von Ihrem ausgewählten Standardwert abweicht. Wenn beispielsweise ein font-size von clamp(1em, 20px, 1.25em) auf 20px festgelegt wird, solange dieser Wert größer als der Standardwert des Nutzers ist, aber nicht mehr als 125% des Standardwerts.
So kann Ihr Design Vorrang haben, wenn es nahe an der Nutzereinstellung liegt. Der Nutzer hat jedoch weiterhin Vorrang, wenn seine Einstellung außerhalb des angegebenen Bereichs liegt. Es sind keine Conversion-Berechnungen erforderlich, es werden keine Annahmen zur Größe der Nutzerpräferenz getroffen und es erfolgt keine Multiplikation von Designer- und Nutzerwerten.
Wenn Sie dies als Stamm-font-size für das html-Element festlegen, können Sie jetzt überall auf der Website auf 1rem als vereinbarte Basisgröße verweisen.
Reaktionsfähigkeit hinzufügen
Damit font-size auf den Viewport reagiert, können Sie Media-Query- oder Container-Query-Breakpoints hinzufügen. Sie können den begrenzten Wert beispielsweise je nach Bildschirmgröße ändern:
html {
font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
@media (width > 30em) { --base-font-size: 18px; }
@media (width > 45em) { --base-font-size: 20px; }
}
Die andere Möglichkeit besteht darin, dem statischen Basiswert Einheiten für den Viewport oder Container hinzuzufügen:
html {
font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}
Die Einheiten vw (Breite des Darstellungsbereichs) oder vi (Inline-Größe des Darstellungsbereichs) entsprechen 1% des gesamten Darstellungsbereichs, also des Teils des Browsers, in dem Ihre Website gerendert wird. Die Einheiten cqw und cqi stehen für 1% eines Inline-Size-Containers auf der Seite. Weitere Informationen finden Sie in der Demo zu Containerabfragen und Einheiten.
Dieser Ansatz wird oft als fließende Typografie bezeichnet, da sich font-size über einen Bereich von Viewport-Breiten hinweg konstant ändert und nicht an Media- oder Container-Breakpoints von einem Wert zum nächsten springt. Lassen Sie sich jedoch nicht von der Glätte des Übergangs ablenken. Dieser Unterschied ist in der Regel nur beim Testen sichtbar, wenn Sie die Fenstergröße stufenlos anpassen. Nutzer sehen diesen Effekt nur selten oder gar nicht. Nutzer ändern zwar möglicherweise regelmäßig die Größe des Browsers oder den Zoomfaktor, aber sie müssten diese Anpassungen langsam und fließend vornehmen, um den Unterschied zwischen einem Breakpoint und einer Darstellungsbereichseinheit zu bemerken. Sie wirkt sich nur auf den Übergang aus, nicht auf das Ergebnis nach der Größenanpassung.
Der Hauptvorteil von flüssigen Schriftgrößen besteht darin, dass keine manuellen Berechnungen oder Angaben von Breakpoints erforderlich sind. Stattdessen wird für jede beliebige Größe ein interpoliertes Ergebnis bereitgestellt. Sie legen nur den Ausgangspunkt (16px) und die Änderungsrate fest (0.25vw führt zu einer Steigerung von 0.25px bei font-size für jede Steigerung von 100px im Viewport) und möglicherweise Mindest- und Höchstwerte. Wenn der Viewport 1000px breit ist, ist die font-size 16px + 2.5px oder 18.5px. Diese Berechnung wird jedoch vollständig vom Browser übernommen. Das ist der Ansatz, der in der Demo verwendet wird. Dabei werden cqi-Einheiten verwendet, um die containerbasierte Reaktionsfähigkeit zu demonstrieren. Wenn sie für das Stammelement (html) verwendet werden, für das kein Container definiert ist, beziehen sich cqi-Einheiten weiterhin auf die Größe des Viewports.
Wenn Sie lieber in Bezug auf die angegebene font-size bei einer bestimmten Darstellungsbereichsgröße denken, sollten Sie den direkteren Media-Query-Ansatz verwenden, der etwas übersichtlicher ist. Es wird kompliziert, wenn Sie versuchen, Darstellungsbereichseinheiten basierend auf den beabsichtigten Breakpoints zu berechnen. Viele Nutzer kopieren und fügen Werte aus Drittanbieter-Tools ein. Der resultierende Code ist jedoch viel schwieriger zu verstehen oder direkt zu ändern. Im Allgemeinen ist die beste Option für CSS die, die Ihre Absichten am deutlichsten ausdrückt.
Achtung: Änderungen am Darstellungsbereich bedeuten nicht immer dasselbe.
Media-Anfragen und vi-Einheiten werden zwar unterschiedlich angewendet, beide Ansätze basieren jedoch auf derselben Messung des Darstellungsbereichs. Wenn der Darstellungsbereich 600px breit ist, entspricht 100vw 600px und die Formatierungen in der Media-Anfrage (width > 500px) werden angewendet.
Was bedeutet es aber, wenn der Darstellungsbereich 600px breit ist? In der Realität hat ein Pixel nicht immer dieselbe Größe und Bedeutung. Es ist zwar naheliegend, dass ein Viewport mit weniger Pixeln auf einem kleineren Bildschirm (z. B. einem Smartphone) oder in einem schmalen Browserfenster angezeigt wird, aber das ist keine zuverlässige Annahme. Tatsächlich haben das Vergrößern und das Verkleinern des Browserfensters beide denselben Einfluss auf die gemessene Darstellungsbereichsbreite. Bei einer Aktion (Zoomen) ändert sich die Größe eines Pixels, bei der anderen (Anpassen der Größe) die Größe des Browsers selbst. Bei beiden Aktionen ändert sich jedoch die Anzahl der Pixel über die Breite des Browsers. Die Viewport-Messung liefert uns eine Beziehung zwischen der aktuellen Pixelgröße und dem aktuellen Browserfenster.
Für den Nutzer haben Zoomen und Anpassen der Größe jeweils einen ganz anderen Zweck. Wenn ein Nutzer die Zoomstufe ändert, versucht er, den Inhalt der Seite zu vergrößern oder zu verkleinern. Wenn er die Größe des Browsers ändert, verwaltet er nur den Platz auf verschiedenen Bildschirmen. Auch wenn die Nutzerabsicht unterschiedlich ist, ist das Ergebnis bei Preisvergleichsportal-Messungen dasselbe. Wenn das Fenster kleiner oder das Pixel größer wird, gibt es weniger Pixel über die Breite des Browsers hinweg.
Diese Diskrepanz macht responsive Typografie unzuverlässig. Wenn die Größe Ihres Texts nur auf Grundlage eines Darstellungsbereichs oder Containers angepasst wird, hat der Nutzerzoom keine Auswirkungen.
Wenn Sie den Wert der viewport-relativen Einheit in 1vw oder 100vw ändern, ändert sich das genaue Verhältnis zwischen Schriftgröße und Darstellungsbereich. Eine 1vw-Schriftart wird für jede 100px der Darstellungsbereichsgröße um 1px größer, während eine 100vw-Schriftart genau die gleiche Größe wie der Darstellungsbereich hat. Sie können diesen Wert ändern, damit die Schriftart im Verhältnis zum Browser langsamer oder schneller wächst. Alle viewport-relativen Werte bleiben jedoch konstant, wenn der Nutzer hinein- oder herauszoomt. Sie reagieren also nicht auf Nutzeraktionen.
Ebenso wird bei 1vw- und 100vw-Konten nicht der Standardwert font-size des Nutzers berücksichtigt.
Die alleinige Verwendung von viewport- oder containerbezogenen Einheiten für font-size ist immer nutzerfeindlich. Wenn ein font-size vollständig auf seinen Container reagiert, kann es nicht auch auf Nutzerstandardeinstellungen oder ‑anpassungen reagieren. Auch wenn die Absichten und Schutzmaßnahmen noch so gut sind, sollte die endgültige font-size nicht den Nutzern entzogen werden. Das ist nicht nur schlecht für die Nutzerfreundlichkeit, sondern kann auch gegen Richtlinien zur Barrierefreiheit verstoßen, die oft gesetzlich vorgeschrieben sind. Konkret wird in Abschnitt 1.4.4 der Web Content Accessibility Guidelines gefordert, dass „Text ohne Hilfstechnologie auf bis zu 200 % vergrößert werden kann“.
Dafür sorgen, dass font-size-Werte auf Zoom reagieren
Damit ein sichtbereichsbezogener font-size auf Zoom reagiert, muss der sichtbereichsbezogene Wert als Anpassung auf einen anderen Wert angewendet werden. In CSS ist das mit der Funktion calc() oder einer anderen mathematischen Funktion möglich, die Berechnungen akzeptiert, z. B. min(), max() und clamp(). Ein font-size von calc(16px + 1vw) basiert sowohl auf der Größe des Darstellungsbereichs als auch auf der aktuellen (zoomrelativen) Größe eines Pixels. Die vw-Einheit ist vom Zoom nicht betroffen, der Basiswert jedoch schon.
Das Ergebnis ist ein font-size, das sowohl auf die Größe des Darstellungsbereichs als auch auf die Zoomeinstellungen des Nutzers reagiert. Wenn der Nutzer auf 200% zoomt, wird der Basiswert doppelt so groß gerendert (32px), während der responsive Wert unverändert bleibt. Bei einem 1000px-Darstellungsbereich hätten Sie anfangs eine font-size von 16px + 10px = 26px, aber bei einer Zoomstufe von 200% würde die Schriftgröße nur auf 42px ansteigen, also etwas mehr als 160%. Das mag nicht wie ein extremes Problem klingen, aber je mehr Ihr font-size auf dem Viewport basiert, desto weniger effektiv wird das Zoomen.
Auf kleinen Bildschirmen stammt die font-size hauptsächlich vom Basis-Pixelwert und reagiert gut auf Zoom. Auf größeren Bildschirmen macht die Viewport-Größe jedoch einen größeren Teil der gerenderten Schriftgröße aus, sodass der Zoom weniger effektiv ist. Das wird besonders gefährlich, wenn die Schriftgröße bei 500% Zoom (dem Maximum in den meisten Browsern) nicht mehr um die von WCAG 1.4.4 geforderten 200% erhöht werden kann. Aber auch schon vorher kann es frustrierend sein, wenn das Zoomen nicht mehr funktioniert.
0 bis 2600px Pixel breit. Die vertikale Achse für font-size ist ebenfalls in Pixeln angegeben und zeigt das Ergebnis von calc(17px + 2.5vw). Für die Zoomlinie 500% wird dieselbe horizontale Achse für die Breite des Viewports verwendet, die vertikale Achse wird jedoch als Prozentsatz behandelt.
Am linken Rand des Diagramms (0 Darstellungsbereichsbreite) ist der 500%-Zoom voll wirksam. Diese Effektivität nimmt jedoch schnell ab, wenn die Browsergröße zunimmt und (nicht zoomfähige) Viewport-Einheiten einen größeren Faktor im font-size darstellen. Wenn der Browser 2040px breit ist, kann mit dem maximalen 500%-Zoom nur eine 200%-Vergrößerung der Schriftgröße erreicht werden. Danach ist kein effektiver Schriftzoom von 200% mehr möglich.
Wenn Sie diese Berechnung in eine clamp()-Funktion mit Mindest- und Höchstwerten verschieben, können Sie Grenzen festlegen, die dafür sorgen, dass der Text zoombar ist. Laut Maxwell Barvian:
Wenn die maximale Schriftgröße höchstens 2,5-mal so groß ist wie die minimale Schriftgröße, entspricht der Text immer WCAG SC 1.4.4, zumindest in allen modernen Browsern.
Da @media- und @container-Abfragen auf denselben Messungen wie vw- und cqw-Einheiten basieren, gilt dieselbe Logik, wenn Sie einen Breakpoint verwenden, um die Schriftgröße zu ändern. Wenn die Größenänderung zu drastisch ist, ist das Zoomen nicht mehr effektiv. In der folgenden Visualisierung können Sie ausprobieren, wie sich diese Werte aufeinander auswirken:
So sorgen Sie dafür, dass font-size-Werte auf Nutzereinstellungen reagieren
calc(16px + 1vw) reagiert jedoch weiterhin nicht auf die Standardeinstellungen für Schriftarten des Nutzers. Dazu können Sie mit em- oder rem-Einheiten anstelle von px einen Basiswert oder Mindest- und Höchstwerte festlegen. Insgesamt erhalten Sie ein vertrautes Ergebnis, das mit der verlinkten Demo übereinstimmt:
html {
font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}
Hinweis:
- Für das Minimum und das Maximum werden
em-Einheiten verwendet, die auf den Nutzereinstellungen basieren und auf Zoom reagieren. - Der zusätzliche
vw-Wert wird so gering wie möglich gehalten, damit der Zoom nicht zu stark beeinträchtigt wird. - Die maximale Größe (
1.125em) ist deutlich kleiner als das 2,5-Fache des Minimums (1em). So ist immer ein effektiverfont-size-Wert von200%möglich.
Typografische Skalen mit pow()
Die meisten Designs verwenden mehr als eine Schriftgröße. Eine typografische Skala beschreibt die Beziehung zwischen mehreren Schriftgrößen. Das lässt sich als Basisgröße und eine Reihe von Multiplikatoren ausdrücken, mit denen die anderen Größen berechnet werden. CSS bietet eine integrierte typografische Skala relativ zum Keyword medium, das sich auf die bevorzugte Schriftgröße des Nutzers oder einen Standardwert von 16px bezieht. Die vollständige Keyword-Skala lautet:
xx-small: 3/5 (0,6)x-small: 3/4 (0,75)small: 8/9 (0,89)medium: 1 (die Basisgröße, mit der andere Werte multipliziert werden)large: 6/5 (1.2)x-large: 3/2 (1,5)xx-large: 2/1 (2)xxx-large: 3/1 (3)
Diese Skalierung ist relativ zum Standardnutzer und nicht zum Root-font-size. Sie funktioniert daher nicht mehr so gut, wenn Sie den Root-font-size Ihrer Website ändern. Die meisten Autoren erstellen eine ähnliche Typografie-Skala mit benutzerdefinierten Eigenschaften. Manchmal verwenden sie dieselben Namen für T-Shirt-Größen, manchmal bevorzugen sie eine Reihe von Schritten auf einer mathematischen Skala. Es gibt viele Drittanbietertools, mit denen sich diese Skalen auf der Grundlage gängiger Verhältnisse generieren lassen, die meist von einer westlichen musikalischen Skala abgeleitet sind:
html {
/* musical ratios */
--minor-second: calc(16/15);
--major-second: calc(9/8);
--minor-third: calc(6/5);
--major-third: calc(5/4);
--perfect-fourth: calc(4/3);
--augmented-fourth: sqrt(2);
--perfect-fifth: calc(3/2);
--major-sixth: calc(5/3);
/* the golden ratio*/
--golden-ratio: calc((1 + sqrt(5)) / 2);
}
Sie benötigen jedoch keine externen Tools, um eine eigene Skala in CSS zu erstellen. Die neue Funktion pow() kann die Skala für Sie generieren. Dabei wird 1rem als Ihre eigene Basisgröße verwendet.
html {
/* choose a ratio */
--scale: 1.2;
/* generate the scale using pow() */
--xx-small: calc(1rem * pow(var(--scale), -0.5));
--x-small: calc(1rem * pow(var(--scale), -0.25));
--small: calc(1rem * pow(var(--scale), -0.125));
--medium: 1rem;
--large: calc(1rem * pow(var(--scale), 1));
--x-large: calc(1rem * pow(var(--scale), 2));
--xx-large: calc(1rem * pow(var(--scale), 3));
--xxx-large: calc(1rem * pow(var(--scale), 4));
/* change the ratio for different viewport sizes */
@media (width > 50em) {
--scale: var(--perfect-fourth);
}
}
Sie müssen keine ganzen Schritte verwenden, um die Skala konsistent zu halten. Tatsächlich werden in der gängigen 12pt-Typografieskala etwa fünf Bruchteile pro Schritt verwendet. Während bei den großen Größen hier ganze Schritte auf der Skala verwendet werden, werden bei den kleinen Größen Bruchteile verwendet, um langsamer zu skalieren.
Mit CSS-Mixins und -Funktionen lässt sich diese Logik noch weiter verdichten. Andere integrierte Tools wie progress() erleichtern die Erstellung von Skalen, die sich fließend von einem Wert zum nächsten anpassen. Diese Funktionen werden in dieser Demo jedoch nicht behandelt.
Auf die Größe von In-Page-Containern reagieren
Sie können alle diese Berechnungen in Containerabfragen durchführen, indem Sie die Einheit cqi anstelle von vw oder vi verwenden. Es ist jedoch auch hilfreich, die font-size des Nutzers im html-Element beizubehalten, damit jeder Container für die Typografie als 1rem auf diese Nutzerpräferenz verweisen kann. In der Demo wird die gesamte Typografie-Skala auf das body-Element und nicht auf das html-Element für die globale Typografie angewendet. Anschließend wird sie für jedes Element mit dem Attribut type-set basierend auf der Containergröße zurückgesetzt.
Das ist immer ein Kompromiss bei containerbezogenen Schriftgrößen. Sie erreichen eine flüssigere Schriftgrößenanpassung für jedes Element im Kontext, allerdings auf Kosten der seitenweiten Konsistenz. Welche der beiden Optionen für Sie wichtiger ist, hängt von den Besonderheiten Ihres Anwendungsfalls ab. Denken Sie daran, dass fließende Typografie selbst ein Kompromiss ist, der dazu führt, dass Nutzersteuerungen wie Zoom weniger effektiv sind.
Responsive Typografie und typografische Skalen sind zwar großartige Tools für Designer, aber Sie müssen die Dinge nicht unnötig komplizieren. Die Standard- und integrierte Typografie sind ebenfalls eine gute Option. Wenn Sie sich für responsive (oder dynamische) Typografie entscheiden, sollten Sie jedoch testen, wie sich die Ergebnisse in Bezug auf verschiedene Standardeinstellungen und Zoomeinstellungen verhalten. Viel Spaß!