PX ↔ REM ↔ EM Converter
Convert CSS units between pixels, REM and EM.
Base Font Size
Set the base font-size used for REM and EM conversion.
Default: 16px
PX → REM / EM
Convert pixels into REM and EM.
REM → PX
Convert REM into pixels using the base font-size.
EM → PX
Convert EM into pixels using the base font-size.
Conversion reference
1rem = base font-size
1em = base font-size
32px = 2rem (when base is 16px)
32px = 2em (when base is 16px)
REM is relative to the root font-size. EM is relative to the current element's font-size.
About PX to REM Converter
Convert CSS pixel values to REM and EM units using a customizable base font-size. This tool is useful for responsive web design, CSS development and converting fixed pixel values into relative units.
How to use PX to REM Converter
- Set the base font-size, such as 16px.
- Enter a PX, REM or EM value.
- Click Convert to calculate the corresponding CSS value.
- Use the Copy button to copy the result.
What are PX, REM and EM?
| Unit | Meaning | Relative to |
|---|---|---|
| px | Pixel | Fixed CSS length |
| rem | Root em | Root element font-size |
| em | Em unit | Current element's font-size |
Common PX to REM conversions
| PX | REM |
|---|---|
| 8px | 0.5rem |
| 16px | 1rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
These examples use a 16px base font-size.
PX vs REM vs EM
PX is a fixed CSS length, while REM and EM are relative units. REM is based on the root element's font-size. EM is based on the font-size of the current element or its relevant parent context. Relative units can make CSS layouts and typography easier to scale across different screen sizes and accessibility settings.
When should you use REM?
REM is commonly used for typography, spacing and component sizing when you want values to scale relative to the root font-size. It can make a design system easier to maintain because changing the root font-size can affect multiple REM-based values consistently.
When should you use EM?
EM is useful when a value should scale with the font-size of a component or its surrounding context. It is often useful for component-level typography, padding and spacing that should respond to the component's own font-size.
Is my input uploaded to a server?
No. The conversion calculations are performed directly in your browser. The values entered into this converter are not sent to a server by the conversion logic.