In this article
What Are CSS Units?
CSS units define the size of elements on a web page. They fall into two categories: absolute units (px, cm, mm, in, pt, pc) that have fixed physical sizes, and relative units (rem, em, vw, vh, vmin, vmax, %) that scale based on context like font size or viewport dimensions.
Modern responsive design relies heavily on relative units. The rem unit scales with the root font size (usually 16px), em scales with the parent element's font size, and viewport units (vw, vh) scale with the browser window, making layouts fluid across devices.
How CSS Unit Conversion Works
Converting between CSS units requires knowing the base context: the root font size for rem, the parent font size for em, and the viewport dimensions for vw/vh. Most conversions use simple multiplication or division.
- px to rem — divide pixel value by the root font size (default 16px), so 24px = 1.5rem when root is 16px
- rem to em — rem and em are equal when the element inherits the root font size; otherwise multiply by the ratio of parent to root font size
- px to vw/vh — divide pixel value by viewport width (or height) and multiply by 100, so 192px = 10vw on a 1920px-wide viewport
Try it free — no signup required
Convert CSS Units →When To Use CSS Unit Conversion
Converting between CSS units is a daily task in modern front-end development.
- Responsive design — convert fixed pixel mockups to rem or vw-based layouts that scale gracefully across screen sizes from mobile to desktop
- Accessibility — using rem units ensures text scales properly when users adjust their browser's default font size, a critical accessibility requirement
- Design system tokens — convert designer specifications (typically in pixels) to rem-based tokens that maintain consistent spacing and typography ratios
Frequently Asked Questions
Should I use rem or em for font sizes?
Use rem for most cases. Rem units are relative to the root font size, making them predictable regardless of nesting depth. Em units compound when nested (a 1.2em inside another 1.2em becomes 1.44x), which can cause unexpected sizing. Reserve em for specific components where scaling relative to the parent is intentional.
What is the default root font size in browsers?
All major browsers default to 16px as the root font size. This means 1rem = 16px unless overridden by CSS. Users can change this in browser settings for accessibility, which is why using rem instead of px for font sizes and spacing is important for accessible design.
When should I use viewport units instead of rem?
Use viewport units (vw, vh) for elements that should scale with the browser window rather than the font size. Common examples include full-screen hero sections (height: 100vh), fluid typography (clamp with vw), and responsive padding on containers. Avoid vw for body text — it ignores user font preferences.