Developer

CSS Unit Converter

Convert between px, rem, em, pt, vw, vh, and % instantly, using your own base font size and viewport dimensions — no more guessing what 1.

Did this calculator help you?

What is CSS Unit Converter?

CSS supports several different units for sizing — absolute ones like px and pt, and relative ones like rem, em, vw, vh, and %. Relative units are essential for responsive, accessible design (rem in particular respects a user's browser font-size preference), but converting between them mentally is genuinely difficult, since the result depends on context: the root font size, the current element's font size, or the viewport dimensions. This converter does that math for you: set your base font size, viewport dimensions, and the value you're converting from, and see the equivalent value in every other unit instantly — useful for translating a design mockup's pixel measurements into responsive rem/vw values, or double-checking what an existing CSS rule actually renders as on screen.

When to Use This Calculator

  • When translating a designer's pixel-based spec into responsive rem or vw values for CSS
  • When checking what a vw-based responsive font size actually renders as at a specific screen width
  • When converting legacy pt-based print or email CSS to web-standard px or rem
  • When auditing whether a design system's spacing scale lines up cleanly across different units
  • When sanity-checking a CSS value during code review without opening browser dev tools
  • When building accessible sites that need rem-based sizing to respect user font preferences

Steps:

  1. Enter the value you want to convert and select its starting unit.
  2. Set your base font size (defaults to the browser standard of 16px).
  3. For vw/vh conversions, enter your target viewport width and height.
  4. Read the equivalent value in every other unit instantly.

Formula

1rem = 1em = base font size (default 16px) 1pt = 96/72 px ≈ 1.333px 1vw = viewport width / 100 1vh = viewport height / 100 1% = reference value / 100

Use Cases

  • Converting a designer's pixel-based Figma/Sketch spec into rem values for accessible CSS
  • Checking what a vw-based responsive font size actually renders as at a specific screen width
  • Translating legacy pt-based print or email CSS into web-standard px or rem
  • Auditing whether a design system's spacing scale lines up cleanly across units
  • Quickly sanity-checking a CSS value during code review without opening dev tools

Key Benefits

  • Converts between all 7 common CSS units in one place
  • Uses your actual base font size and viewport, not a fixed assumption
  • Instant results as you type — no need to open browser dev tools
  • Free, no sign-up, runs entirely in your browser

Pro Tips

  • Prefer rem over em for font sizes to avoid unexpected compounding in nested components
  • Use dvh/svh instead of vh for mobile full-screen layouts if your target browsers support it
  • Keep a consistent base font size across your design system so rem conversions stay predictable
  • When translating a pixel-perfect design, convert spacing to rem but keep border-widths and other fine details in px

Common Mistakes to Avoid

  • Assuming 1rem always equals 16px, without checking if the root font size was changed
  • Using vh for mobile full-height layouts without accounting for browser address bar behavior
  • Nesting em-based font sizes and being surprised when they compound unexpectedly
  • Mixing px and rem inconsistently within the same component, breaking accessibility scaling

Key Terms Explained

Root font size: The font-size set on the html element, which all rem units are relative to
Viewport: The visible area of a web page in the browser window
Absolute unit: A unit like px or pt with a fixed real-world size, not relative to any context
Relative unit: A unit like rem, em, vw, or % whose size depends on another value

Related Concepts

Example

At a 16px base font size, 1.5rem converts to 24px. At a 1440px viewport width, 5vw converts to 72px.

Interpreting Your Results

The converter takes a value in one CSS unit and shows equivalent values in all others. The key variable is your base font size (default 16px), which determines the rem-to-px relationship. Since rem is relative to the root html element's font size, changing this base value will shift all rem equivalents proportionally. For responsive units (vw, vh), enter your target viewport dimensions to see how the values translate at specific screen sizes. This is particularly useful for understanding whether a 5vw heading will be readable on a 320px mobile screen (16px) versus a 1440px desktop (72px). The converter helps you make informed decisions about which unit to use in each context.

Frequently Asked Questions

What's the difference between rem and em?
rem is always relative to the root (html) element's font size, so it stays consistent no matter how deeply nested an element is. em is relative to the current element's own font size, which means it can compound when nested — this tool treats both the same way for simplicity, using your base font size.
Why does 1rem usually equal 16px?
16px is the default browser font size for the root html element in virtually every browser. Since rem is relative to that root size, 1rem equals 16px unless the page (or the user's browser settings) explicitly changes the root font size.
What are vw and vh used for?
vw (viewport width) and vh (viewport height) are percentages of the browser window's current width and height — 1vw equals 1% of the viewport width. They're commonly used for full-screen layouts and responsive typography that scales with the screen.
Is a pixel always exactly 1/96th of an inch?
By CSS specification, yes — a CSS pixel is defined as 1/96th of an inch, which is also why 1pt (1/72 of an inch) converts to exactly 96/72 = 1.333 CSS pixels.
When should I use rem vs px for font sizes?
Use rem for font sizes to support accessibility — it respects users who change their browser's default font size. Use px for border widths, shadows, and other fine details where you want fixed sizes. Most modern design systems use rem for spacing and typography, and px only for small decorative elements.
What happens if the user changes their browser font size?
If you use rem units, your entire layout scales proportionally with the user's font size preference. This is a major accessibility win — users with visual impairments can enlarge text without breaking your layout. If you use px, the layout stays fixed and users can't easily resize text.
Why is 1rem usually 16px?
16px is the default font size for the root html element in virtually every browser. Since rem is relative to this root size, 1rem equals 16px by default. Users or developers can change this base size, which is exactly why rem is useful — all rem values scale when the base changes.
What are dvh, svh, and lvh?
These are newer viewport height units: dvh (dynamic viewport height) adjusts as the browser address bar shows/hides, svh (small viewport height) uses the smallest possible height, and lvh (large viewport height) uses the largest. They solve the classic mobile vh problem where content is hidden behind the address bar.
Can I use rem for margins and padding?
Yes, and it's recommended for consistent spacing. Many design systems define a spacing scale in rem (e.g., 0.25rem, 0.5rem, 0.75rem, 1rem, 1.5rem, 2rem) so all spacing values are multiples of 4px at 16px base font size. This creates visual rhythm and scales with user font preferences.
How do I convert a pixel design to rem?
Divide each pixel value by your base font size (usually 16). For example: 24px = 1.5rem, 32px = 2rem, 48px = 3rem. For odd numbers, round to the nearest 0.25rem for clean values. Spacing that's 1px or 2px can stay in px since such tiny values don't need scaling.
What is the difference between em and rem?
rem is always relative to the root (html) element's font size, staying consistent regardless of nesting. em is relative to the current element's font size, which compounds when nested — a 1.5em heading inside a 1.2em paragraph renders as 1.5 x 1.2 x base = 28.8px. Use rem for predictable sizing.

Discover More Tools

Fresh picks from across our tool library.

Savings Goal Calculator

Grade Calculator

Work Calculator

Net Revenue Retention Calculator

Prime Factorization Calculator

Baby Cost Calculator