Emojar – free online tools

CSS Unit Visualizer

See how CSS length units resolve to pixels: set the root and parent font size, parent width and viewport size, and every unit — px, %, em, rem, vw, vh, vmin, vmax, ch, ex, pt, cm, mm and in — converts live, with bars and a to-scale box so you can see the difference.

This tool runs entirely in your browser.

Loading tool…

How to use the CSS Unit Visualizer

  1. 1Set the context: root font size (for rem), parent font size (for em), parent width (for %) and viewport size.
  2. 2Enter a value and unit, such as 10 rem, to see it in pixels and every other unit.
  3. 3Compare one of each unit in the bar chart.
  4. 4Size a box in any units to see it drawn inside the viewport to scale.

What is the CSS Unit Visualizer?

CSS units fall into four families. Absolute units (px, pt, cm, in) are fixed: 1in is always 96px in CSS. Font-relative units scale with text: rem follows the root font size, em follows the parent’s font size, ch is the width of the digit 0 and ex the height of the letter x. Viewport units are percentages of the browser window — 1vw is 1% of its width. Percentages refer to the parent element.

rem is the usual choice for font sizes and spacing because it respects the reader’s browser font-size setting without compounding like em does in nested elements. The ch and ex ratios on this page are measured in your browser for its default font, so they match what your CSS would actually produce.

Frequently asked questions

How many pixels is 1rem?

16px by default, because browsers set the root font size to 16px. If a user raises their default font size, or your CSS sets html { font-size }, 1rem changes with it.

What is the difference between em and rem?

rem is relative to the root (html) font size and is the same everywhere on the page. em is relative to the current element’s parent font size, so 1.2em inside 1.2em becomes 1.44 times the base.

Why does 100vh look too tall on phones?

Mobile browsers count the area behind the address bar. Use 100dvh (dynamic) or 100svh (small viewport) instead.

Is the CSS Unit Visualizer free and private?

Yes. The CSS Unit Visualizer is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.

Related tools

All developer tools →