PX → REM / EM Converter
Convert CSS pixel values to rem, em, pt and vw instantly
REM → PX
About the PX to REM Converter
This px to rem converter turns pixel values into rem or em against a base font size you set. Converting type and spacing to rem is what lets a layout respect a reader's browser font size instead of ignoring it.
Converting px to rem is the standard step when making a design accessible. A rem is a multiple of the root font size, so if a reader raises their browser default from 16px to 20px, every rem-based measurement scales with it. Pixel values do not move at all.
The base font size is the only input that matters, and 16px is the browser default. Some projects deliberately set the root to 62.5% so that 1rem equals 10px and conversion becomes trivial mental arithmetic — which is why the base is configurable here.
Use rem rather than em for most things. em compounds, because it resolves against the element's own font size, so nested elements multiply the effect in ways that are hard to predict. rem always resolves against the root, which makes it far easier to reason about.
How to use the PX to REM Converter
- Set the base font size. Enter your root font size, usually 16px.
- Enter the pixel value. Type the measurement you want converted.
- Read the rem value. The equivalent in rem, and em, appears immediately.
- Copy it. Take the value into your stylesheet.
PX to REM Converter features
- Converts px to rem, em and vw
- Converts back the other way as well
- Configurable base font size
- Updates as you type
- Copy the result
Frequently asked questions
Why use rem instead of px for type?
Because rem scales with the reader's browser font size and px does not. Someone who has set a larger default because they find small text hard to read gets nothing from a layout fixed in pixels — an accessibility problem, not a stylistic preference.
What base font size should I assume?
16px, the browser default, unless your project overrides it. Some codebases set the root to 62.5% so that 1rem equals 10px and the arithmetic is easier, which is why the base is configurable here.
Where should I still use px?
Anything that should not scale with text: hairline borders, small decorative icons, precise shadow offsets. Use rem for font sizes, spacing and anything that should grow with the type.
What is vw useful for?
Sizing relative to the viewport width, most often for large display type that should shrink on narrow screens. Pair it with clamp() so the value cannot become unreadably small or absurdly large.