Free tools
PX to REM converter
Convert values between pixels and rem with your root font size. The default root font size is 16px. Webflow accepts rem in all size fields. With rem, text and spacing can scale.
24px = 1.5rem
| PX | REM (root 16px) |
|---|---|
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 96px | 6rem |
How to use it
- Set your root font size.
- Type a value in px or rem.
- Copy the result.
The formula
rem = px ÷ root font size. With a 16px root, 24px is 1.5rem and 0.75rem is 12px.
How to use rem in Webflow
Type the unit directly into a Style panel field, for example 1.5rem. If your site sets a different font size on the Body (All pages) tag, rem does not change. The rem unit follows the html element.
Questions
What is 1rem in pixels?
1rem is 16px in all browsers by default. If a site changes the font size of the html element, 1rem changes too.
Should I use rem or px in Webflow?
Use rem for font sizes and most spacing. Then the sizes change with the browser settings of the visitor. Use px for borders and small fixed details.
More free tools
HTML to Webflow converterConvert HTML and CSS to native Webflow elements on your clipboard.Tailwind to CSSConvert Tailwind classes to plain CSS with the real Tailwind compiler.HEX to HSLA for WebflowConvert HEX, RGB and HSL colours to HSLA in the exact format that Webflow uses for swatches and variables.Fluid clamp() generatorMake a CSS clamp() value that scales smoothly between 2 screen widths.