Enter sizes in pixels and get a clamp() value in rem. Set your root font size so the conversion matches your stylesheet.
Why clamp() in rem
Pixels ignore the font size a reader sets in their browser. Rem values scale with it, which supports the WCAG requirement that text can be resized to 200% without loss of content. This calculator converts your pixel inputs to rem for you.
The conversion
rem = px / root font size
16px / 16 = 1rem
Using a custom root size
If your CSS sets html { font-size: 62.5% }, your root is 10px, so enter 10 in the root field. Leave it at 16 if you have not changed the root size.
Quick reference
With a 16px root: 12px is 0.75rem, 14px is 0.875rem, 16px is 1rem, 18px is 1.125rem, 20px is 1.25rem, 24px is 1.5rem, 32px is 2rem and 48px is 3rem.
Example
A body size of 16px at 320px wide and 20px at 1280px wide converts to clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem).
Related tools
For a full range of sizes use the fluid typography calculator, or the general clamp calculator.
Frequently asked questions
How do I convert px to rem in clamp()?
Divide each pixel value by the root font size, usually 16. Convert the minimum, the maximum and the fixed part of the preferred value. The vw part stays as it is.
My site uses a 62.5% root. What do I enter?
Enter 10 in the root font size field. The calculator then divides by 10 instead of 16.
Is rem better than px inside clamp()?
Yes for text and spacing. Rem follows the reader browser settings, so enlarged text stays enlarged.
Why not just use px?
Pixel values do not scale with the browser font size setting, so readers who raise their default text size would see no change.
Does the root font size change the vw part?
No. Only the fixed part and the limits are divided by the root size. The vw part depends on the viewport, not on the root.