CSS Unit Converter Guide: px, rem, em, vw, vh Explained

Choosing the right CSS unit is one of the most impactful decisions you make when writing stylesheets. The unit you pick determines how elements scale across different screen sizes, how they respond to user preferences like browser font size settings, and how predictable your layout behaves. Yet many developers default to pixels out of habit, missing out on the flexibility and accessibility benefits that relative units provide. This guide covers every major CSS unit, explains when to use each one, shows you how to convert between them, and provides practical best practices for modern responsive design.

Understanding CSS Unit Categories

CSS units fall into two broad categories: absolute and relative. Absolute units have a fixed physical size, while relative units derive their computed value from another reference point. Understanding this distinction is the foundation for making informed unit choices.

Absolute Units

Absolute units are fixed-size measurements. The most commonly used absolute unit in web development is the pixel (px). Other absolute units include points (pt), centimeters (cm), millimeters (mm), and inches (in). These units are primarily useful for print stylesheets or when you need a measurement that should not change regardless of context. In screen-based CSS, px is the only absolute unit you will use regularly.

Relative Units

Relative units compute their final value based on a reference. em is relative to the current element's font size, rem is relative to the root element's font size, vw and vh are relative to the viewport dimensions, and percentages are relative to the parent element. Relative units are the backbone of responsive and accessible design because they allow your layout to adapt to different contexts automatically.

Pixels (px): The Baseline

The pixel is the most intuitive CSS unit because it maps directly to screen pixels (with some caveats around device pixel ratios). A px value is always the same regardless of context, which makes it predictable and easy to reason about. However, this predictability comes at a cost: pixel-based sizing does not scale when users change their browser's default font size, which creates accessibility problems.

When to Use px

Border widths: A 1px border should remain 1px regardless of font size settings.
Box shadows: Shadow offsets and blur radii are typically best in pixels for consistent visual effects.
Fine details: Any value where scaling would break the visual design, such as hairline dividers or precise icon positioning.
Root font size: Setting html { font-size: 16px; } as a baseline is a common pattern, though you should respect the user's browser default.

When to Avoid px

Avoid using px for font sizes, padding, margins, and layout dimensions that should adapt to user preferences. A user who increases their browser font size to 20px expects all text to scale accordingly, but px-based font sizes will not respond to this change.

rem: Root-Relative Sizing

The rem unit (root em) is relative to the font size of the root element (<html>). In most browsers, the default root font size is 16px, so 1rem = 16px, 0.5rem = 8px, and 2rem = 32px. The critical advantage of rem is that it scales when users change their browser's default font size, making it the best choice for accessibility.

Converting px to rem

The conversion formula is straightforward: divide the pixel value by the root font size.

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

The 62.5% Trick

Many developers find the math of dividing by 16 cumbersome. A popular technique is to set the root font size to 62.5%, which makes 1rem equal to 10px. This simplifies mental math: 14px becomes 1.4rem, 24px becomes 2.4rem, and so on.

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

          Accessibility Note: The 62.5% trick works because it
          still respects user font size preferences. Setting
          font-size: 62.5% on the root element is 62.5% of the
          user's chosen default, so if a user sets their browser to 20px, the
          root becomes 12.5px and all rem values scale proportionally. Never set
          the root font size to a fixed px value, as this overrides user
          preferences.
        

em: Context-Relative Sizing

The em unit is relative to the font size of the current element (or its parent for properties other than font-size). This means 1em equals the current font size, and em values compound when elements are nested. This compounding behavior can be both powerful and confusing.

The Compounding Problem

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

Each nested element multiplies the font size, leading to exponential growth. This is why rem is generally preferred for font sizes. However, em shines in specific use cases where you want component-level scaling.

When to Use em

Component padding and margins: When you want spacing to scale with the component's font size, em keeps everything proportional. If you increase the font size of a button, its padding scales automatically.
Media query breakpoints: Some developers prefer em-based breakpoints because they scale with user font size preferences, ensuring layouts adapt at appropriate content widths.
Icon sizing within components: Icons sized in em scale proportionally with the surrounding text.

Viewport Units: vw, vh, vmin, vmax

Viewport units are relative to the browser window dimensions. 1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height. vmin is the smaller of vw and vh, while vmax is the larger. These units are essential for creating layouts that respond to the available screen space.

Common Viewport Unit Use Cases

Use Case	Unit	Example
Full-screen hero sections	vh	`height: 100vh`
Fluid typography	vw + clamp	`font-size: clamp(1rem, 2.5vw, 2rem)`
Side-by-side layouts	vw	`width: 50vw`
Square elements	vmin	`width: 20vmin; height: 20vmin`
Full-viewport overlays	vw + vh	`width: 100vw; height: 100vh`

