CSS Unit Converter

What Is a CSS Unit Converter?

A CSS unit converter translates values between the many measurement units available in CSS — pixels, rems, ems, viewport units, physical units (cm, mm, in, pt), and more. Unlike a simple multiply-by-factor tool, this converter accounts for the context-dependent nature of CSS units: font-relative units depend on the base font size, viewport units depend on screen dimensions, and percentage units depend on the parent element’s size.

CSS Unit Categories

Absolute Units

Absolute units map to real-world physical measurements and are fixed regardless of screen settings.

When to use absolute units: px for screen design; pt and cm for print stylesheets. Avoid cm/mm/in for screen layouts — monitors don’t display at exactly 96 dpi.

Font-Relative Units

Font-relative units scale with the current font size, making them ideal for accessible, zoomable layouts.

rem vs em: rem is always relative to the root (predictable); em is relative to the nearest ancestor with an explicit font size (can compound through nesting). For layout and typography, prefer rem. Use em for component-level proportional sizing where elements should scale with their own font-size.

Viewport Units

Viewport units are relative to the browser window dimensions, enabling truly responsive full-screen layouts.

Practical use: 100vh fills the full viewport height (ideal for full-screen sections). vw is useful for fluid typography and containers that should scale with the window width. vmin ensures elements stay visible on both portrait and landscape orientations.

Mobile caveat: On mobile browsers, 100vh includes the URL bar — use the new dvh (dynamic viewport height) unit in modern browsers to avoid this issue.

Percentage

% is relative to the parent element’s corresponding dimension. For width, 1% = 1% of the parent’s width. For font-size, 1% = 1% of the parent’s font-size.

How to Convert px to rem

The formula is straightforward:

rem = px ÷ baseFontSize

With the standard browser default of 16px:

Why use rem? When users change their browser’s default font size (an accessibility setting), rem-based layouts scale proportionally. px values are fixed and override this preference — a significant accessibility concern.

How to Convert px to em

em uses the same formula as rem when converting from px:

em = px ÷ currentFontSize

However, em refers to the current element’s font size, not the root font size. In a component with font-size: 20px, 1.5em = 30px — not 24px as with the root 16px baseline.

This is why em can compound in nested elements: if a parent has font-size: 1.2em and a child also has font-size: 1.2em, the child ends up at 1.2 × 1.2 = 1.44em relative to the root — a common cause of unexpected type scaling in CSS.

How to Convert px to Viewport Units

Viewport unit conversions depend on the viewport dimensions:

vw = (px ÷ viewportWidth) × 100
vh = (px ÷ viewportHeight) × 100

Example (1440×900 viewport):

• 288px = (288 ÷ 1440) × 100 = 20vw
• 90px = (90 ÷ 900) × 100 = 10vh

Use the Settings panel in this tool to match your target viewport breakpoint (e.g., 1440×900 for desktop, 390×844 for iPhone 14).

When to Use Each CSS Unit

The Pixel Is Not a Screen Pixel

A CSS px is a reference unit defined as 1/96th of an inch, independent of physical screen resolution. On a 2x Retina display, 1 CSS pixel is rendered using 2 physical pixels per side (4 physical pixels total). This is handled transparently by the browser — your CSS values always refer to CSS pixels.

This is why high-DPI displays look sharper: they have more physical pixels per CSS pixel, allowing the browser to render smoother edges, thinner lines, and crisper text without changing your layout.

Point (pt) vs Pixel (px): A Print Legacy

Points (pt) come from the print world where 72 points = 1 inch. In CSS at 96dpi:

1pt = 96/72px = 1.333...px
12pt ≈ 16px   (common body text)
10pt ≈ 13.3px

Figma and Sketch display dimensions in points (matching iOS), so you may need to convert point values from design files to CSS pixels. This tool converts between pt and px exactly.

Responsive Design Workflow

A typical workflow converting a static design to responsive CSS:

1. Get pixel values from your design tool (Figma, Sketch, XD)
2. Convert to rem for font sizes and spacing (divide by your root font size)
3. Convert to vw/vh for full-width/height containers
4. Use px only for fixed elements (borders, box shadows, 1px lines)
5. Use em for internal padding in buttons and components that should scale with their font

/* Static design: heading is 32px */
/* Root font: 16px */
h1 {
  font-size: 2rem;       /* 32 ÷ 16 = 2 */
  margin-bottom: 1.5rem; /* 24 ÷ 16 = 1.5 */
}

/* Full-screen hero */
.hero {
  height: 100vh;
  width: 100%;
}

Frequently Asked Questions

What is the default browser font size? All major browsers default to 16px for the root font size. Users can change this in browser settings (typically to 20px or 24px for accessibility). rem-based layouts will scale accordingly; px-based layouts will not.

Why does 1rem = 16px by default? 16px is the CSS specification default for the <html> element’s font size when no other styles are applied. It’s approximately the size that humans find comfortable for reading body text at typical monitor distances.

Can I use fractional px values? Yes. CSS accepts sub-pixel values like 0.5px or 1.5px. Browsers handle sub-pixel rendering differently — some snap to the nearest physical pixel, others use anti-aliasing. For border widths, 1px is most reliable.

What are dvh, svh, lvh? These are newer viewport units that address the mobile browser URL-bar problem. dvh = dynamic viewport height (changes as the URL bar shows/hides), svh = small viewport height (always the smaller size with URL bar visible), lvh = large viewport height (always the full size). This tool converts vh — for the newer units, multiply the vh result by the appropriate viewport dimension.

Does % always refer to the parent width? Not always. % in width refers to the parent’s width. In height, it refers to the parent’s height. In margin and padding (all four sides), it always refers to the parent’s width — even for top/bottom. In font-size, it refers to the parent’s font size. Set the “Parent Size” configuration to match whichever dimension applies to your use case.