Why this tool exists
Two questions you ask weekly:
- “What’s 18px in rem at a 16px root?” —
1.125rem - “What clamp() produces 14px at 320px viewport and 24px at 1280px?” — you’d reach for a calculator.
This tool answers both in seconds. Configurable root and parent so you can match the actual context of your design system, not just default browser values.
A note on em vs rem
em compounds: a 1.2em font-size inside an element that’s already 1.2em lands at 1.44em of the root. That’s useful when you want components to scale relative to their container — labels next to a larger heading, for instance. But it’s a footgun in deeply nested layouts.
rem always references the root. Predictable, but doesn’t react to local context.
The pragmatic rule: rem for design system tokens (font sizes, spacing scale, container widths). em for component-local relationships (icon next to text in a button — 0.875em keeps it proportionate).
Why clamp() replaced the media-query waltz
Before clamp(), fluid typography meant declaring three sizes at three breakpoints. clamp() collapses that into a single line that interpolates linearly. Every modern browser supports it. Every modern design system uses it.
Use cases
- Migrating a fixed-px design system to rem-based: drop in pixel values, get the rem equivalents to paste into your tokens.
- Generating fluid heading sizes: H1 from 32px (mobile) to 64px (desktop) becomes a single
clamp(). - Tuning section padding: section padding that scales with the viewport feels more polished than fixed values that look cramped on small screens.
- Component spacing tokens: when porting from Figma’s pixel grid to a rem-based code system, this is the conversion you do all day.