CSS Units: px, %, em, rem, vw and vh

CSS units set sizes for text, spacing and boxes. Learn what px, %, em, rem, vw and vh mean, when to use each, and how max-width keeps text readable.

Absolute units: px

A pixel (px) is a fixed size. 16px is always 16px, no matter where it is. It's the easiest unit to understand, so it's a good place to start.

Pixels are great for things that should not change size, like a 1px border or a small shadow. The weakness: if a user sets a bigger default font size in their browser (many people with poor eyesight do this), text set in px will not grow with that setting. Text set in rem will.

Relative units: %, em and rem

Relative units are measured compared to something else. They make your design flexible.

• % is a percentage of the parent element. width: 50% means half the width of the parent.
• em is relative to the font size of the current element. If the font size is 20px, then 1em = 20px and 2em = 40px.
• rem means "root em". It is relative to the font size of the root element, <html>. The browser default is 16px, so 1rem = 16px and 1.5rem = 24px.

The difference between em and rem matters when you nest elements. em font sizes multiply: a list inside a list, both with font-size: 1.2em, gets bigger and bigger. rem always looks back to the same root value, so it's predictable.

<h1>Fresh Coffee Daily</h1>
<p>Order online and pick up in five minutes.</p>
<a class="button" href="/order">Order now</a>
<a class="button button-big" href="/menu">See the menu</a>

body {
  font-size: 1rem;    /* 16px by default */
}

h1 {
  font-size: 2.5rem;  /* 40px */
}

.button {
  display: inline-block;
  font-size: 1rem;
  padding: 0.5em 1em; /* grows with the button's own font size */
  background-color: #6d4c41;
  color: white;
}

.button-big {
  font-size: 1.5rem;
}

Headings and body text use rem, so they scale with the user's preference. The button padding uses em, so the big button's padding grows automatically to match its bigger text. You don't need to set new padding.

Viewport units: vw and vh

The viewport is the visible area of the browser window. Viewport units are a percentage of it.

• 1vw = 1% of the viewport width.
• 1vh = 1% of the viewport height.

<section class="welcome">
  <h1>Welcome to Sunrise Yoga</h1>
</section>

.welcome {
  min-height: 100vh;
  background-color: #ffe0b2;
  padding: 2rem;
}

The welcome section fills at least the full height of the screen, whatever the device. min-height lets it grow taller if the content needs more space.

Note: On phones, 100vh can be a bit taller than the visible area, because the browser address bar appears and disappears. Modern browsers support 100dvh ("dynamic viewport height"), which adjusts to this. You can use min-height: 100dvh; for full-screen sections on mobile.

How to choose a CSS unit: a simple rule of thumb

You don't need to think hard every time. This table covers most beginner situations:

Use	Unit	Example
Font sizes	rem	font-size: 1.125rem;
Spacing (padding, margin)	rem or em	padding: 1rem;
Borders and small details	px	border: 1px solid #ccc;
Widths inside a layout	%	width: 50%;
Full-screen sections	vh or dvh	min-height: 100vh;
Line height	no unit	line-height: 1.6;

Common mistake: Writing a unit with a space, like 2 rem, or leaving out the unit, like width: 300;. Both are invalid and the browser ignores them. Only 0 and line-height work well without a unit.

Using max-width for readable text

Long lines of text are tiring to read. Your eyes lose their place when jumping back to the start of the next line. A comfortable line is about 60–75 characters long.

The ch unit is perfect here: 1ch is about the width of one character. Combine it with max-width, which means "be as wide as you can, but never wider than this".

.article {
  max-width: 65ch;
  margin: 0 auto;
  padding: 0 1rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

On a big screen, the article stays at a pleasant reading width in the middle. On a phone, it simply takes the full width with a little padding. Use max-width instead of width whenever you want a box to shrink on small screens.

Practice exercise

Build a simple article page. Set the heading to 2.25rem, the text to 1.125rem, and put the article in a container with max-width: 65ch and margin: 0 auto. Add a top banner with min-height: 40vh. Then change your browser's default font size in its settings and see how the rem text grows.

Hint: in Chrome, the setting is under Settings, Appearance, Font size. Pixel-based borders should stay the same.

Key takeaways

• px is fixed; good for borders and small details.
• % is relative to the parent; em to the element's font size; rem to the root font size.
• Use rem for font sizes so text respects the user's settings.
• vw and vh are percentages of the browser window.
• Use max-width (for example 65ch) to keep text lines readable.