CSS Unit Converter

This CSS Unit Converter is a free online utility designed for web developers, UI designers, and front-end engineers who need to translate values between different CSS units quickly and accurately. Whether you are converting pixel values from a Figma design into rem for accessibility, figuring out how many points a font size should be for print stylesheets, or calculating viewport-relative dimensions for a responsive layout, this tool eliminates manual math and reduces the risk of rounding errors. For more design utilities, try our gradient generator or box shadow generator.

Choosing between px, rem, and em is one of the most consequential decisions in CSS architecture because it directly affects accessibility, maintainability, and how your design behaves across devices and user preferences. Pixels are the simplest mental model: if you set a font size to 16px, it will always render as 16 device pixels, regardless of user settings. This predictability makes px ideal for borders, box shadows, and media query breakpoints where you need a fixed threshold. However, this rigidity becomes a liability for text and spacing because it overrides the user's browser font-size preferences, making your site harder to read for people with visual impairments.

rem solves the accessibility problem by anchoring all sizes to the root font size. When you set an element to 1rem, it equals the browser's default 16px, but if the user changes their base font size to 20px, your 1rem text automatically scales to 20px. This makes rem the industry standard for global typography, margin, and padding in modern design systems. em, on the other hand, is relative to the font size of the element itself. This creates a powerful scaling effect inside components: if you build a card component where padding is set in em, doubling the card's font size will also double its internal padding, preserving the visual proportions without extra media queries. The trade-off is that em compounds in nested elements, which can lead to unexpected sizes if you are not careful.

Here is a practical comparison in code:

/* px: fixed, predictable, but not accessible for text */
.button-px {
  font-size: 14px;
  padding: 8px 16px;
}

/* rem: scales with the root font size, accessible */
.button-rem {
  font-size: 0.875rem; /* 14px by default */
  padding: 0.5rem 1rem;
}

/* em: scales with the element's own font size */
.card-em {
  font-size: 1.25rem;
  padding: 1em; /* equals 1.25rem here */
}

As a rule of thumb, use rem for global sizing, em for component-local scaling, and px for anything that should remain constant regardless of context.

Viewport units break the dependency on parent containers and let you size elements directly against the browser window. This makes them uniquely powerful for responsive design. For example, setting a hero section to height: 100vh guarantees it fills the entire screen height on any device, from a phone to an ultrawide monitor, without needing JavaScript or complex flexbox tricks. Similarly, width: 50vw creates an element that is exactly half the screen width, even if its parent is narrower.

vmin and vmax add an extra layer of responsiveness by referencing the smaller and larger of the two viewport dimensions. A value of padding: 4vmin ensures your spacing feels balanced whether the user holds their phone in portrait or landscape mode, because it always scales against the shorter edge. Viewport units shine in fluid typography systems: font-size: clamp(1rem, 2.5vw, 2rem) produces text that grows smoothly between mobile and desktop while respecting accessibility minimums. One caution is that 100vh on mobile browsers can include the address bar, so consider using the newer dvh unit or JavaScript fallbacks for precise full-screen layouts.

While modern web design heavily favors relative units for screen media, absolute units remain essential for print-specific stylesheets and PDF generation. When a user prints a webpage or you export it to PDF through a tool like Puppeteer or Playwright, physical units such as pt (points), pc (picas), in (inches), cm (centimeters), and mm (millimeters) map to real-world measurements on paper. A font size of 12pt is a standard reading size in print, and margins defined in cm ensure consistent layouts across different printers and paper sizes.

In CSS, 1 inch is defined as exactly 96px, which means 1pt equals 1.3333px and 1pc equals 16px. These conversions are standardized, so you can confidently translate between screen and print units using this calculator. Points are the most common unit in graphic design software like Adobe InDesign and Illustrator, so receiving a brand guideline in pt is typical. Picas are less common today but still appear in traditional publishing workflows. Centimeters and millimeters are intuitive for international teams and scientific publishing. The best practice is to maintain a separate @media print stylesheet where you switch screen-relative units to absolute physical units, ensuring your layout translates faithfully from pixels on a monitor to ink on a page.

Imagine your design team delivers a Figma file where every spacing token is defined in pixels: 4px, 8px, 16px, 24px, 32px, 48px, and 64px. Your engineering team wants to implement these as rem values using the standard 16px base font size for accessibility compliance. The conversion is straightforward: divide each pixel value by 16 to get the rem equivalent. Using this calculator, entering 16px outputs 16rem? No—wait, let us be precise. If you enter 16px and look at the rem equivalent, you need to understand the relationship in reverse. Actually, to convert 16px to rem with a 16px base, the result is 1rem. Here is the full mapping:

/* Design tokens in px -> rem (base 16px) */
--space-1: 0.25rem;   /* 4px  */
--space-2: 0.5rem;    /* 8px  */
--space-3: 1rem;      /* 16px */
--space-4: 1.5rem;    /* 24px */
--space-5: 2rem;      /* 32px */
--space-6: 3rem;      /* 48px */
--space-7: 4rem;      /* 64px */

By converting to rem, your entire spacing system scales automatically when a user increases their browser font size. If a visually impaired user sets their base font size to 20px, those same tokens compute to 5px, 10px, 20px, 30px, 40px, 60px, and 80px respectively—preserving the proportional rhythm while respecting the user's accessibility needs. For more developer tools, explore our best free online calculators.