What is whatunit.com?

Updated

whatunit.com is a single-purpose decision aid for choosing CSS length units. Its page asks "What CSS length unit should you use?" and answers with an interactive flowchart: you click and drag to move around the chart and use ctrl/cmd + mouse wheel to zoom in and out. It is useful when you are writing CSS and are unsure whether a given length should be expressed in px, em, rem, %, vw, vh, or another unit, and you want a quick, visual way to reason through the choice instead of guessing. The site also invites visitors to sign up for a weekly CSS newsletter.

What the site actually provides

Based on the page content, the offering is narrow and concrete:

  • A decision flowchart for CSS length units. The chart is the core tool, framed as the answer to the question in the page heading.
  • Interactive navigation. Click and drag to pan across the flowchart; ctrl/cmd + mouse wheel to zoom in and out.
  • A newsletter signup. The page notes that if you find the tool useful, you can consider signing up for a weekly newsletter to "keep on top of your CSS game."

Nothing on the page indicates pricing, accounts, or login requirements, so treat access details as unstated rather than assuming the tool is free or gated.

When this site is the right stop

Reach for whatunit.com when the question is which unit, not how a unit works. Typical moments:

  • You are choosing between a fixed and a relative unit for a spacing, font-size, or layout value and want a structured prompt for the trade-offs.
  • You are reviewing someone else's CSS and want a second opinion on whether a unit choice is defensible.
  • You are teaching or explaining CSS units and want a visual aid to walk through the decision.

It is less suited to looking up syntax, browser support, or the precise computed behavior of a unit — the page presents a flowchart, not reference documentation.

How to use the flowchart

  1. Open whatunit.com.
  2. Read the starting question in the heading and locate the first decision node in the chart.
  3. Pan by clicking and dragging so you can follow the branch that matches your situation.
  4. Zoom with ctrl/cmd + mouse wheel when labels or branches are too small or too spread out to read.
  5. Follow the branches until you reach a recommended unit, then apply it to the CSS value you are writing.

Expected result: you end at a specific unit recommendation tied to the conditions you followed, rather than a general list of every unit.

Common sticking points

  • Losing your place while panning. Because the chart is navigated by dragging, it is easy to drift away from the branch you were reading. Zoom out slightly to reorient before continuing.
  • Zoom not responding. The page specifies ctrl/cmd + mouse wheel, not pinch or a plain scroll, so use the modifier key.
  • Expecting a searchable reference. The tool is a flowchart; if you need definitions or compatibility tables, you will need another source alongside it.

Related option

If you want ongoing CSS guidance rather than a one-off unit decision, the site's weekly newsletter signup is the adjacent offering mentioned on the page. Use the flowchart for the immediate choice and the newsletter if you want recurring material.