Generate perfect CSS clamp() values for fluid responsive typography. Your font sizes will scale smoothly between viewport breakpoints.
Formula breakdown:
clamp(min, preferred, max)
• min: The minimum font size
• preferred: The fluid calculation (rem + vw)
• max: The maximum font size
The quick brown fox jumps over the lazy dog
CSS clamp() is a function that clamps a value between an upper and lower bound. For typography, it creates fluid font sizes that scale smoothly with viewport width while respecting minimum and maximum limits. The syntax is: clamp(minimum, preferred, maximum).
Unlike media queries that create abrupt jumps between font sizes, clamp() provides smooth, continuous scaling. This creates a better user experience across all screen sizes without writing multiple breakpoints. It's also more maintainable - one line of CSS instead of multiple media queries.
The fluid value is calculated using: minSize + (maxSize - minSize) * ((100vw - minViewport) / (maxViewport - minViewport)). This is simplified to a rem + vw format for the preferred value in clamp(), ensuring the font scales proportionally between your defined breakpoints.
We recommend rem for accessibility. Users who change their browser's default font size will see your text scale accordingly. The rem values are calculated based on a 16px root font size by default (adjustable above).
Common choices: 320px for mobile minimum (smallest common phones), 1200-1440px for desktop maximum. This covers the typical responsive range. Adjust based on your design's actual breakpoints.
