How to Use the whatunit.com Flowchart to Choose a CSS Length Unit

Updated

Open whatunit.com and start at the top question of the flowchart, then answer each branch based on your situation until you reach a suggested unit. The site is a decision aid, not a CSS specification: it helps you narrow choices like px, em, rem, %, vw, and vh, but you still confirm the final choice against your layout, accessibility needs, and browser support requirements.

What the site actually provides

whatunit.com presents a single interactive flowchart titled "What CSS length unit should you use?" Its purpose is to help you decide which unit fits a given case. The page describes two interaction controls:

  • Click and drag to move around the chart.
  • Ctrl/cmd + mouse wheel to zoom in and out.

The page also mentions a weekly newsletter signup for CSS tips. No pricing, account requirement, or login restriction is stated on the page, so treat access as unspecified rather than assuming it is free or gated.

Step-by-step: using the flowchart

  1. Open the page. Load whatunit.com in your browser. The flowchart is the main content.
  2. Find the starting question. Begin at the top node and read the first decision point.
  3. Answer honestly for your case. Each branch corresponds to a condition — for example, whether the size should scale with the user's font settings, the viewport, or the parent element.
  4. Follow the branch to the next node. Repeat until you reach a leaf node recommending a unit.
  5. Navigate the chart as needed. Drag to pan if part of the chart is off-screen. Use ctrl/cmd + mouse wheel to zoom in when labels are small or zoom out to see the whole path.
  6. Apply the result to your CSS. Take the recommended unit and write your declaration, then verify in the browser.

Expected result: you end at a specific unit recommendation with the reasoning path visible, so you can see why that unit was suggested rather than just what it is.

Reading the outcome

The flowchart narrows to units such as px, em, rem, %, vw, or vh. Use the path you followed as the justification:

If your condition is about… The chart tends to point toward…
Fixed, non-scaling sizes px
Sizing relative to the parent element's font size em
Sizing relative to the root font size rem
Sizing relative to a containing block %
Sizing relative to viewport width or height vw / vh

Treat this table as a summary of the kind of decision the chart encodes, not a replacement for following the actual branches — the chart's value is in the ordered questions, which capture nuance a table flattens.

Common sticking points

  • Zoom feels stuck. The page specifies ctrl/cmd + mouse wheel, not pinch or plain scroll. Use the modifier key.
  • You lose your place after panning. Zoom out first to reorient, then zoom back in on the branch you were following.
  • The recommendation conflicts with your design system. The flowchart answers "what unit fits this condition," not "what does your team's convention require." Follow your project's rules when they exist.
  • You need edge cases. A flowchart cannot cover every cascade, container query, or clamp() scenario. Use it as a quick reference and confirm details against the CSS specification when precision matters.

When this approach fits

Use the whatunit.com flowchart when you want a fast, visual way to reason about a single sizing decision and you already understand basic CSS units. Skip it when you need authoritative syntax, browser-compatibility data, or guidance on modern features like container query units — for those, go to the specification or MDN.