CSS Units Explained: Why px, rem, em, vw, vh, and ch Matter (And When to Use Them)
You’ve been there: your web layout looks flawless on your oversized monitor, but the second you pull it up on your phone, the whole thing falls apart.
The usual suspect? How you’re measuring things in CSS. Back in the day, we’d just slap a pixel (px) value on every element and call it a day. But modern web design is entirely fluid. Your site has to look incredible on a massive ultra-wide screen, a tiny smartphone, and everything in between.
To pull that off without pulling your hair out, you have to get comfortable with CSS units. Let’s break down the big players—px, rem, em, vw, vh, and ch—using real-world analogies so they actually stick.
PX (Pixels): The Rigid Ruler
Think of a pixel as a classic wooden ruler. It’s an absolute unit. If you tell a box to be 300px wide, it’s staying exactly that size, whether it’s being viewed on a 4K TV or a smartwatch screen. If you’re ever curious how these digital units translate to physical printing dimensions, you can play around with a pixel to centimeter converter to see just how rigid they really are.
When to use it: Pixels are perfect for things that shouldn’t change size based on the user’s screen or preferences. Think of fine borders (border: 1px solid black), subtle box shadows, or defining the specific breakpoints in your media queries.
When to avoid it: Typography. If you hardcode your font size to 16px, you’re stubbornly overriding the user’s browser settings. If someone with poor eyesight has their default text bumped up to 24px for readability, your 16px rule forces them to squint. Don’t do that to your users!
REM (Root em): The Smart Tape Measure
If pixels are a rigid ruler, rem is a smart, expanding tape measure. “Rem” stands for “Root em,” and it scales based on the root font size of your document (the <html> element).
By default, most browsers set the root font size to 16px. So out of the box, 1rem = 16px, and 2rem = 32px.
Here’s where the magic happens: if a user changes their browser’s default font size to 20px because they need larger text, your 1rem automatically adjusts to 20px. The entire layout scales beautifully and respects the user’s preferences. If you’re updating an older, rigid site into a fluid layout, a pixel to rem converter will quickly become your best friend.
When to use it: Almost everywhere. Font sizes, margins, padding. It’s the absolute gold standard for accessible, responsive design today.
EM
The em unit is rem‘s mischievous cousin. Instead of looking at the main HTML font size, em looks at the font size of its immediate parent element. (Fun fact: the em unit originally comes from the width of the capital letter “M” in traditional metal typesetting—you can read up on its geeky history on Wikipedia).
If you have a <div> with a font size of 20px, any child element inside it with width: 2em will be 40px wide.
Why is this tricky? Because em values compound like Russian nesting dolls. If you nest lists inside lists, and each list has font-size: 1.2em, your text will keep multiplying and growing larger with every single level. It gets messy incredibly fast. If you’re trying to figure out the nesting math without breaking your layout, using a pixel to em converter can save you a massive headache.
When to use it: When you need a specific element to scale proportionally with its own text. It’s brilliant for sizing an SVG icon or a button’s padding to perfectly match the text right next to it.
VW and VH: The Window Watchers
These stand for Viewport Width (vw) and Viewport Height (vh).
Think of the viewport as the actual glass of the window you’re looking through (your browser window). 1vw is exactly 1% of the width of that window. 1vh is 1% of the height.
If you want a hero section to take up the entire screen the second a user lands on your page, just set height: 100vh. Boom. It fills the screen perfectly, no matter the device. Not sure how your standard pixel mockups translate to viewport percentages? Try running your numbers through a px to vw converter or a px to vh converter to dial in the perfect fit.
When to use it: Full-screen hero sections, fluid typography (making text scale smoothly as the browser window stretches or shrinks), and grid layouts that need to break out of standard containers.
CH: The Typography Secret Weapon
The ch unit simply stands for “character.” Specifically, it represents the width of the number “0” (zero) in whatever font you happen to be using.
Why should you care? Readability. Extremely long lines of text are exhausting to read because your eyes get lost trying to find the start of the next line. Typography experts generally agree that a comfortable line of text is around 60 to 75 characters long.
With the ch unit, you can easily enforce this golden rule right in your CSS!
When to use it: Controlling the maximum width of your reading content. Throwing a max-width: 65ch; on your article paragraphs ensures they never get too wide, keeping your readers happy and engaged.
The CSS Units Cheat Sheet
Pin this, screenshot it, or save it somewhere safe for your next coding session:
- PX (Pixel): Absolute and stubborn. Never changes. Best for thin borders and strict UI boundaries. Do not use for font sizes!
- REM (Root em): Relative to the browser’s default font size. Best for fonts, padding, and margins. Your go-to unit for an accessible web.
- EM (em): Relative to its parent’s font size. Compounds easily. Best for sizing icons or padding relative to the specific text next to it.
- VH / VW (Viewport units): 1% of the screen width or height. Best for full-screen hero banners or fluid layout elements.
- CH (Character): The width of the “0” character. Best for setting ideal paragraph widths (
max-width: 65ch) to make reading comfortable.
Frequently Asked Questions (FAQs)
What’s the main difference between rem and em?
Think of rem as looking at the big boss (the root HTML size), while em looks at its direct manager (the parent element’s size). Because em inherits from its parent, it can snowball out of control if you heavily nest elements. Stick to rem for general layout sizing, and save em for specific, localized tweaks.
Why do people say not to use px for fonts anymore?
It all boils down to accessibility. Pixels are stubborn. If a user sets their browser to display larger text because they have a hard time reading small print, px completely ignores that preference. Using rem respects their settings and scales your design naturally without breaking your layout.
Should I use % or vw/vh for widths and heights?
Percentages (%) size an element based on its parent container. Viewport units (vw/vh) size an element based on the entire screen (the browser window). Use % when you want a box to fill half of its container, and use vw/vh when you want a hero image to fill the whole screen, regardless of where it lives in your HTML structure.