CSS Unit Converter: Convert Between px, rem, em, vw, and More
Convert CSS units between px, rem, em, vw, vh, pt, and cm instantly with configurable base font size and viewport dimensions.
Try the free online tool
Runs entirely in your browser — no signup, no uploads.
CSS offers a rich set of measurement units — absolute units like px, pt, and cm; relative units like rem and em; and viewport-relative units like vw and vh. Choosing the right unit type for each property is one of the foundational decisions in writing maintainable, accessible CSS. But translating between them, especially when working with designs specified in pixels and code that should use rem or em, requires arithmetic that is easy to get wrong.
Our CSS Unit Converter handles all conversions instantly. Enter a value in any unit and see the equivalent in all others simultaneously. Configure the base font size and viewport dimensions to match your project's settings, so the conversions reflect your actual design context rather than generic defaults. The tool supports px, rem, em, vw, vh, vmin, vmax, pt, pc, cm, mm, in, and ch.
The converter is particularly valuable when implementing designs from Figma or other tools that export measurements in pixels, where the target CSS should use rem for scalable typography and spacing. It removes the manual calculation step and reduces the chance of rounding errors introducing invisible but impactful pixel misalignments.
What Are CSS Units?
CSS units fall into two main categories: absolute units and relative units. Absolute units represent a fixed physical or screen measurement that does not change based on context. The most common is px (a CSS pixel, which is device-independent), followed by pt (point, 1/72 of an inch) and cm (centimeter). Absolute units are predictable but inflexible.
Relative units scale based on some reference value. The rem unit is relative to the root element's font size (the html element), making it ideal for scalable typography and spacing. The em unit is relative to the current element's own font size, which can compound in nested elements. The vw and vh units are relative to 1% of the viewport's width and height respectively, making them useful for fluid sizing.
Choosing the right unit type matters significantly for accessibility. Users who increase their browser's default font size (typically from 16px to a larger value) benefit from interfaces that use rem for text and spacing, which scale with their preference. Interfaces using only px ignore this user preference.
How to Use This Tool
Convert CSS units in a few steps:
- 1
Set Your Context
Enter the base font size for your project (typically 16px, but your project may use 10px or another value as the html font-size). Enter the viewport width and height for vw and vh conversions.
- 2
Enter a Value
Type a number and select its unit from the dropdown. All conversion results update immediately in the output panel below.
- 3
Read All Equivalents
The output shows the entered value converted to every supported unit simultaneously — px, rem, em, vw, vh, pt, cm, mm, and more — all in a single, scannable list.
- 4
Copy Any Result
Click the copy icon next to any result to copy just that value and unit to your clipboard, ready to paste into your CSS file or design tool.
- 5
Use the Bulk Converter
Switch to Bulk mode to paste a list of pixel values and get all their rem equivalents at once — ideal when converting a full spacing scale or type scale from a Figma design spec.
Common Use Cases
CSS unit conversion is needed throughout the design-to-code workflow:
- Converting a Figma design's pixel measurements to rem values for scalable, accessible typography and spacing in a production stylesheet
- Translating pt values from print stylesheets or PDF designs to their pixel equivalents for screen implementations
- Calculating the correct vw value to make an element a specific pixel width at a known viewport size for fluid type or element sizing
- Converting between em and rem when working within component libraries where some components use em for local scaling and others use rem for global consistency
- Checking whether a spacing value from a design token system correctly maps to the expected pixel value at the project's configured base font size
Tips and Best Practices
Use CSS units strategically for scalable and accessible interfaces:
- Use rem for font-size and most spacing values so that user browser font-size preferences scale the entire interface proportionally, a key accessibility requirement
- Use px for borders, shadows, and decorative details that should remain visually consistent regardless of font size settings
- Use vw and vh for large layout elements like hero sections that should be proportional to the viewport, but combine with clamp() to prevent values from becoming too small or too large
- Set html { font-size: 62.5% } only as a convenience shortcut (making 1rem = 10px) if your team agrees on it consistently — it conflicts with some third-party components and accessibility tools
- Avoid em for anything other than component-internal spacing where you intentionally want values to scale with the component's own font size — unexpected nesting causes em values to compound unpredictably
Frequently Asked Questions
What is the default browser font size for rem calculations?
The default browser font size is 16px in all major browsers. This means 1rem = 16px by default. Users can change this in their browser settings, and your CSS can change it by setting a different font-size on the html element. Always base your conversions on your project's actual html font-size setting.
What is the difference between rem and em?
rem is always relative to the root html element's font size, making it consistent regardless of where in the DOM the element lives. em is relative to the current element's own font size, which changes when elements are nested inside other elements with different font sizes. rem is generally preferred for predictability.
How do I convert px to rem quickly in my head?
With the default 16px base, divide the pixel value by 16. Common values: 8px = 0.5rem, 12px = 0.75rem, 16px = 1rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. If you set html font-size to 62.5% (10px), simply divide by 10 instead.
When should I use vw and vh units?
Use vw and vh for elements that should be proportional to the viewport size regardless of content. Common uses: full-screen hero sections (height: 100vh), large fluid text that scales with viewport width, and decorative elements sized relative to the screen. Always test with clamp() to set minimum and maximum bounds.
Are pt and px the same?
No. 1pt equals 1.333px in screen CSS (because 1 inch = 96px on screen, and 1 inch = 72pt). So 12pt is equivalent to 16px. pt units are primarily used in print stylesheets where physical dimensions matter. For screen layouts, use px or rem instead.
What are the vmin and vmax units?
vmin is 1% of the smaller of the viewport's width and height. vmax is 1% of the larger. On a 1200px wide by 800px tall viewport, 1vmin = 8px and 1vmax = 12px. These are useful for sizing elements that should adapt to whichever viewport dimension is more constraining, such as square elements on any screen orientation.
How does the ch unit work?
1ch equals the advance measure (width) of the '0' (zero) character in the element's current font. It is most useful for sizing text inputs and content containers by the number of characters they should hold — for example, width: 60ch creates a text column approximately 60 characters wide, which is often cited as the optimal line length for reading.
Ready to use this tool?
Free, instant, no account required. Runs entirely in your browser.