Convert CSS units instantly: px to rem, rem to em, px to vw/vh, pt, and percent. Set custom base font size and viewport dimensions for accurate results.
Context Settings
CSS Units Converter is a free online tool that converts any CSS length value between all common units: px, rem, em, pt, pc, vw, vh, and percent. Enter a value in any unit and instantly see the equivalent in every other unit. Configure the root font size, parent element size, and viewport dimensions to get accurate context-aware conversions that match your project's CSS setup exactly.
Use CSS Units Converter when translating design specs from tools like Figma (which outputs px values) into accessible rem values for your stylesheet, converting legacy px-based code to a rem-based design system, or understanding what viewport-relative values like 2.5vw equal in pixels at a given screen size. It is also useful when working with CSS-in-JS libraries where you need numeric values rather than CSS strings.
Front-end developers use CSS Units Converter to convert Figma-exported px values to rem for accessible typography, verify that rem-based spacing values produce the correct pixel output, calculate vw equivalents for fluid type sizing with clamp(), convert print stylesheets between pt and px, and validate that percentage-based widths match expected pixel dimensions at specific viewport sizes.
Essential terms and definitions related to CSS Units Converter.
CSS units with a fixed size not affected by other elements or user preferences. px is the primary absolute unit for screens. pt and pc are absolute units historically from print. Absolute units ignore browser font size settings, which can create accessibility issues when used for text sizing.
CSS units whose size depends on another value. rem is relative to the root font size. em is relative to the parent font size. % is relative to the parent element. vw and vh are relative to the viewport dimensions. Using relative units for font sizes improves accessibility because they respect user browser preferences.
The computed font size of the <html> element. It is the reference value for all rem calculations. Browsers default to 16px if no stylesheet overrides it. Setting html { font-size: 62.5% } makes the root font size 10px (62.5% of 16px), making rem math easier (1.6rem = 16px) at the cost of overriding user font preferences.
CSS units relative to the browser viewport size. 1vw = 1% of the viewport width, 1vh = 1% of the viewport height. Newer viewport units include dvw/dvh (dynamic, changes as browser chrome appears/disappears), svw/svh (small, excludes chrome), and lvw/lvh (large, includes chrome). These enable font sizes and element dimensions that scale with the browser window.
px (pixel) is an absolute unit tied to screen pixels — it never changes based on user preferences. rem (root em) is relative to the root element font size (the <html> element), defaulting to 16px in most browsers. Changing the root font size scales everything in rem. em is relative to the nearest ancestor's font size — it can compound unexpectedly when nested. For font sizes and spacing, rem is generally the safest choice because it respects user accessibility settings (browser zoom and font size preferences).
Accessibility. Users can change their browser's default font size (Settings → Fonts) to compensate for vision difficulties. When you use px for font sizes, these user preferences are overridden and the text ignores the user's desired size. Using rem means your font sizes scale proportionally with user preferences. WCAG 2.1 Success Criterion 1.4.4 requires text to be resizable up to 200% without loss of content or functionality — rem helps meet this requirement.
The default browser base font size is 16px, which means 1rem = 16px. This is the most common setting and this tool defaults to 16px. Some developers set html { font-size: 62.5% } to make 1rem = 10px, simplifying math (e.g., 24px = 2.4rem). However, this approach overrides user font size preferences and is not recommended for accessibility. If you use a different base font size, enter it in the "Root Font Size" field.
vw (viewport width) and vh (viewport height) are relative to the browser viewport dimensions. 1vw = 1% of the viewport width. Use vw for fluid typography that scales with the viewport: font-size: clamp(1rem, 2.5vw, 2rem). Use vh for full-height sections: height: 100vh. Use vw/vh sparingly for spacing — viewport-relative spacing can feel too large on wide screens. On mobile, 100vh has a known issue with browser chrome (address bar); use 100dvh (dynamic viewport height) for more predictable results.
In the context of font-size, em and % behave identically — both are relative to the parent element's font size. 1em = 100%. The difference appears with other properties: em always refers to the current element's font size (not parent) when used for margin, padding, and width. So if an element has font-size: 1.5rem and padding: 1em, the padding is 1.5 × 16px = 24px. For layout spacing relative to text size, em on padding/margin is useful for components that should scale with their own font size.
pt (point) is a typographic unit from print design where 1pt = 1/72 inch. At 96dpi screen resolution, 1pt ≈ 1.333px. Points are rarely used in web development because they are not as predictable across screen densities. They appear in CSS when specifying print stylesheets (@media print) where physical paper dimensions are relevant, or when integrating with design assets from print-focused tools. For screen design, stick to px, rem, or em.
Common errors developers encounter and how to resolve them.
rem values not matching expected pixel sizes on the page The browser default font size is 16px, but the root (<html>) element font size may have been overridden with CSS. Check your stylesheet for html { font-size: ... } or :root { font-size: ... } and use that value in the "Root Font Size" field. If the root is set to 62.5%, enter 10 as the base font size (16 × 0.625 = 10). You can also inspect the root font size in DevTools by selecting the <html> element and checking computed styles.
em values producing unexpected results in nested elements em compounds: if a parent has font-size: 1.2em and a child also has font-size: 1.2em, the child's actual size is 1.44× the base (1.2 × 1.2). Use the "Parent Element Size" field to set the actual computed font size of the immediate parent element, not the root. View the parent's computed font size in DevTools (Computed tab → font-size) to get the accurate value.
vw/vh not matching the expected visual size on mobile Mobile browsers subtract the browser chrome (address bar, navigation bar) from the viewport height dynamically. On mobile, 100vh equals the viewport height when the chrome is hidden, which is larger than the visible area. Use 100dvh (dynamic viewport height) for the visible area or 100svh (small viewport height) for the most conservative calculation. These CSS units are supported in Chrome 108+, Safari 15.4+, and Firefox 101+.