The Mobile vh Problem

On mobile browsers, 100vh does not always equal the visible viewport height. The browser's address bar and navigation controls consume space, but 100vh includes the area behind these controls. This results in content being cut off at the bottom of full-height sections. Modern CSS provides dvh (dynamic viewport height) as a solution, which accounts for the dynamic toolbar. Alternatively, use JavaScript to set a CSS custom property based on window.innerHeight.

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

New Viewport Units: svh, lvh, dvh

CSS introduced three new viewport height units to solve the mobile viewport problem:

svh (small viewport height): The viewport height when all browser UI is visible (address bar expanded).
lvh (large viewport height): The viewport height when browser UI is minimized (address bar collapsed).
dvh (dynamic viewport height): The current viewport height, changing as the browser UI expands or collapses.

The same small/large/dynamic variants exist for width (svw, lvw, dvw) and the min/max units (svmin, lvmin, dvmin, etc.). Use dvh for full-screen layouts on mobile, svh when you need to guarantee content fits without scrolling, and lvh when you want to fill the maximum possible space.

Fluid Typography with clamp()

The CSS clamp() function is a game-changer for responsive typography. It takes three values: a minimum, a preferred value, and a maximum. The browser selects the preferred value but clamps it between the minimum and maximum bounds.

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

This approach gives you the benefits of viewport-based scaling without the risk of text becoming too small on mobile or too large on desktop. It eliminates the need for media query breakpoints for font sizing, reducing CSS complexity significantly.

Conversion Reference Table

Use this table as a quick reference for common conversions. All values assume a 16px root font size and a 1920x1080 viewport.

px	rem	em (at 16px)	vw (1920px)	% (of 16px)
8px	0.5rem	0.5em	0.417vw	50%
12px	0.75rem	0.75em	0.625vw	75%
16px	1rem	1em	0.833vw	100%
20px	1.25rem	1.25em	1.042vw	125%
24px	1.5rem	1.5em	1.25vw	150%
32px	2rem	2em	1.667vw	200%
48px	3rem	3em	2.5vw	300%
64px	4rem	4em	3.333vw	400%

Best Practices for CSS Units

Use rem for font sizes: This is the single most important rule. rem-based font sizes respect user preferences and scale consistently across your entire application.
Use em for component spacing: Padding and margins within components benefit from em because they scale proportionally when the component's font size changes.
Use px for borders and fine details: Values that should not scale with font size, such as 1px borders and shadow offsets, belong in pixels.
Use percentages for layout widths: Flexible layouts use percentage-based widths for columns and containers, allowing content to reflow across screen sizes.
Use viewport units for full-screen elements: Hero sections, overlays, and any element that should fill the viewport benefit from vh and vw.
Use clamp() for fluid typography: Replace media query breakpoints for font sizes with clamp() to create smooth scaling between minimum and maximum values.
Never set root font-size in px: Always use a percentage (like 62.5%) or leave it at the browser default. Setting it in pixels overrides the user's accessibility preferences.
Be consistent: Pick a unit strategy for your project and stick with it. Mixing units randomly makes the codebase harder to maintain and debug.

Need to convert between CSS units quickly? Try our free online CSS Unit Converter. Convert px to rem, em to px, viewport units, and more with instant results.

CSS Unit Converter

Frequently Asked Questions

Should I use px or rem for font sizes?

Use rem for font sizes in most cases. rem units are relative to the root font size, so they scale when users change their browser's default font size. This improves accessibility. Use px only for fine details like borders, shadows, or when you need pixel-perfect precision that should not scale with user preferences.

What is the difference between em and rem?

em is relative to the font size of the parent element, while rem is relative to the root font size (typically 16px). em compounds when nested, which can lead to unexpected sizing. rem always references the same base, making it more predictable. Use rem for global sizing and em for component-level scaling where you want nested elements to scale proportionally.

How do I convert px to rem?

Divide the pixel value by the root font size (typically 16px). For example, 24px / 16 = 1.5rem. The formula is: rem = px / root-font-size. If the root font size is 16px, then 1rem = 16px, 0.5rem = 8px, 2rem = 32px. You can use an online CSS unit converter for quick conversions.

When should I use viewport units (vw, vh)?

Use viewport units when you want sizing relative to the browser window. Common use cases include full-screen hero sections (100vh), typography that scales with viewport width (clamp with vw), and layouts that should fill available space. Avoid using vw for body text alone as it can become too small on mobile or too large on wide screens.

What is the best CSS unit for responsive design?

There is no single best unit. A combination works best: rem for font sizes and spacing, percentages for widths within containers, viewport units for full-screen elements, and CSS clamp() for fluid typography that scales between minimum and maximum sizes. The key is understanding what each unit references and choosing accordingly.