Units: px, rem, % and more

Absolute and relative units

Every size in CSS (font sizes, widths, margins, borders) needs a unit. Units fall into two groups:

• Absolute: a fixed size. In practice that means px.
• Relative: a size worked out from something else, such as the font size, the parent's width or the size of the browser window.

Choosing well makes your pages adapt to different screens and to readers' own settings without extra work.

px

px is a CSS pixel. It is not always one physical dot on the screen: on a high-density phone, one CSS pixel may be two or three physical pixels, so things look the same size on different devices. px is predictable and perfect for borders, small fixed details and shadows.

rem: relative to the root

rem means "root em": a multiple of the font size on the html element. Browsers default that to 16px, so:

Here is the important part: people with low vision often raise the default font size in their browser settings, say to 20px. Text sized in rem grows with that choice; text fixed in px does not follow it. Use rem for font sizes, and it is a good choice for spacing too, so gaps grow in proportion with the text.

<style>
  html { font-size: 100%; } /* try 125% to imitate a reader's larger default */
  h2 { font-size: 2rem; margin-bottom: 0.5rem; }
  p { font-size: 1.125rem; }
  .fixed { font-size: 18px; }
</style>
<h2>A 2rem heading</h2>
<p>This paragraph is 1.125rem.</p>
<p class="fixed">This paragraph is a fixed 18px.</p>

Change 100% to 125% and watch the rem text grow while the px paragraph stays put.

em: relative to the current font size

em is a multiple of the current element's font size (for the font-size property itself, the parent's). It is useful for things that should scale with the text right next to them, such as the padding of a button:

.button { font-size: 1rem; padding: 0.5em 1em; }
.button.large { font-size: 1.25rem; } /* padding grows automatically */

The catch is that nested em font sizes compound: a list at 0.9em inside a list at 0.9em is 0.81 times the size, and so on. That is why rem is usually the safer choice for font sizes.

Percentages

% is relative to something on the parent, and what depends on the property. For width it is the parent's width:

<style>
  .parent { width: 300px; background: #eef; padding: 8px; }
  .child { width: 50%; background: steelblue; color: white; padding: 8px; }
</style>
<div class="parent"><div class="child">50% of 300px</div></div>

For font-size, a percentage is relative to the parent's font size (150% behaves like 1.5em).

Viewport units

The viewport is the visible area of the browser window.

• 1vw = 1% of the viewport width.
• 1vh = 1% of the viewport height.
• dvh, svh and lvh are newer variants of vh for phones, where the address bar slides in and out. 100dvh adjusts as the toolbars change; plain 100vh can be taller than the visible area on mobile.

min-height: 100dvh is a common way to make a hero section fill the screen. Be careful with font sizes in vw alone: text becomes tiny on phones and huge on wide monitors, and it ignores the reader's settings. If you want fluid text, combine units, for example font-size: clamp(1.5rem, 4vw, 3rem), which you will meet again in the responsive design lessons.

ch: line length

1ch is roughly the width of the "0" character in the current font. Lines of about 60 to 75 characters are the most comfortable to read, so this one line improves almost any article:

article p { max-width: 65ch; }

Unitless line-height

line-height is the one place where you should usually write no unit: line-height: 1.5 means 1.5 times each element's own font size, and it scales correctly everywhere. A fixed line-height: 24px stays 24px even for a 40px heading, making the lines overlap.

For quick conversions between everyday units (centimetres, inches and so on), the Unit Converter is handy; CSS physical units like cm exist but rarely match real centimetres on screens.

Common mistakes

• Fixed px font sizes everywhere, ignoring readers who enlarge their default text.
• Compounding em font sizes in nested elements.
• height: 100vh on mobile, hiding content behind the browser toolbar; use 100dvh or min-height.
• Font sizes in vw only, unreadable on small screens.
• Line heights with px units.

Exercise

Style an article so that: the body text is 1.125rem with a unitless line height of 1.6; headings are 2rem; paragraphs are no wider than 65ch; a call-to-action button has padding in em so it grows with its font size; and an introductory section fills at least the full visible screen height on phones.

body { font-size: 1.125rem; line-height: 1.6; }
h1, h2 { font-size: 2rem; }
article p { max-width: 65ch; }
.cta { font-size: 1rem; padding: 0.75em 1.5em; }
.intro { min-height: 100dvh; }