CSS Unit Conversion Guide: px, rem, em, vh, and More
Master CSS units with this conversion guide. Learn when to use px, rem, em, vh, vw, and percentage units for responsive, accessible web designs.
Absolute vs. Relative Units
CSS units fall into two categories. Absolute units have fixed sizes regardless of context: px (pixels — 1/96th of an inch on screens), pt (points — 1/72nd of an inch, mainly for print), cm, mm, and in. Relative units scale based on something else: em (relative to the parent element's font size), rem (relative to the root element's font size), % (relative to the parent element), vh and vw (1% of viewport height and width), and the newer dvh and svh (dynamic and small viewport height, accounting for mobile browser chrome). Modern responsive design favors relative units because they adapt to different screen sizes, user font preferences, and zoom levels.
Understanding rem and em
The rem unit is relative to the root HTML element's font size, which browsers default to 16px. So 1rem = 16px, 1.5rem = 24px, and 0.875rem = 14px. This makes rem predictable and consistent throughout the document. The em unit is relative to the current element's (or parent's) computed font size, which means it compounds with nesting — a 1.2em font size inside a 1.2em parent produces 1.44 times the root size. Use rem for most sizing (margins, padding, font sizes, widths) because it scales with user preferences. Use em when you specifically want a property to scale relative to the element's own font size — for example, setting padding in em ensures it proportionally matches the text size.
Viewport Units and Responsive Design
Viewport units (vw, vh, vmin, vmax) are relative to the browser window dimensions. 1vw = 1% of viewport width, 1vh = 1% of viewport height. They are powerful for full-screen layouts: height: 100vh creates a full-viewport-height section. For responsive typography, use clamp() with viewport units: font-size: clamp(1rem, 2.5vw, 2rem) sets a fluid font size that scales with viewport width but stays within minimum and maximum bounds. Be cautious with vh on mobile — the address bar affects viewport height. The newer dvh (dynamic viewport height) and svh (small viewport height) units in modern browsers address this inconsistency.
Recommended Resources
Sponsored · We may earn a commission at no cost to you
Practical Conversion Reference
At the default 16px root font size: 1rem = 16px, 0.625rem = 10px, 0.75rem = 12px, 0.875rem = 14px, 1.125rem = 18px, 1.25rem = 20px, 1.5rem = 24px, 2rem = 32px, 2.5rem = 40px, 3rem = 48px. A popular trick is setting the root font size to 62.5% (10px), so 1rem = 10px, making mental math easier (1.6rem = 16px, 2.4rem = 24px). However, this approach can cause issues with third-party components expecting 16px defaults. For quick px-to-rem conversion, divide the pixel value by 16 (or by your root font size if changed). Use CSS custom properties (variables) for spacing scales to maintain consistency across a project.
Related Free Tools
Related Articles
Frequently Asked Questions
Should I use px or rem for font sizes?
Use rem for font sizes. When users change their browser's default font size (for accessibility), rem-based fonts scale accordingly while px-based fonts stay fixed. This makes rem the more accessible and user-friendly choice. The only exception is borders and shadows where you want a consistent 1px or 2px visual regardless of font size settings.
What is the difference between vw and percentage width?
Percentage width is relative to the parent element's width, while vw is relative to the viewport width. A div at 50% inside a 600px container is 300px wide. A div at 50vw is always 50% of the viewport width regardless of its container. Use percentage for elements that should scale within their parent and vw for elements that should relate to the full viewport.
When should I use em instead of rem?
Use em when you want a property to scale proportionally with the element's own font size. Common use cases include setting padding on buttons (so padding increases with larger text), icon sizes that should match adjacent text, and line-height. For most other purposes — margins, global spacing, media query breakpoints — rem is preferred because it does not compound with nesting.