PX, REM & CSS Units: The Complete Guide

Absolute vs Relative Units

CSS units fall into two categories. Absolute units have a fixed size regardless of context — they don't change when the parent element, root font size, or viewport dimensions change. Relative units are calculated based on something else: the parent's font size, the root font size, or the viewport.

In practice, most web work uses px, rem, and em for sizing, with viewport units for layout-level dimensions. The other units are useful in specific situations like constraining line lengths or creating responsive typography.

Pixels (px)

Pixels are the most intuitive CSS unit. One CSS pixel corresponds to one device-independent pixel — which on a 2x Retina display is actually two physical pixels. This abstraction means that 16px text looks the same physical size on a standard monitor and a high-DPI phone screen.

Pixels are predictable and precise, which makes them a natural choice for things like borders, shadows, and fine visual details where you want exact control. However, they have a significant limitation: they don't respond to user font-size preferences. If a user sets their browser default font size to 20px (for accessibility), text set in px stays fixed while text set in rem scales accordingly.

REM Units

REM stands for "root em." One rem equals the font size of the element, which defaults to 16px in all major browsers. This means 1rem = 16px, 1.5rem = 24px, 0.875rem = 14px, and so on.

The critical advantage of rem is that it scales with user preferences. When a user changes their browser's default font size (a common accessibility setting), every rem-based value adjusts proportionally. This is why rem is now the standard unit for font sizes, spacing, and component dimensions in modern CSS.

The 62.5% trick

Some developers set html { font-size: 62.5% } to make 1rem equal 10px, simplifying mental math: 1.6rem = 16px, 2rem = 20px. While this works, it requires resetting the body font size and can confuse third-party components that assume the default 16px root. Most teams today prefer sticking with the 16px default and using a converter tool for quick math.

EM Units

An em is relative to the font size of the element itself (for font-size) or its parent (for other properties). This makes em useful for component-internal spacing that should scale with the component's text size.

The compounding behavior of em is both its strength and its pitfall. If a parent sets font-size: 1.2em and a child also sets font-size: 1.2em, the child's actual font size is 1.2 × 1.2 = 1.44 times the grandparent's font size. This compounding doesn't happen with rem because rem always references the root, not the parent.

When to use em vs rem

Use rem for global sizing: font sizes, section spacing, layout dimensions. Use em for component-internal spacing that should scale proportionally when the component's font size changes — like padding inside a button, or margins between an icon and its label.

Viewport Units (vw, vh, svh, dvh)

Viewport units express sizes as a percentage of the browser window. 1vw is 1% of the viewport width, and 1vh is 1% of the viewport height. They're commonly used for full-screen hero sections, responsive font scaling, and fluid layouts.

A well-known problem with vh on mobile is that the browser's address bar changes height as you scroll, causing layout jumps. Modern browsers introduced new viewport units to address this: svh (small viewport height — excludes the address bar), lvh (large viewport height — includes it), and dvh (dynamic viewport height — updates in real time as the bar shows/hides).

Character & X-Height (ch, ex)

The ch unit equals the width of the "0" (zero) character in the current font. It's most useful for constraining line lengths — typography best practices suggest 45–75 characters per line for comfortable reading:

The ex unit equals the height of the lowercase "x" in the current font. It's occasionally used for vertical alignment relative to text, but it's far less common than ch. Both units change when the font changes, which makes them font-aware in a way that px and rem aren't.

Percentages

Percentages are relative to the parent element's corresponding dimension. width: 50% is half the parent's width. font-size: 120% is 1.2 times the parent's font size (similar to 1.2em). Percentages are essential for fluid grid layouts and are the basis for most responsive design patterns.

One common gotcha: padding and margin percentages are always calculated relative to the parent's width, even for top/bottom values. This is actually useful for creating aspect-ratio boxes (the "padding-top hack"), though the modern aspect-ratio CSS property is now a simpler solution.

Converting PX to REM

The conversion formula is straightforward: divide the pixel value by the root font size (default 16).

If you're working from a design file that specifies everything in pixels (as most Figma designs do), you'll need to convert these values when writing CSS. The PX to REM Converter and CSS Unit Converter can handle this instantly, or you can use CSS custom properties to keep the conversion in one place:

Fluid Typography with clamp()

The clamp() function sets a value that scales fluidly between a minimum and maximum, based on a preferred value (usually in viewport units). It's the modern solution for responsive typography that adapts smoothly without media query breakpoints:

The preferred (middle) value is typically a viewport-based calculation that determines how quickly the font scales. A common formula combines rem and vw for a smooth curve:

The CSS Clamp Calculator can generate these values for you — just enter your minimum font size, maximum font size, and the viewport range you want it to scale across.

Clamp isn't limited to font sizes. It works for any CSS property that accepts a length: padding, margins, widths, and more. Fluid spacing paired with fluid typography creates layouts that feel intentionally designed at every viewport width.

Which Unit to Use When

A practical rule of thumb: if it relates to text or spacing, use rem. If it's a fine visual detail like a border, use px. If it needs to fill or divide the viewport, use vw/vh or %. And when you want responsive scaling without breakpoints, reach for clamp().