How to use the CSS Unit Converter
1. Enter a numeric value and select its unit (px, rem, em, pt, vw, or vh).
2. Adjust the base font size (default 16px for rem) and parent font size (for em) if needed.
3. All conversions appear instantly in the table — click the copy icon on any row to copy that CSS value.
What is it?
CSS uses many different units for length and size. Choosing the right unit is important for responsive design and accessibility. px (pixels) are absolute. rem (root em) scales with the browser's root font size — if the user changes their browser font size, rem-based layouts adapt. em scales with the parent element's font size. pt (points) are used in print media. vw/vh are percentages of the viewport width/height.
The most important conversion is px to rem: divide by the root font size (usually 16px). So 24px = 1.5rem. This matters for accessibility compliance, since rem respects the user's browser font size preference while px ignores it entirely.
Example
24px → rem (base: 16px)
px: 24px rem: 1.5rem em: 1.5em vw: 1.875vw (at 1280px viewport) pt: 18pt
1rem = 16px by default. If your CSS sets html { font-size: 62.5% }, then 1rem = 10px → 24px = 2.4rem.
Benefits
Convert px to rem without remembering the 16px base arithmetic
24px is 1.5rem at the browser default — get exact values instantly without dividing by 16 manually.
Calculate em values relative to the correct parent font size
em is context-dependent — enter your parent element's font size to get the correct relative value for nested elements.
Convert viewport units for responsive design verification
Find the px equivalent of 5vw at a specific viewport width to verify that your responsive values match the design spec.
Match design file pixel measurements to the right CSS units
Figma and Sketch output px — convert to rem or em for accessible, scalable layouts that respect user font size preferences.
Frequently asked questions
Why do my rem conversions use 16px as the base?
Browsers default to 16px as the root font size, making 1rem = 16px. The base font size input lets you customize this if your CSS overrides it (e.g., html { font-size: 62.5%; } makes 1rem = 10px, so 24px = 2.4rem).
What is the difference between rem and em?
rem (root em) is always relative to the root element's font size — consistent everywhere. em is relative to the parent element's font size — it cascades. Using rem gives more predictable sizing; em is useful when components should scale with their local context.
When should I use vw/vh?
vw (viewport width) and vh (viewport height) are percentages of the browser window. They're ideal for hero sections, full-screen layouts, and fluid typography. Be careful with vh on mobile browsers where the address bar affects the viewport height.