clamp() ist eine CSS-Mathematikfunktion, die einen Wert zwischen Minimum und Maximum setzt: clamp(MIN, VAL, MAX). Sie gibt VAL zurück, solange es zwischen MIN und MAX liegt — fällt VAL unter MIN, wird MIN zurückgegeben; steigt es über MAX, wird MAX zurückgegeben. Das macht flüssige Typografie ohne Media Queries möglich.
Setze minimale und maximale Schriftgröße sowie den Viewport-Bereich, in dem die Skalierung stattfindet. Das Tool berechnet die perfekte vw-basierte Formel und zeigt eine Vorschau der Schriftgröße bei sechs Viewport-Breiten sowie eine Kurve, wie sich die Größe über den gesamten Bereich verändert.
Frequently Asked Questions
Q: Was macht clamp() in CSS?
Was macht clamp() in CSS? clamp(MIN, VAL, MAX) wählt einen Wert zwischen MIN und MAX. Ist VAL kleiner als MIN, wird MIN zurückgegeben; ist es größer als MAX, wird MAX zurückgegeben; sonst VAL. Perfekt für flüssige Größen, die nie zu klein oder zu groß werden.
Q: Wie unterscheidet sich clamp() von min() und max()?
Wie unterscheidet sich clamp() von min() und max()? min() wählt den kleinsten Wert, max() den größten, und clamp() kombiniert beides: Es klemmt den Mittelwert zwischen Unter- und Obergrenze. clamp() ist das Arbeitspferd der flüssigen Typografie.
Q: Wird clamp() in allen Browsern unterstützt?
Wird clamp() in allen Browsern unterstützt? Ja. clamp(), min() und max() werden seit 2020 in allen modernen Browsern unterstützt (Chrome 79+, Firefox 75+, Safari 13.1+).
Q: Welche Viewport-Größen für flüssige Typografie?
Welche Viewport-Größen für flüssige Typografie? Übliche Bereiche sind 320px-1200px für allgemeine Seiten oder 360px-768px für Mobile-First-Projekte. Jenseits von vmax bleibt die Größe am Maximum fixiert — das ist beabsichtigt.
Q: Kann ich clamp() auch für Abstände nutzen?
Kann ich clamp() auch für Abstände nutzen? Ja. Flüssige Paddings und Gaps nutzen dieselbe Formel: clamp(16px, 4vw, 48px). Flüssige Abstände halten den Rhythmus zwischen Geräten ohne zusätzliche Media Queries.
Bauhaus-Farben
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.