clamp() is a CSS math function that sets a value between a minimum and maximum: clamp(MIN, VAL, MAX). It resolves to VAL as long as it stays between MIN and MAX — when VAL dips below MIN it returns MIN, and when it rises above MAX it returns MAX. This makes fluid typography possible without media queries.
Set your minimum and maximum font sizes, plus the viewport range where scaling happens. The tool computes the perfect vw-based formula and shows a preview of the font size at six different viewport widths, plus a curve of how size changes across the range.
Frequently Asked Questions
Q: What does CSS clamp() do?
What does CSS clamp() do? clamp(MIN, VAL, MAX) picks a value between MIN and MAX. If VAL is smaller than MIN it returns MIN, if larger than MAX it returns MAX, otherwise it returns VAL. Perfect for fluid sizes that never get too small or too big.
Q: How is clamp different from min() and max()?
How is clamp different from min() and max()? min() picks the smallest value, max() picks the largest, clamp() combines both: it clamps the middle value between a lower and upper bound. clamp() is the fluid-typography workhorse.
Q: Is clamp() supported in all browsers?
Is clamp() supported in all browsers? Yes, clamp(), min(), and max() are supported in all modern browsers since 2020 (Chrome 79+, Firefox 75+, Safari 13.1+).
Q: What viewport sizes should I use for fluid typography?
What viewport sizes should I use for fluid typography? Common ranges are 320px-1200px for general sites, or 360px-768px for mobile-first projects. Beyond vmax your size stays fixed at the maximum — that is intentional.
Q: Can I use clamp() for spacing too?
Can I use clamp() for spacing too? Yes. Fluid padding and gaps use the same formula: clamp(16px, 4vw, 48px). Fluid spacing keeps rhythm across devices without extra media queries.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.