Convert between px, rem, em, vw, vh, pt, and percentage CSS units with a customizable base font size.
| Unit | Type | Relative To |
|---|---|---|
| px | Absolute | Screen pixel (1/96 inch) |
| rem | Relative | Root element font-size |
| em | Relative | Parent element font-size |
| pt | Absolute | 1/72 inch (print) |
| vw | Relative | 1% of viewport width |
| vh | Relative | 1% of viewport height |
| % | Relative | Parent element size |
Browsers default to 16px. Users can change this in their settings, which is why rem units are more accessible than px.
Use rem for consistency (always relative to root). Use em when you want sizing to cascade with parent font-size, such as inside a component.
Enter a value in any CSS unit (px, em, rem, %, vw, vh, pt, cm, mm, in) and the calculator converts to all other units based on your specified base font size and viewport.
1rem = root font-size (default 16px). 1em = parent element's font-size. 1in = 96px = 72pt. 1cm = 37.8px. 1vw = 1% of viewport width.
At 16px root font: 1.5rem = 24px. 2em in a 14px parent = 28px. 100vw on a 1920px screen = 1920px.
Use rem for typography (scales with user preferences). Use em for component-internal spacing. Use px for borders and shadows. Use vw/vh for full-screen layouts but combine with min/max for safety.