CSS units are one of the first things every web developer encounters, yet they remain one of the most commonly misunderstood topics. Whether you are setting a font size, defining a container width, or adjusting spacing, you need to pick the right unit. And once you start working with responsive designs, converting between units like px, rem, em, vw, and vh becomes a daily task.
This guide walks you through every major CSS unit, explains how they relate to each other, and shows you the fastest way to convert between them — so you can stop guessing and start coding with confidence.
Choosing the wrong unit can break your layout on different screen sizes. A fixed pixel width might look perfect on your 1440p monitor but overflow on a mobile phone. On the other hand, using viewport units for everything can make text unreadable on ultra-wide screens. The key is understanding what each unit does and when to reach for it.
Beyond layout concerns, modern CSS frameworks and design systems increasingly rely on relative units. Tailwind CSS, for example, uses rem values under the hood. If you want to customize these systems or build your own, you need to understand how unit conversions work.
The pixel is the most familiar CSS unit. One px in CSS does not literally equal one physical pixel on screen — browsers apply device pixel ratio scaling — but for practical purposes, you can think of it as a fixed, absolute unit.
min-width, max-height)The main drawback of px is its rigidity. A layout built entirely in pixels will not adapt when the user changes their browser font size or when the viewport shrinks. That is where relative units come in.
The rem unit is relative to the font size of the root element (usually <html>). By default, browsers set the root font size to 16px, which means 1rem = 16px, 2rem = 32px, and so on.
rem = px ÷ root-font-size px = rem × root-font-size
For example, if your design calls for 24px text and the root size is 16px:
24px ÷ 16 = 1.5rem
Using rem for font sizes means that changing the root font size will scale all typography proportionally. This is invaluable for accessibility: users who increase their browser font size get a consistent experience without any element breaking out of its container.
Many teams set a custom root font size as part of their design system. A common approach is 62.5% (which equals 10px), making the math easier: 1rem = 10px, 1.6rem = 16px, etc.
The em unit is relative to the font size of the element's parent, not the root. This distinction trips up a lot of developers.
em = target-size ÷ parent-font-size
Consider this nesting:
html { font-size: 16px; } /* root */
.section { font-size: 1.25em; } /* 20px — 16 × 1.25 */
.section p { font-size: 1.2em; } /* 24px — 20 × 1.2 */
That second em compounds on the parent, which is why deeply nested em values can produce unexpected sizes. For most projects, rem is the safer choice for typography, while em shines for component-local spacing.
1vw equals 1% of the viewport width. If the browser window is 1200px wide, 1vw = 12px. This unit is perfect for elements that should scale fluidly with the screen.
/* Full-width hero text */
.hero-title { font-size: 5vw; }
/* Fluid containers */
.container { width: 90vw; max-width: 1200px; }
The danger with vw is that text can become unreadable on very small or very large screens. Always pair vw-based font sizes with clamp():
font-size: clamp(1rem, 3vw + 0.5rem, 2.5rem);
This ensures the text never drops below 1rem or exceeds 2.5rem, while still scaling smoothly in between.
1vh equals 1% of the viewport height. This is the unit you reach for when you want a section to fill the screen, regardless of content length.
/* Full-height hero */
.hero { min-height: 100vh; }
On mobile browsers, 100vh can be taller than the visible area because it includes the space behind the address bar. The modern fix is to use 100dvh (dynamic viewport height), which adjusts as the browser chrome shows and hides:
height: 100dvh; /* adjusts when address bar hides */
Percentage is relative to the parent element's dimension. For width, it refers to the parent's width; for padding-top and padding-bottom, it refers to the parent's width (not height — a common source of confusion).
ch is the width of the "0" glyph in the current font, useful for limiting text line lengths: max-width: 65ch. ex is the height of the lowercase "x", less commonly used but handy for vertical alignment.
lh equals the computed line-height, and rlh equals the root line-height. These are useful when you want spacing to match your text rhythm exactly.
Manual math works for simple cases, but when you are converting dozens of values from a Figma mockup (which uses px) into a rem-based codebase, you need a faster method.
| From | To | Formula |
|---|---|---|
| px | rem | px ÷ root-font-size |
| rem | px | rem × root-font-size |
| px | em | px ÷ parent-font-size |
| vw | px | vw × viewport-width ÷ 100 |
| px | vw | px × 100 ÷ viewport-width |
The fastest approach is to use a dedicated converter. RiseTop's CSS Unit Converter lets you paste a px value, choose a target unit, and instantly get the result. It supports px, rem, em, vw, vh, pt, and % — all with configurable root and parent font sizes.
Let's walk through a real scenario. You receive a design with these specifications (all in px):
Converting to rem (root = 16px):
body { font-size: 1rem; } /* 16px */
h1 { font-size: 2.25rem; } /* 36px */
section { padding: 3rem 1.5rem; } /* 48px 24px */
.container { max-width: 75rem; } /* 1200px */
Converting to vw (viewport = 1440px):
h1 { font-size: 2.5vw; } /* 36px at 1440px */
.container { max-width: 83.33vw; } /* 1200px at 1440px */
Use rem as the default. It respects user preferences and scales predictably. Use em only when the size should be relative to its parent (like a label inside a card with a larger font). Avoid px for body text unless you have a very specific reason.
For global layout spacing, rem gives you a consistent scale. For component-internal spacing, em ensures the component scales if its font size changes. For responsive spacing, consider clamp() with a mix of rem and vw.
Use percentages, vw, or CSS Grid/Flexbox fractions (fr) for fluid layouts. Use px or rem for fixed sidebar widths, avatar sizes, and other elements with a defined physical dimension.
em is actually the recommended unit for media queries because it scales with the user's font size. If someone increases their browser font to 20px, a 768px breakpoint won't match the same visual threshold, but 48em will.
Understanding CSS units is not optional in modern web development. Whether you are building a responsive layout, creating an accessible design system, or just trying to match a mockup, knowing when to use px, rem, em, vw, or vh — and how to convert between them — will save you time and prevent bugs.
The conversion formulas are straightforward, but doing them by hand for dozens of values is tedious. Use a CSS unit converter to automate the math, and focus your energy on the design itself.
Try our free CSS Unit Converter — design, preview, and copy production-ready CSS instantly.
Open CSS Unit Converter →