CSS Units Converter

px (pixel) is an absolute unit tied to screen pixels — it never changes based on user preferences. rem (root em) is relative to the root element font size (the <html> element), defaulting to 16px in most browsers. Changing the root font size scales everything in rem. em is relative to the nearest ancestor's font size — it can compound unexpectedly when nested. For font sizes and spacing, rem is generally the safest choice because it respects user accessibility settings (browser zoom and font size preferences).

Accessibility. Users can change their browser's default font size (Settings → Fonts) to compensate for vision difficulties. When you use px for font sizes, these user preferences are overridden and the text ignores the user's desired size. Using rem means your font sizes scale proportionally with user preferences. WCAG 2.1 Success Criterion 1.4.4 requires text to be resizable up to 200% without loss of content or functionality — rem helps meet this requirement.

The default browser base font size is 16px, which means 1rem = 16px. This is the most common setting and this tool defaults to 16px. Some developers set html { font-size: 62.5% } to make 1rem = 10px, simplifying math (e.g., 24px = 2.4rem). However, this approach overrides user font size preferences and is not recommended for accessibility. If you use a different base font size, enter it in the "Root Font Size" field.

vw (viewport width) and vh (viewport height) are relative to the browser viewport dimensions. 1vw = 1% of the viewport width. Use vw for fluid typography that scales with the viewport: font-size: clamp(1rem, 2.5vw, 2rem). Use vh for full-height sections: height: 100vh. Use vw/vh sparingly for spacing — viewport-relative spacing can feel too large on wide screens. On mobile, 100vh has a known issue with browser chrome (address bar); use 100dvh (dynamic viewport height) for more predictable results.

In the context of font-size, em and % behave identically — both are relative to the parent element's font size. 1em = 100%. The difference appears with other properties: em always refers to the current element's font size (not parent) when used for margin, padding, and width. So if an element has font-size: 1.5rem and padding: 1em, the padding is 1.5 × 16px = 24px. For layout spacing relative to text size, em on padding/margin is useful for components that should scale with their own font size.

pt (point) is a typographic unit from print design where 1pt = 1/72 inch. At 96dpi screen resolution, 1pt ≈ 1.333px. Points are rarely used in web development because they are not as predictable across screen densities. They appear in CSS when specifying print stylesheets (@media print) where physical paper dimensions are relevant, or when integrating with design assets from print-focused tools. For screen design, stick to px, rem, or em.

Use clamp(), which takes a minimum, a preferred (fluid) value, and a maximum: font-size: clamp(1rem, 0.5rem + 2vw, 2rem). The middle value usually mixes a rem base with a vw term so the text grows with the viewport, while the min and max stop it from getting too small on phones or absurdly large on wide monitors. This replaces a stack of media-query breakpoints with one line that scales continuously. Keep a rem in the preferred value (not pure vw) so the text still respects user zoom and stays accessible — pure-vw font sizing can prevent users from enlarging text, which fails WCAG. Convert your target px sizes to rem here, then drop them into the clamp().

Container query units size things relative to a CONTAINER's dimensions instead of the viewport. cqw is 1% of the query container's width, cqi 1% of its inline size (plus cqh, cqb, cqmin, cqmax). The point: a card component can scale its own padding and font size based on how wide the card is, not how wide the screen is — so the same component looks right whether it's in a narrow sidebar or a wide main column. That's something viewport units (vw/vh) fundamentally can't do, because they only know about the window. Use cqi/cqw inside an element whose ancestor has container-type set. They're supported in all current major browsers and are the modern answer to truly reusable, context-aware components.