📏 CSS Unit Converter
Convert between px, rem, em, pt, vw and other CSS units instantly.
What is the difference between rem and em in CSS?
rem (root em) is relative to the root element font-size — the <html> element. If the root is 16px, 1rem = 16px everywhere in the document regardless of nesting. em is relative to the current element's font-size (or the parent's font-size for non-font properties). Nested elements compound: a 1.2em text inside another 1.2em element renders at 1.44× the root size. This compounding makes em hard to reason about in deep component trees. The modern recommendation: use rem for font sizes and spacing to keep everything relative to one consistent reference point.
Why should I use rem instead of px for font sizes?
rem respects the user's browser font size preference. If a user sets their browser to 20px base (common for low-vision users), 1rem = 20px and all your rem-based text scales accordingly. px ignores this — a 14px font stays 14px regardless of user preference. Accessibility guidelines and best practices recommend rem for font sizes. For layout spacing (margin, padding, gap), rem also works well — everything scales proportionally when the user adjusts their font size. For borders, box-shadows, and purely decorative elements that should not scale with text: px is appropriate.
What are viewport units (vw, vh) and when should I use them?
vw (viewport width) and vh (viewport height) are percentages of the browser window. 1vw = 1% of viewport width, 100vw = full width. Common uses: full-height sections (height: 100vh — though on mobile, 100dvh is more reliable), fluid typography (font-size: clamp(16px, 2.5vw, 24px)), full-bleed images, and hero sections. Problems: 100vh on iOS Safari includes the browser chrome, cutting off content. The new dynamic viewport units (dvw, dvh, svw, svh) solve this — dvh is the small viewport height (excluding browser UI), svh is the large viewport (including it).
How does the px to rem calculation work?
The formula: rem = px / root-font-size. With the default browser root of 16px: 24px = 24/16 = 1.5rem. 32px = 2rem. 14px = 0.875rem. If you set html { font-size: 10px } (a common trick), 1rem = 10px and conversions are easier: 24px = 2.4rem. This is the "62.5% trick" — setting html { font-size: 62.5% } makes 1rem = 10px while still scaling with the user's browser preference. Many developers avoid this trick now, preferring to just use a converter and keep the default 16px root.
What is the difference between vw and % for width?
% width is relative to the element's containing block (parent element). vw is relative to the viewport width — the browser window. A 100% width inside a 500px container is 500px. 100vw is the full browser window width regardless of the container. This matters for full-bleed backgrounds inside centered containers: a card at max-width: 1200px has 100% = 1200px, but 100vw = the full window width. To make a background span the full window from inside a constrained container: width: 100vw; margin-left: calc((100vw - 100%) / -2) — a common technique for full-bleed sections.
When should I use pt or cm in CSS?
pt (points) and cm (centimeters) are absolute units intended for print stylesheets (@media print). In a print context: 1pt = 1/72 inch, 1cm = the physical centimeter on paper. For screen: 1pt = approximately 1.33px at 96dpi (the CSS standard reference resolution), but this varies by device DPI. In practice: never use pt or cm for screen layouts. Use px for fixed screen measurements, rem/em for scalable text, and vw/vh for viewport-relative sizes. Reserve pt and cm for @media print rules where physical paper dimensions matter.
What other layout and sizing tools are on this site?
The px to REM Converter is a focused tool specifically for that conversion with bulk conversion support. The Responsive Breakpoints tool shows standard screen widths for media query planning. The Aspect Ratio Calculator derives missing dimensions while maintaining proportions. The Font Size Calculator generates fluid type scales using CSS clamp(). The Flexbox Generator and Grid Generator handle layout without needing manual unit math. All are in the Dev Tools section.
📊 Key Data Points
16px = 1rem
Browser default base font size — the standard base for rem calculations
1ch width
ch unit equals the width of the 0 character in the current font — varies by font
100vw = viewport
1vw = 1/100th of the viewport width — changes with browser window size
CSS Unit Converter — px rem em vw and More -- Complete USA Guide 2026
CSS has 20+ length units — px, rem, em, vw, vh, svh, dvh, ch, ex, cm, mm, in, pt, pc, and more. Converting between them without a tool requires knowing the base font size (for rem), the parent element size (for em), and the viewport dimensions (for vw/vh).
This converter handles all common CSS unit conversions with configurable base values. Runs in your browser.
**Long-tail searches answered here:** px to rem converter with custom base font size, convert css pixels to viewport units online free, em to rem css unit calculator browser tool.
For responsive design, pair with Responsive Breakpoints and Font Size Calculator.
🔬 How This Calculator Works
Rem conversion: px divided by base-font-size = rem. Default base is 16px (browser default). Change the base to match your project root font-size setting.
Em conversion: px divided by parent-font-size = em. Em is relative to the current element font-size (or the nearest ancestor with a font-size). This makes em values context-dependent.
Viewport units: px divided by (viewport-dimension divided by 100) = vw or vh. Configurable viewport width for accurate calculations.
✅ What You Can Calculate
Configurable base font size
Set the root font size to match your project. If your :root has font-size: 18px, all rem conversions use 18px as the base — not the browser default 16px.
All CSS units in one place
px, rem, em, vw, vh, ch, ex, pt, cm, mm — convert between any combination.
Batch conversion
Enter a list of pixel values and convert all of them to rem simultaneously. Useful when converting a legacy stylesheet from px to rem during a redesign.
Viewport width configuration
Set the viewport width for accurate vw/vh calculations. Convert a design spec pixel value to vw for a specific target viewport.
🎯 Real Scenarios & Use Cases
Migrating from px to rem
You are converting a legacy design system from pixel-based sizing to rem-based for accessibility. Batch convert your spacing and font-size values here.
Design token generation
Your design spec uses px values. Convert them to rem for your CSS custom properties.
Responsive typography
Building fluid type scales with clamp() requires knowing the vw value that produces your target sizes at the min and max viewport. Calculate here.
Tailwind custom spacing
Tailwind default spacing scale is in rem. Convert your design pixel values to rem here before adding to tailwind.config.
💡 Pro Tips for Accurate Results
Use rem for component sizing. rem is relative to the root font-size — consistent everywhere. em is relative to current font-size — compounds when nested.
Do not set html { font-size: 62.5% }. This breaks user browser font-size preferences. Calculate with 16px as the base instead.
ch for monospace inputs. width: 20ch sizes to exactly 20 characters — perfect for code inputs and numeric fields.
svh, dvh for mobile. 100svh excludes mobile browser chrome; 100dvh updates as chrome shows/hides. Better than 100vh for full-height mobile layouts.
🔗 Use These Together
🏁 Bottom Line
CSS units express sizes in different relative contexts. Getting the base right is essential for accessible responsive layouts. For responsive design: Responsive Breakpoints and Font Size Calculator.