CSS Unit Converter (px / rem / em / vh / vw)

Why rem instead of px

Browsers start at 16px, but people with low vision often raise the default font size in their browser settings. Text sized in rem grows with that setting; text sized in px does not. Page zoom enlarges both, but the font-size setting is what many readers rely on, and WCAG's resize-text criterion expects text to scale to 200% without loss. Size type, and the spacing around it, in rem, and keep px for hairlines and borders.

The em column and nesting

An em is relative to the element's own font size, which for font-size itself means the parent's. The em values here assume the parent is at the root size, which holds only at the top level. Inside a 0.875em element, 0.875em again gives 12.25px rather than 14px, and the shrinking compounds. That is why rem is the safer default and em suits spacing that should scale with its component's text.

The 62.5% base and viewport units

Setting html { font-size: 62.5% } makes 1rem equal 10px, which is easier arithmetic; enter 10 as the base size to match. It shrinks everything else sized in rem, including third-party components, so set a readable size on body again.

The vw and vh figures assume a 1440 × 900 viewport. On phones, 100vh can be taller than the visible area while the browser toolbar shows; 100svh and 100dvh are the units that account for it.

How to use it

1. Enter a pixel value (px) and root base size (default 16px).
2. Inspect calculated rem, em, vw, and vh values.
3. Copy ready-to-use CSS snippets or consult the scale table.

Privacy & limitations

Runs instantly in client-side JavaScript.