Why CSS units matter
Picking a CSS unit feels like a minor technical choice, but it has real consequences. Using px for font sizes means users who have set a larger browser font size in their accessibility settings will not benefit from their preference — your text stays fixed regardless. Using px for layout widths causes designs to break at unexpected viewport sizes. Understanding which unit to use in which context is foundational CSS knowledge that immediately improves everything you build.
px — pixels
1px is one CSS pixel. On high-DPI (Retina) displays, 1 CSS pixel maps to 2 physical pixels, but the browser handles this automatically — CSS pixels remain consistent.
Use px for: borders (border: 1px solid), box shadows, and precise visual details where you want exactly one pixel. Avoid px for: font sizes and layout widths where you want the design to respond to user preferences and screen size.
rem — root em
rem is relative to the root element's font size. By default, most browsers set this to 16px, so 1rem = 16px. But if a user has set their browser font size to 20px for accessibility, 1rem = 20px, and everything sized in rem scales proportionally. This is what makes rem the right choice for font sizes.
Use rem for: font sizes, padding, margins, gap values — anything that should scale with the user's base font preference. 1rem = 16px default, 1.5rem = 24px, 0.875rem = 14px.
em — relative to parent
em is relative to the element's own font size (for most properties) or the parent's font size (for font-size). If a button has font-size: 18px, then padding: 0.5em inside that button equals 9px — it scales with the button's text. This makes em excellent for component-internal spacing.
em can compound when nested (1.2em inside 1.2em = 1.44× the inherited size), which is why rem is safer for site-wide font sizes while em is better for component-level padding and margins.
% — percentage
Percentage is relative to the parent element's corresponding property. width: 50% makes an element half the width of its container. Percentages are fundamental to fluid layouts — a three-column grid with 33.33% columns naturally reflows based on available space.
vw and vh — viewport units
1vw = 1% of the viewport width. 100vh = the full visible browser window height. These are essential for full-screen layouts: height: 100vh creates a section that fills exactly the visible screen on any device.
On mobile browsers, 100vh includes the browser chrome height, which can hide content behind the address bar. The newer svh (small viewport height) and dvh (dynamic viewport height) units address this. dvh adjusts dynamically as browser chrome shows and hides.
ch — character width
ch equals the width of the "0" character in the current font — surprisingly useful for setting text column widths. width: 65ch creates a column of approximately 65 characters, a commonly recommended comfortable reading width.
My defaults
Font sizes: rem. Component padding: rem or em. Borders and fine details: px. Layout widths: % or grid/flexbox fr units. Section heights: vh. Text columns: ch. Once you internalise this pattern, it becomes automatic.