UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

CSS Unit Converter

Convert between CSS units — px, em, rem, vh, vw, pt, pc, cm, mm, in — with configurable base font size and viewport dimensions.

About CSS Unit Converter

The CSS Unit Converter converts between all common CSS length units — absolute units (px, pt, pc, cm, mm, in) and relative units (em, rem, vh, vw, vmin, vmax, ch, ex) — using configurable reference values for base font size and viewport dimensions. The converter shows all unit equivalents simultaneously from a single input value, making it easy to work across design and code contexts. Setting the root font size (default 16px) is essential for accurate rem conversions; setting viewport width/height enables correct vh/vw calculations. This is an everyday tool for frontend developers and designers working across different unit systems.

Why use CSS Unit Converter

  • Converts to and from all CSS length units simultaneously.
  • Configurable base font size and viewport size for accurate relative unit conversions.
  • All units update in real time from any input field.
  • Quick-copy buttons for each unit value.
  • Converts to and from all CSS length units simultaneously — px, em, rem, %, vh, vw, vmin, vmax, pt, pc, cm, mm, in, ch, ex.
  • Configurable base font size and viewport size for accurate relative unit conversions in any project context.

How to use CSS Unit Converter

  1. Enter a value in any unit field and all other units update immediately.
  2. Set the base font size (for em/rem) and viewport dimensions (for vh/vw).
  3. Use the presets for common base font sizes (16px default, 18px for larger type).
  4. Copy any converted value by clicking the copy icon next to it.
  5. Use the presets for common base font sizes (16px default, 18px for larger type, 10px for the popular 'rem-as-pixels' trick).
  6. Adjust viewport width and height to match your target breakpoint when working with vh/vw.
  7. Reset to defaults if the reference values get out of sync with your stylesheet.

When to use CSS Unit Converter

  • Converting design specs in pixels to rem for scalable CSS.
  • Checking how a vh-based height maps to pixel values at target viewport sizes.
  • Converting point (pt) values from print specs to CSS pixel equivalents.
  • Working across design tools (which use px) and CSS codebases (which use rem).
  • Converting design specs in pixels to rem for scalable, accessibility-friendly CSS.
  • Working across design tools (which typically use px) and CSS codebases (which prefer rem).

Examples

Designer hands you 24px — what's that in rem?

Input: 24px (with 16px root font-size)

Output: 1.5rem, 1.5em (at 16px parent), 18pt, 0.635cm, 0.25in

100vh on iPhone 13 (390×844)

Input: 100vh (viewport 390x844)

Output: 844px, 52.75rem (at 16px root), 633pt

Print spec in points to web pixels

Input: 12pt

Output: 16px, 1rem (at 16px root), 4.23mm, 0.167in

62.5% trick — 1rem at 10px root

Input: 1rem (with 10px root font-size)

Output: 10px, 7.5pt, 0.625em (at 16px parent context)

Tips

  • Use rem for typography and major spacing — it scales with user font size preferences for accessibility.
  • Set html { font-size: 62.5%; } and many developers can write 1.6rem instead of 16px (1rem then equals 10px). Use the 10px preset to mirror this trick.
  • Avoid em for nested components — it cascades from the parent's font-size and can compound unpredictably.
  • Use vh sparingly for full-screen hero sections; mobile browser address bars cause the visible viewport to differ from 100vh.
  • Use ch (1ch = width of '0') for max-width on text columns — it produces consistent line lengths regardless of font size.
  • When converting spec px to rem, divide by your root font-size (typically 16) instead of guessing — the converter does this for you.

Frequently Asked Questions

What is the default base font size?▾
The default is 16px, which matches browser defaults. Adjust this if your root/html element has a different font-size.
What is the difference between em and rem?▾
rem (root em) is relative to the root html element's font-size. em is relative to the current element's font-size, which can cascade unpredictably in nested elements.
How are vh and vw calculated?▾
1vh = 1% of the viewport height, 1vw = 1% of the viewport width. Set the reference viewport dimensions in the tool to get accurate conversions.
What is a CSS point (pt)?▾
1pt = 1/72 inch = 1.333... px at 96dpi screen resolution. Points are mainly used for print stylesheets.
Why are ch and ex hard to convert exactly?▾
ch (width of '0') and ex (x-height) are relative to the current font's metrics, which vary by typeface. This tool estimates them based on typical font proportions.
Should I use px, em, or rem in my project?▾
Use rem for typography and major spacing (it respects user font preferences), em sparingly for component-internal scaling, and px for borders and 1-pixel details.

Explore the category

CSS Box Model Visualizer Visualize the CSS box model interactively — adjust margin, border, padding, and content size to understand element dimensions. CSS Spinner Generator Browse spinner presets, tweak size speed and color, and copy animation-ready CSS. Color Converter Convert between HEX, RGB, HSL Aspect Ratio Helper Convert width and height pairs into modern aspect-ratio CSS plus legacy padding hacks. CSS Minifier Minify CSS by removing comments and whitespace CSS Beautifier Beautify CSS with clean indentation and optional comment preservation.
CSS Minification: What It Does and Why Every Byte Matters CSS minification strips out whitespace, comments, and unnecessary characters without changing any rules. On large stylesheets the savings ar May 2026 · 7 min CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min

Glossary

Absolute units
CSS units that map to a fixed physical or virtual size regardless of context: px, pt, pc, cm, mm, in. Use sparingly — they don't scale with user font preferences.
Relative units
Units whose computed value depends on another reference: em (parent font-size), rem (root font-size), %, vh/vw (viewport), ch/ex (font metrics). Preferred for accessible, responsive design.
rem (root em)
Length relative to the root html element's font-size. 1rem = 16px by default browser settings. Resilient to nesting because the reference is always the document root.
em
Length relative to the current element's font-size. Cascades through nesting: 2em on a child of a 1.5em parent renders as 3x the grandparent's font size — useful but error-prone.
Viewport units (vh, vw, vmin, vmax)
Lengths based on the visible viewport. 1vh = 1% of viewport height, 1vw = 1% of width. vmin/vmax pick the smaller/larger of the two, useful for orientation-agnostic sizing.
REM root font size
The font-size set on the html element, which all rem units reference. Browser default is 16px; some teams set it to 62.5% (=10px) so 1rem = 10px for easier mental math.
ch unit
Length equal to the width of the '0' (zero) character in the current font. Useful for sizing text columns by character count (e.g. max-width: 65ch for readable line length).
Point (pt)
1pt = 1/72 inch = 1.333... px at 96dpi. Inherited from print typography; mostly used in @media print stylesheets.
DPI (dots per inch)
Density of pixels per physical inch. CSS assumes 96dpi as the canonical screen resolution for px-to-physical-unit conversions.