Saveku logo svg
Saveku

CSS Units Explained: Easy Guide to PX, REM, EM, VW, VH, etc

Learn how CSS units are explained in a simpler, easier way. Get to know the practical guide on how the PX, REM, EM, VW, and VH are used properly on screens.

|#guide#design#css

Reading Stats

0 min read
0 words
0 characters
0 paragraphs
0 links

Related Tool

PX to REM Converter

Convert pixels to REM units easily.

CSS Units Explained: Easy Guide to PX, REM, EM, VW, VH, etc

Choosing the right CSS unit feels like a small decision until your layout breaks on a tablet or your font sizes ignore a user's browser preferences.

The truth is, CSS units shape how your designs work across devices, and understanding when to use rem instead of px (or vw instead of %) can save you hours of debugging.

This guide covers every CSS unit you'll use in production, explains when to use each one, and includes code examples you can copy.

Absolute vs relative units

There are two kinds of CSS units.

  • Absolute units Fixed measurements that don't change. A pixel stays the same size regardless of screen or settings. Other absolute units like cm, mm, in, pt, and pc are mainly for print. For web design, you'll only use px.

  • Relative units Scale based on something else: a parent element, root font size, or viewport. This includes rem, em, vw, vh, and %. Relative units make responsive, accessible designs possible.

Every CSS unit worth knowing

px (Pixels)

The most common CSS unit. One px equals one device pixel on screen. Pixels are predictable and easy to understand.

border: 1px solid #d4d4d4;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

Use px for borders, shadows, and decorative details. Don't use it for font sizes and spacing because users need to adjust them.

Need to convert pixels to other measurements? Try the px to cm converter or px to mm converter for printing.

rem (Root EM)

rem is based on the root <html> font size, which defaults to 16px. So 1rem = 16px, 1.5rem = 24px.

html {
  font-size: 16px; /* browser default */
}

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

body {
  padding: 1.5rem;     /* 24px */
}

Use rem for font sizes and spacing. It respects user font size preferences, so your design scales when users change their settings. Not to force them.

Converting between the two? The px to rem converter and rem to px converter do the math for you instantly.

em (Relative to parent)

em is like rem but based on the parent element's font size. It's useful for components but can cause problems when nested.

.card {
  font-size: 18px;
}

.card p {
  font-size: 1em;      /* 18px, inherited from .card */
  margin-bottom: 0.5em; /* 9px */
}

The problem: nesting elements with em multiplies the sizes. 1.2em inside 1.2em becomes 1.44em, not 1.2em.

Use em when you want something to scale with its parent, like button padding. For everything else, use rem.

Confused about the difference? rem stays the same everywhere, em changes based on its parent.

Quickly converts between these units with the em to px converter or the px to em converter.

vw and vh (Viewport units)

1vw is 1% of the viewport width. 1vh is 1% of the viewport height. Use them for full-width sections, hero banners, and text that scales with the screen.

.hero {
  height: 100vh;
  width: 100vw;
}

.fluid-title {
  font-size: clamp(1.5rem, 4vw, 3.5rem);
}

Warning: 100vh on mobile can be tricky because the address bar changes the viewport size. Use dvh (dynamic viewport height) instead for better results.

% (Percentage)

Percentages are based on the parent element. width: 50% means half the parent's width. Use them for flexible layouts and containers.

.sidebar {
  width: 30%;
}

.main-content {
  width: 70%;
}

Quick CSS comparison table cheatsheet

Unit Based On Use For Scales?
px None (Absolute) Borders, shadows, details No
rem Root font size Font sizes, spacing Yes
em Parent font size Component scaling Yes
vw Viewport width Full-width sections Yes
vh Viewport height Full-height sections Yes
% Parent element Flexible widths Yes
cm Centimeters Print No
mm Millimeters Print No

For quick conversions between any of these: cm to px, mm to px, in to px, and so on.

Why rem and em matter for accessibility

1 in 4 users change their browser font size for vision or comfort. Using px ignores this. Using rem respects and grows with it.

Screen readers and zoom work better with rem. WCAG guidelines recommend against fixed font sizes because relative units keep content readable at high zoom levels.

The practical rule: use rem for anything a user should be able to scale. Use px for anything that should stay fixed regardless of preferences.

FAQ

When should I use rem instead of px in CSS? Use rem for font sizes, margins, and padding. This makes sure your layout respects user font preferences and scales properly across devices. Use px for borders, shadows, and decorative details.

What is the difference between em and rem in CSS? rem is based on the root font size and stays the same everywhere. em is based on the parent and changes when nested. Use rem for consistency.

How do I convert px to rem for responsive design? Divide pixels by 16 (the default root size). So 24px / 16 = 1.5rem. Or use the px to rem converter to do it for you automatically.

Do viewport units work on mobile? Yes, but 100vh is tricky on mobile because the address bar changes size. Use 100dvh (dynamic viewport height) instead for better results.

Is there a performance difference between CSS units? No. The browser converts all units to pixels anyway. Your choice affects how your design looks and works, not how fast it loads.

View all posts