About CSS Unit Converter
The CSS Unit Converter is a free online tool that converts between all major CSS length units instantly. Type any value and see the equivalent in px, rem, em, pt, pica, cm, mm, inches, vw, vh, and percentage — all at once.
CSS supports a wide range of length units, and switching between them manually can be error-prone. Designers and developers often need to convert pixel values to rem for scalable typography, em for component-relative spacing, or physical units like cm and mm for print stylesheets.
The converter handles both absolute units (px, pt, pc, cm, mm, in) and relative units (rem, em, %, vw, vh). Relative units depend on context — rem is relative to the root font size (typically 16px), em is relative to the parent element's font size, and percentage is relative to the parent element's computed size. The Context settings panel lets you customise these values to match your project.
Viewport units (vw, vh) are calculated relative to a 1920×1080 reference resolution. For other viewport sizes, adjust the settings or use the result as a starting point.
Everything runs in your browser. No data is sent to a server and no sign-up is required.
CSS Unit Converter Features
- Runs entirely in your browser
CSS Unit Converter processes everything client-side — nothing you paste, type, or upload is sent to a server.
- Free, instant, no sign-up
No account, no usage limits, no paywall. Results update as you type or click.
- Convert px, rem, em, pt, vw, vh and more — with custom root font size
The CSS Unit Converter is a free online tool that converts between all major CSS length units instantly. Type any value and see the equivalent in px, rem, em, pt, pica, cm, mm, inches, vw, vh, and percentage — all at once.
How to Use CSS Unit Converter
Type the value you want to convert in the input field.
Select the source unit from the dropdown (e.g. px, rem, em).
All target unit values update instantly in the results panel.
Click any result row to use it as the new input, or click Copy to grab the value with its unit.
Open Context settings to set a custom root font size or parent element size for accurate rem, em, and % conversions.
Examples
Practical Uses for CSS Unit Converter
- Convert a designer's px spec to rem for scalable typography
- Check what 1.5rem equals in pixels for a CSS media query breakpoint
- Convert cm measurements to px for a print-to-web layout comparison
- Find the em equivalent of a px value for component-relative spacing
- Convert vw units to px to understand a responsive layout at a specific viewport
- Check pt to px conversion when porting a print stylesheet to screen
Who Uses the CSS Unit Converter Tool
- Front-end developers convert px design specs to rem and em for scalable, accessible typography.
- UI designers check exact pixel equivalents of rem, em, and viewport units during handoff.
- Accessibility specialists verify font sizes use rem units that respect user browser font-size preferences.
- Print-to-web developers convert physical print units like cm and pt to their screen pixel equivalents.
- Students learn how CSS's relative and absolute units relate to each other.
Comparisons
rem vs em vs px
px is an absolute unit that always renders at the same size regardless of context, which is predictable but doesn't respect a user's browser font-size preference for accessibility. rem is relative to the root element's font size, making it the preferred choice for typography and spacing that should scale consistently across a page.
em is relative to the current element's own (or parent's) font size, useful for component-internal spacing, but can compound unpredictably when nested elements each apply their own em-based sizing. Most modern CSS guidance favors rem for global sizing and reserves em for intentionally component-relative values.
Frequently Asked Questions
What is the difference between px, rem, and em?
px (pixel) is an absolute unit — 1px equals one CSS pixel regardless of context. rem (root em) is relative to the root element's font size, which is typically 16px in browsers. em is relative to the font size of the element's parent. rem is generally preferred for typography and spacing in modern CSS because it scales consistently with the user's browser font size preference.
What root font size should I use?
The default browser root font size is 16px, which is what most CSS frameworks use as their rem base. Some projects set the root to 10px (using html { font-size: 62.5%; }) so that 1rem = 10px, making mental math easier. Enter your project's actual root font size in the Context settings panel.
How are vw and vh calculated?
vw (viewport width) and vh (viewport height) are percentages of the browser viewport dimensions. This tool uses 1920×1080 as the reference resolution, so 1vw ≈ 19.2px and 1vh ≈ 10.8px. For other resolutions, the conversion is proportional — 1vw on a 1440px-wide viewport would be 14.4px.
What is a pt (point) in CSS?
A CSS point is a physical unit equal to 1/72 of an inch, which is 1.333…px at 96 DPI (the CSS reference pixel density). Points are mainly used in print stylesheets. For screen design, px or rem is more appropriate.
What is a pica (pc) in CSS?
A CSS pica equals 12 points, or 1/6 of an inch, which is 16px at 96 DPI. Like points, picas are primarily used in print media contexts and are uncommon in web screen design.
How does percentage (%) work?
In CSS, percentage values are relative to the parent element's computed value for the same property. For font-size, 100% equals the parent's font size. For width, 100% equals the parent's content width. Set the parent element size in Context settings to get the correct result for your layout.
Why does 1rem equal 16px by default?
All major browsers set the default root font size to 16px unless overridden by the user or stylesheet. This means 1rem = 16px, 0.875rem = 14px, 1.25rem = 20px, and so on. Changing the root font size (e.g. with html { font-size: 18px; }) shifts all rem values proportionally.
Can I use this for print stylesheets?
Yes — the converter includes pt (points), pc (picas), cm (centimetres), mm (millimetres), and in (inches), which are all physical units used in CSS print media queries. Note that physical units are only accurate in print contexts; on screens they map to fixed pixel equivalents at 96 DPI.
Should I use rem or px for font sizes?
rem is generally recommended for font sizes, since it scales correctly when a user changes their browser's default font size for accessibility — a px-based font size ignores that preference entirely.
How do I convert a print stylesheet's cm measurements to px?
Enter your cm value with cm selected as the source unit — the tool converts it to the equivalent px value at the standard 96 DPI reference used by CSS.
Why do my em-based values compound unexpectedly in nested elements?
Because em is relative to the parent's font size, nesting elements that each set a font-size in em multiplies the effect at each level, which is why many developers prefer rem for predictable, non-compounding sizing.
Related Tools
Ready to use CSS Unit Converter?
It's free, runs entirely in your browser, and there's nothing to install or sign up for.
Scroll up & try it now ↑