CSS Unit Converter
Convert px ↔ rem ↔ em ↔ vw ↔ pt and all CSS units instantly
= 16px
All Units
Common Sizes Reference
| px | rem | em | pt |
|---|---|---|---|
| 8 | 0.5 | 0.5 | 6 |
| 12 | 0.75 | 0.75 | 9 |
| 14 | 0.875 | 0.875 | 10.5 |
| 16 | 1 | 1 | 12 |
| 18 | 1.125 | 1.125 | 13.5 |
| 20 | 1.25 | 1.25 | 15 |
| 24 | 1.5 | 1.5 | 18 |
| 32 | 2 | 2 | 24 |
| 48 | 3 | 3 | 36 |
| 64 | 4 | 4 | 48 |
Click any row to use that value as input. Base font size: 16px
What is CSS Unit Converter?
The CSS Unit Converter is a developer utility that converts values between all standard CSS length units in real time. CSS supports a wide range of units — absolute units like 'px', 'pt', 'cm', and 'mm'; relative units like 'rem', 'em', 'vw', 'vh', 'vmin', and 'vmax'; and newer viewport units like 'svh', 'lvh', and 'dvh' — and each has different characteristics that affect responsive layouts, accessibility, and print stylesheets.
The most common conversion needed in practice is between 'px' and 'rem'. Because browsers let users change their default font size for accessibility, using 'rem' for font sizes and spacing means your UI scales with the user's preference. The standard base is 16px = 1rem, but some projects use a 10px base (set via 'font-size: 62.5%' on the root) to simplify the arithmetic. This tool lets you set the base font size to match your project so all rem and em conversions are accurate for your context.
Beyond px-to-rem, the converter handles viewport-relative units, which require the current viewport dimensions to calculate precisely, as well as physical units used in print stylesheets. Developers can enter a value in any unit and immediately see the equivalents across all other units, making this tool useful during both initial development (when setting up a spacing scale) and debugging (when trying to understand why a value looks different across devices or zoom levels). All calculations happen in the browser with no server round-trips.
How to Use CSS Unit Converter
- Enter your CSS value
Type a numeric value and select the source unit — px, rem, em, vw, vh, pt, cm, mm or any other CSS unit.
- Set the base font size
Adjust the root font size (default 16px) to match your project's HTML font-size setting for accurate rem and em results.
- View all unit equivalents
The converter instantly shows the equivalent value in every supported CSS unit in a clear comparison table.
- Copy the converted value
Click any result to copy that converted value to your clipboard, ready to paste into your stylesheet.
Key Benefits
All unit equivalents update in real time as you type — no need to click a convert button.
Set a custom root font size so rem and em conversions match your project's actual configuration.
Covers px, rem, em, vw, vh, vmin, vmax, pt, pc, cm, mm, in and newer viewport units in one tool.
All conversions are computed in the browser — fast, private, and available offline.
Frequently Asked Questions
rem is relative to the browser's root font size, which users can adjust in their browser settings for accessibility. If you use px, text does not scale with user preferences. rem-based sizes respect those preferences automatically.
rem is relative to the root element's font size (typically the html element). em is relative to the nearest ancestor element's font size. em can compound when nested, while rem always refers back to the same root value.
Viewport units are calculated as a percentage of the viewport dimensions: 1vw = 1% of viewport width, 1vh = 1% of viewport height. The converter uses the viewport width and height values you provide, or sensible defaults.
vh is based on the full viewport height including browser chrome (address bar). svh (small viewport height) excludes the browser chrome. dvh (dynamic viewport height) updates as the chrome shows or hides, useful for mobile full-screen layouts.