Min- und Max-Viewport wählen

Ein Team veröffentlicht einen fluiden Hero, dessen Gleiten von 320px bis 1920px eingestellt ist — der volle Bereich an Bildschirmen, den sie sich vorstellen konnten. Der Container ihres Layouts hört bei 1200px auf zu wachsen. Auf jedem Viewport, der breiter ist, stehen die Spalten still, während die Schrift weiter wächst: eine Display-Überschrift von 3.157rem, die bei ≈53,9px rendert, wenn der Container aufhört breiter zu werden, ist bis 1920px auf ≈56,8px geklettert — in Spalten, die keinen einzigen Pixel dazugewonnen haben. Der Text wächst über sein eigenes Layout hinaus — pro Zeile passen weniger Zeichen, und nichts anderes auf der Seite erklärt, warum.

Der Viewport-Bereich sollte genau dort liegen, wo dein Layout tatsächlich lebt: Setze vp-min auf den kleinsten echten Bildschirm, den du bedienst — üblicherweise 360–390px — und vp-max dort, wo dein Layout aufhört zu wachsen, typischerweise die max-width des Containers. Außerhalb des Bereichs hält der Clamp sein Minimum oder Maximum flach, was korrektes Verhalten ist, kein Defekt. Die beiden Endpunkte sind die am wenigsten diskutierten Zahlen in der fluiden Formel, und sie steuern alles, was die Steigung tut. Dieser Artikel ist Teil unseres Leitfadens zur fluiden Typografie.

Wo sollte das Gleiten beginnen?

Beim kleinsten Viewport, den dein Publikum wirklich nutzt — bei den meisten Produkten heute ein Handy mit 360–390px. vp-min tiefer zu setzen (320px ist der traditionelle Reflex) ist nicht gefährlich, aber es verbraucht einen Teil deines Gleitens für Breiten, die in Analytics kaum noch auftauchen: Die Steigung flacht ab, um sie abzudecken, und die Breiten, die Leute tatsächlich in der Hand halten, bekommen weniger von der Veränderung. Das Minimum des Clamps schützt ohnehin alles Schmalere — ein Viewport von 300px bekommt schlicht die kleinste Größe.

Der Endpunkt ist eine Eigenschaft deines Layouts und deines Traffics, nicht die irgendeines Gerätekatalogs — die Gerätemodell-Falle, die die Auswahl von Breakpoints plagt, gilt unverändert auch für fluide Endpunkte.

Wo sollte das Gleiten enden?

Dort, wo das Layout aufhört zu wachsen. Viele Layouts begrenzen ihre Inhaltsbreite mit einer max-width für den Container — jenseits davon wird zusätzlicher Viewport zu Rand, und das Maß (Zeichen pro Zeile) ist eingefroren. Wenn die Schrift über diesen Punkt hinaus weitergleitet, wächst die Größe gegen eine feste Zeilenlänge an — genau das Versagen aus dem Einstieg: Text, der über seine Spalten hinauswächst. Eine saubere Arbeitskonvention lautet also: vp-max = die max-width des Containers. Schrift und Layout hören dann bei derselben Breite auf, sich zu verändern, und die Komposition, die bei 1279px stimmte, stimmt bei 2560px immer noch — nur zentriert in mehr Rand.

Wenn dein Container bei 1200px endet, lass die Schrift bis 1200 gleiten. Wenn dein Layout wirklich full-width ist — keine Begrenzung, fluide Spalten bis ganz nach oben — ist ein breiterer vp-max vertretbar, weil die Zeilenlänge zusammen mit der Schrift weiterwächst. Die Konvention ist kein Gesetz; sie ist eine Übereinkunft zwischen zwei Systemen darüber, wo „groß“ endet.

Was passiert außerhalb des Viewport-Bereichs?

Der Clamp hält flach: Unterhalb von vp-min sitzt jede Größe auf ihrem Minimum, oberhalb von vp-max auf ihrem Maximum. Das ist das beabsichtigte Verhalten, und es lohnt sich, das klar zu sagen, denn es sieht wie ein Bug aus, wenn du das erste Mal über einen Endpunkt hinaus die Fenstergröße änderst und sich nichts bewegt. Ein Ultrawide-Monitor bekommt deine maximalen Größen — die größte Komposition, die du entworfen hast — keine postergroße Extrapolation der Steigung. Ein faltbares Gerät mit 280px bekommt dein Minimum, keinen Text, der gegen null zusammenfällt. Der Bereich ist ein Versprechen darüber, wo Interpolation stattfindet; die Endpunkte sind Versprechen darüber, was überall sonst passiert.

Wie stark verändert der Bereich die Steigung?

Stärker als es jede der beiden Basisgrößen tut. Die Steigung ist Wachstum geteilt durch Bereich. Jede vw-Einheit ist 1 % der Viewport-Breite (Viewport-Einheiten), also konzentriert ein schmaler Bereich dasselbe Wachstum auf weniger Prozent. Hier ist das gleiche 16→18px-Paar über drei Bereiche hinweg:

Alle drei stimmen an ihren Endpunkten: 15,22 + 0,2174 × 3,6 ≈ 16 und 15,22 + 0,2174 × 12,8 ≈ 18; 15,6 + 0,125 × 3,2 = 16 und 15,6 + 0,125 × 19,2 = 18 exakt; 14,24 + 0,4902 × 3,6 ≈ 16 und 14,24 + 0,4902 × 7,68 ≈ 18. Dieselben zwei Basisgrößen, drei völlig verschiedene Verhaltensweisen — der Bereich ist der Ort, an dem der Charakter eines fluiden Systems festgelegt wird. Du kannst den Unterschied direkt spüren: öffne die Regler für den Viewport-Bereich und zieh vp-max nach innen — das Gleiten der Skala wird sichtbar steiler, während die Größen an den Endpunkten unverändert bleiben.

Sollte das Gleiten den Breakpoints des Layout-Rasters entsprechen?

Es sind unabhängige Systeme — fluide Schrift hat keine eigenen Breakpoints. Das Layout-Raster stuft seine Spalten unabhängig davon weiter, was die Schrift tut. Aber unabhängig heißt nicht unverbunden: Die beiden sollten sich an den Rändern einig sein. vp-max am Container-Ende auszurichten ist eine solche Übereinkunft; eine andere ist, die Schrift bei den Breiten zu prüfen, an denen die Spalten wechseln, denn ein Spaltensprung verändert die Zeilenlänge, und die Zeilenlänge ist der Kontext, in dem deine gleitenden Größen leben. Das Gleiten muss nichts von deinen Breakpoints wissen — es muss dort enden, wo das Wachstum des Layouts endet.

Teste deine Endpunkte

Endpunkte sind billig zu testen und teuer zu erraten: lade dasselbe 16→18-Paar im schmalen Bereich 360→768 und zieh die Vorschau über beide Ränder — beobachte, wie das Gleiten früh fertig wird und oberhalb von 768px flach hält. Setze dann vp-max auf das Ende deines eigenen Containers und prüfe die Spitze deiner Skala bei genau dieser Breite. Wenn die größte Überschrift dort richtig aussieht, wo die Spalten aufhören zu wachsen, erfüllt dein Bereich seine eine Aufgabe: genau dort zu spannen, wo das Layout lebt, und nirgends sonst.