A viewport-based heading can look balanced on a laptop yet become too small on a phone. A maximum operation solves that lower-limit problem: choose the largest value available. In CSS, max() returns the largest value from a comma-separated list, so it can preserve a minimum usable size while a responsive value continues to grow. section 3.2.3 section 8.2.1
Read max(32px, 8vw) as “use whichever is larger.” If 8vw computes to 20px, the result is 32px. If it computes to 80px, the result is 80px. The fixed value is therefore a floor, not a ceiling; min() does the opposite by selecting the smaller value. section 3.2.3
Listing 3.6 Using max() to constrain the minimum font size
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 80px 20px;
}
.hero h1 {
font-size: max(32px, 8vw); #1
}
.hero p {
font-size: max(16px, 4vw); #2
}
This hero style applies max() separately to a heading and paragraph, keeping each readable at small viewport widths while retaining viewport-based scaling. section 3.2.3
Use maximum selection where a value must not fall below a threshold:
- Protect fluid typography with font-size: max(16px, 2vw), which chooses 16px whenever 2vw is smaller. section 8.2.2
- Set a scale floor derived from a design requirement, as in font-size: max(1.5rem, 2vw). section 8.4
- Keep simulated star depth from becoming unrealistically close with Math.max(0.5, randomDepth). section 14.2.2
max() is especially useful with values that change as the viewport changes. It replaces a breakpoint-like “do not go below this” rule with a continuously evaluated expression. For a bounded range on both sides, clamp(min, preferred, max) combines a lower bound, a scaling value, and an upper bound; equivalently, its limiting behavior can be expressed with max() and min(). section 6.5.6 section 8.2.2
Checking a minimum font size
Suppose a paragraph uses font-size: max(16px, 4vw). At a viewport where 4vw is below 16px, the browser selects 16px. Once 4vw exceeds 16px, it selects 4vw instead. This lets the text scale smoothly without crossing the chosen readability floor. section 3.2.3 section 8.2
The same mathematical idea appears in JavaScript as Math.max(), which finds the largest number in a set of values. It can support interactive UI calculations, animations, color conversion, and canvas effects. CSS max() expresses a computed style rule; Math.max() supplies a number for program logic. section 1.3.2 section 7.2.2
Practical takeaway: put the non-negotiable minimum first, put the responsive or dynamic candidate beside it, and let maximum selection choose the safe larger result. section 3.2.3 section 6.5.6
