Free tool
PX to REM Converter: Any Base Font Size
Convert a value, paste a block of CSS and change every px to rem, build a fluid clamp() size, or turn a list of sizes into CSS variables. It handles any base size, not only 16px, and remembers yours.
Size at this width:
Fluid type grows with the screen.
Everything runs in your browser. Nothing is uploaded.
How the converter works
The tool has four modes. Convert turns one value into rem, em, points, a percentage of the base and vw, and every field updates as you type. Convert CSS takes a block of CSS and changes every pixel value to rem in one go. Fluid type builds a clamp() size that grows with the screen. Size list turns a list of pixel sizes into CSS variables. The base font size sits at the side, and the tool remembers it on your device.
The rule behind it is one division. A rem value is the pixel value divided by the base size, and the pixel value is the rem value times the base size. At a base of 16px, 24px is 1.5rem, and 0.875rem is 14px. Points are pixels times 0.75, a percentage is the pixel value over the base, and vw is the pixel value over the screen width you enter.
Why use rem instead of px
According to MDN, a rem is relative to the font size of the root element, and 16px is the common browser default, though user settings can change it. Many people raise their default text size for legibility, MDN notes, and absolute units like px do not follow that choice. MDN recommends relative units such as em and rem for font sizes. That is the main reason designers move type and spacing to rem.
| Unit | Relative to | Good for |
|---|---|---|
| px | Nothing, it is fixed | Borders, thin lines, shadows |
| rem | The root font size | Type, spacing, widths of text blocks |
| em | The font size of the element itself (or, on font-size, its parent) | Padding that should grow with the text of one button or label |
Sources: MDN, CSS length (page modified 8 July 2026) and clamp() (modified 12 August 2026), read 22 October 2026.
Converting a stylesheet
Paste a rule or a whole file into the CSS tab and every px value becomes rem at your base size. Two switches keep the result safe: one leaves values of 1px or less as px, since hairline borders should stay crisp, and one leaves media query conditions alone. The count of changed values is shown above the result. Read the output before you paste it back, because a few values, such as a width that must match an image, may be better left in px.
Fluid type with clamp()
The Fluid type tab asks for the smallest size, the largest size and the two screen widths between which the size should grow. It gives you a clamp() value, which MDN describes as the same as taking the larger of the minimum and the smaller of the preferred value and the maximum. A slider lets you try any screen width and see the resulting size. For text, MDN says the maximum should be a relative unit and at least twice the minimum, so the text can reach 200% when a visitor zooms. The tool warns you when your range is narrower than that.
The base size trick, and why to be careful
Some developers set the root font size to 62.5%, so that 1rem equals 10px and the maths is easy. It works, but it changes the size of everything that is not set in rem, including text in plugins and embeds. If you use it, set the body text back to a normal size. The base presets at the side include 10 so you can see the numbers it gives.
Using rem in a design tool or builder
Check whether your builder's size field accepts rem, since many do. Figma designs are often in px, so when you hand a design over, convert the type scale once with the Size list tab and keep the same ratio between sizes. If you are planning a rebuild, our web design and UI/UX page describes how we set type and spacing before development starts.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the base font size. At the usual base of 16px, 32px divided by 16 is 2rem. The Convert tab does it for you, and the CSS tab does it for a whole block of CSS.
What is the default base font size?
MDN says 16px is the common default, but user preferences can change it. Your own CSS can change it for the page too. Enter your own base in the tool if you have set one.
Is rem better than px for accessibility?
MDN notes that many users raise their default text size and that px values do not follow it, and it recommends relative units such as rem for font sizes.
How do I make font size fluid?
Use clamp() with a minimum, a preferred value that grows with the screen width, and a maximum. The Fluid type tab works the values out from the sizes and screen widths you choose.
Can I convert a whole stylesheet?
Yes. Paste the CSS into the CSS tab and every px value is changed to rem at your base size. You can leave 1px values and media queries as they are.
Does this tool send my numbers or CSS anywhere?
No. Everything runs in your browser, and only your base size and last value are saved on your own device.
More free tools
- Robots.txt generator: Build a robots.txt file and download it.
- Meta title and description checker: Count characters and preview the search result.
- OG image size checker: Check a share image against Meta's size rules.
- Color contrast checker: Test text and background colours against WCAG 2.2.