This clamp tool helps you get the best clamp value (with extra compatibility for older browsers) for your font sizing.
Explanation of the inputs:
- Desktop width: This is the screen width where the text starts shrinking.
- Mobile width: This is the screen width where the text STOPS shrinking.
- Desktop root rem: The base font size (1rem) on desktop. I usually use 20px for easy calculations, but please use 16px if you're not sure what this does.
- Mobile root rem: This should most likely stay 16px.
- Desktop font size: This is the size you'd want the font to be when the screen is wider than 'desktop width' in rem. (for example, if you'd like the font to be 48px on desktop with 16px rem sizes, it should be 3. If the rem is set to 20px, then of course, it should be 2.4)
- Mobile font size: Same as desktop, but for mobile sizes. (for example, if you'd like the font to be 32px, then 2 should be used since the rem is 16px)
Once you input them, you'll get:
- Compatibility line: This is for older browsers, and helps when you're coding things yourself, and inputting the CSS directly. Make sure this goes above the clamp line.
- Clamp line: This is the main result we were aiming for. This will do all the work. Just copy paste it where you need it.
The graph is just a visual representation of how the font sizes will work.