Unit Converter

Convert CSS lengths (px, rem, em) and data sizes (KB, MB, GB) live. Set your root font size for accurate rem math — everything stays in the browser.

Pick a category and enter a value

Values

How do I convert px to rem or MB to GB?

What this tool does

Switch between two focused categories — CSS lengths (px, rem, em) and data sizes (B, KB, MB, GB) — and edit any field to update the rest instantly. Set your project's root font size so rem and em values match your stylesheet, then copy all converted numbers for handoff to design or backend docs.

Why you need it

Designers think in pixels; modern CSS prefers rem for accessible scaling. A 16 px base makes 24 px equal 1.5 rem, but change the root to 10 px and the same pixel value becomes 2.4 rem — silent layout bugs if you guess. Data sizes are worse: marketing copy says “1 GB = 1,000 MB” while your OS may show binary gibibytes. A dedicated converter with explicit rules prevents mismatched specs between Figma, CSS and storage estimates.

How to use it

  1. Select CSS length or Data size from the category dropdown.
  2. For CSS mode, set Root font size (px) to match your html { font-size } — default is 16.
  3. Type a value in any unit field; siblings update live.
  4. Click Copy values to grab the full set for tickets or style guides.
  5. Reset clears inputs when switching tasks.

Practical examples

  • Component spacing: Convert a 32 px padding token to rem before committing to a design-system variable.
  • Responsive typography: Map 14 px body text to rem so user zoom scales correctly.
  • Asset budgets: Translate “450 KB hero image” into MB for a total page-weight spreadsheet.
  • Cloud pricing: Express 2.5 GB storage used as bytes or MB when comparing vendor tiers quoted in decimal units.

How it works

CSS length mode treats px as absolute pixels. rem divides px by the configured root font size; em here follows the same root for consistent multi-field conversion (in real CSS, em is relative to the element's font size — adjust mentally when nesting). Example with a 16 px root: 48 px → 3 rem.

Data size mode uses decimal (SI) prefixes: 1 KB = 1,000 B, 1 MB = 1,000 KB, 1 GB = 1,000 MB. That matches many SSD labels and cloud billing docs. Windows and some CLI tools instead show binary KiB/MiB (1024-based), which is why a “500 GB” drive reports ~465 GiB — the FAQ calls out that ~2–4% gap at scale.

All math runs locally; nothing is sent to a server.

Common mistakes

  • Wrong root for rem: Copying rem values without matching the project's root font size breaks spacing in production.
  • Binary vs decimal GB: Dividing by 1024 when your vendor quotes 1000-based tiers underestimates capacity.
  • Treating em like rem: Nested components with different font sizes need per-element em math — this tool uses root-based em for quick parity checks only.
  • Mixing categories: px-to-MB is meaningless — pick CSS or data mode explicitly.

FAQ

How is rem calculated?

rem = px ÷ root font size. With a 16 px root, 32 px equals 2 rem.

Are data sizes binary or decimal?

This tool uses standard decimal prefixes (1 KB = 1,000 bytes) common in marketing and SI conventions. Some OS dialogs use binary KiB — watch for ~2–4% differences at large sizes.

Can I change the root font size?

Yes. Match your project's html { font-size } for rem values that align with your CSS.

Is any input stored?

No. Values exist only in your session and are never uploaded.

Does it convert other units like inches or cm?

Currently CSS length and data size categories. Use dedicated physical-unit tools for print measurements.

Related tools