Make units travel.
Keep the scale.
Convert PX, REM, and EM values with your own root size, replace pixel values across a CSS snippet, and generate a responsive clamp() declaration.
CSS unit converter
Translate one value
REM uses the root size. EM is shown using the same base as a practical estimate; a component's parent font size can change the real EM result.
font-size: 1.5rem;24px at a 16px root = 1.5rem
24px1.5rem1.5emConvert pixel declarations
0 pixel values converted
Generate a clamp() value
clamp(1.125rem, 0.625rem + 2.5vw, 2.5rem)Fluid value between 18px and 40px from 320px to 1200px.
The conversions are mathematical references. REM uses the root font size; EM depends on its parent context. The clamp generator keeps REM in its bounds by default, which helps text respond to browser font-size preferences.
What base size should I use?
Use the root font size in your project. Browsers commonly start at 16px, but a design system may choose another value.
Is EM always the same as REM?
No. REM references the root element, while EM references the current element's parent font size. This page uses the base size for a quick estimate and tells you where that assumption applies.
Why does the clamp output use REM?
The default keeps the minimum and maximum bounds in rem so text can respond to a reader's preferred browser font size. Switch to PX when exact screen bounds matter more than that behavior.