CSS Unit Converter
UI ToolsConvert CSS length units between px, rem, em, vw, vh, pt, cm, and mm. Set custom base font size and viewport dimensions for accurate responsive calculations.
px
px
px
px
px
| Unit | Value | CSS Value | Notes | |
|---|---|---|---|---|
| px | 16 | 16px | Absolute pixels | |
| rem | 1.0000 | 1.0000rem | Relative to root (16px) | |
| em | 1.0000 | 1.0000em | Relative to parent (16px) | |
| vw | 1.1111 | 1.1111vw | % of viewport width (1440px) | |
| vh | 1.7778 | 1.7778vh | % of viewport height (900px) | |
| % | 100.0000 | 100.0000% | % of parent font-size (16px) | |
| pt | 12.0000 | 12.0000pt | Points (1pt = 1.333px) | |
| pc | 1.0000 | 1.0000pc | Picas (1pc = 16px) |
About CSS Unit Converter
The CSS Unit Converter eliminates the mental arithmetic of converting between CSS length units. Enter a value in any unit — pixels, rem, em, vw, vh, pt, cm, or mm — and every other unit equivalent appears instantly. Configure the base font size (default 16 px) and viewport width/height to get precise values that match your actual project context, making it especially useful when working on responsive or accessibility-driven stylesheets.
Features
- ✓Converts between px, rem, em, vw, vh, vmin, vmax, pt, cm, mm, and in
- ✓Configurable root font size for accurate rem/em conversions
- ✓Configurable viewport width and height for vw/vh calculations
- ✓All units update simultaneously from any input field
- ✓Common base sizes quick-select: 14 px, 16 px, 18 px, 20 px
- ✓Copyable output for each unit value with one click
- ✓Relative-to-parent em calculation with nesting depth support
- ✓Explanation tooltip for each unit describing its reference point
Common Use Cases
- Convert a designer's pixel specification to rem for accessible typography
- Determine the vw value equivalent to a fixed pixel width at a given viewport
- Check whether a margin defined in em resolves correctly inside a nested component
- Calculate pt values when generating a print stylesheet from a screen design
- Verify that a media query breakpoint in rem matches the intended pixel threshold
Frequently Asked Questions
QWhat is the difference between rem and em?
`rem` is always relative to the HTML root font size, while `em` is relative to the nearest parent element's font size. This makes `rem` more predictable for spacing and `em` useful for component-local scaling.
QWhy do vw and vh depend on the viewport size?
1 vw equals 1% of the viewport width and 1 vh equals 1% of the viewport height. Set your target viewport dimensions in the converter to get the correct pixel equivalent.
QHow do I convert px to rem for accessibility best practices?
Divide the pixel value by your root font size. With a 16 px base, 24 px = 1.5 rem. The converter does this instantly — just type the pixel value in the px field.
QAre physical units like cm and mm accurate on screen?
CSS physical units map to fixed pixel ratios (1 cm = 37.8 px at 96 dpi) and are not calibrated to your monitor's actual physical size unless you use print media queries.