whatunit.com

Pick the unit that matches what the size should respond to: use px for fixed, non-scaling details; rem for most font sizes and spacing that should respect user settings; em for sizing that should scale with its own element's font; % for sizes relative to a parent; and vw/vh for sizes tied to the viewport. The rest of this explains the mechanism behind each and the cases where it backfires.

The core question: what should this size follow?

Every CSS length unit answers a different question about what it scales with. Before choosing, decide which of these you want:

• Nothing — the size stays the same regardless of user settings or context → px
• The user's root font size → rem
• The current element's font size → em
• The parent element's size → %
• The browser viewport → vw / vh

The whatunit.com flowchart is built around exactly this decision: you follow branches based on whether you want fixed, scalable, or container-relative sizing, and it lands on a unit. It's an interactive diagram — you can click and drag to pan and use ctrl/cmd + mouse wheel to zoom.

px — fixed pixels

px is an absolute unit. It does not change when the user increases their browser's default font size, and it does not inherit from a parent.

Use it when:

• You want a hairline border, a 1px divider, or a fixed shadow offset.
• A size genuinely should not scale — for example, a decorative rule or a fixed icon dimension.

Avoid it when:

• The value is text-related. A user who sets a larger default font size will not see your px text grow, which hurts accessibility.
• You want consistent spacing that scales with typography.

rem — relative to the root font size

rem means "root em." It resolves against the font size of the root element (html), which by default is the user's browser font-size setting (commonly 16px, but the user can change it).

Use it when:

• Setting font sizes — this respects the user's preference.
• Setting spacing (margin, padding, gaps) that should scale with text.
• You want a single knob (the root font size) to scale a whole layout.

Because every rem on the page points to the same root value, rem gives you predictable, globally consistent scaling. This is why it's the common default for typography and layout spacing.

em — relative to the current element's font size

em resolves against the font size of the element it's applied to (or the inherited font size for properties like font-size itself, where it compounds).

Use it when:

• A component should scale as a unit with its own font size — for example, padding inside a button that should grow when the button's text grows.
• You're building a self-contained component and want its internal proportions to hold.

The classic pitfall: em compounds. If you nest elements each with font-size: 1.2em, the sizes multiply down the tree, so a deeply nested element can end up much larger than intended. If you don't want that compounding, use rem instead.

% — relative to the parent

Percentages resolve against a property-specific reference, usually the parent element's corresponding dimension.

• width: 50% → half the parent's width.
• height: 50% → half the parent's height, but only if the parent has a defined height; otherwise it may collapse.
• font-size: 120% → 120% of the inherited font size (similar compounding behavior to em).

Use it when:

• You want fluid, container-relative sizing — a sidebar that's a fraction of its container, an image that fills its parent.
• You're building responsive layouts where elements should track their container.

Watch out for the height case: percentage heights need a parent with a resolved height, or they won't behave as expected.

vw and vh — relative to the viewport

1vw is 1% of the viewport width; 1vh is 1% of the viewport height.

Use them when:

• You want something to scale with the browser window — a full-screen hero section (height: 100vh), or fluid type that grows with the screen.
• You want a layout dimension tied to the visible area rather than any parent.

Cautions:

• 100vh on mobile can be taller than the visible area because of browser UI (address bars), so content may be cut off. Test on real devices.
• Viewport units ignore the parent entirely, so they can break out of a constrained container in ways you didn't intend.

Quick comparison

A practical default

If you want one rule to start from: use rem for typography and spacing, px for borders and genuinely fixed details, % for container-relative layout, and reach for vw/vh only when the viewport itself is the right reference. Use em deliberately when you want a component to scale with its own text.

When two units seem to fit, ask which thing the size should follow — the user's settings, the parent, or the screen. That answer picks the unit. The whatunit.com flowchart is a useful cross-check when you're unsure; it walks the same fixed-vs-scalable-vs-container-relative decision and returns a single recommendation.

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:

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.

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.

The CSS length unit flowchart is the primary content on the whatunit.com homepage. Open the site and you land directly on the tool — there is no separate page or download required. The page also mentions a weekly newsletter signup for keeping up with CSS, and encourages sharing the tool if you find it useful.

What the homepage contains

The site is built around a single interactive decision aid titled "What CSS length unit should you use?" Its stated purpose is to help you decide which unit to use, and it presents that guidance as a flowchart rather than as prose.

Two elements sit alongside the flowchart:

• A weekly newsletter signup — described as a way to "keep on top of your CSS game."
• A share prompt — the page says that if you find the tool useful, sharing it would be appreciated.

How to operate the flowchart

The page gives three interaction instructions directly:

So the flowchart is pannable and zoomable rather than a fixed image. If the diagram initially appears larger or smaller than your viewport, that is expected — use the modifier key plus wheel to set a comfortable zoom level, then drag to reach the branch you need.

Getting the newsletter

The newsletter signup is referenced on the same page as the flowchart. The page evidence does not describe the signup form fields, confirmation flow, or what a subscription includes beyond the general framing of staying current with CSS. If you want it, look for the signup link or form on the homepage itself rather than a dedicated /newsletter route, since none is documented.

Practical notes

• The tool is a decision aid, not a reference table — you answer the flowchart's questions in sequence to arrive at a unit recommendation.
• Because the content is interactive, it works best on a device with a mouse or trackpad where the ctrl/cmd + wheel gesture is available.
• Nothing on the page indicates pricing, an account requirement, or a login gate for the flowchart itself.