UseToolSuite UseToolSuite

CSS Units Converter

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.

Last updated

CSS Units Converter is a free, browser-based tool from UseToolSuite's Color & CSS Tools collection. All processing happens locally on your device — your data is never uploaded to any server. Use the tool below, then scroll down for detailed documentation, frequently asked questions, and related resources.

Advertisement

Context Settings

What is CSS Units Converter?

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.

When to use it?

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.

Common use cases

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.

What is the CSS Units Converter?

The CSS Units Converter is a straightforward utility designed to mathematically translate absolute pixel values (px) into scalable, responsive units like em, rem, vh, and vw. Modern web design requires building interfaces that scale perfectly across mobile phones, tablets, and massive desktop monitors. Using relative units like rem (root em) ensures that your typography and spacing scale according to the user's browser accessibility settings, rather than remaining fixed at a rigid pixel size.

How does it work?

The tool relies on simple client-side mathematical calculations based on a defined "base" value. By default, most browsers use a root font size of 16px. If you input 24px and set the base to 16px, the tool divides 24 by 16 to instantly output 1.5rem. It provides bidirectional conversions across multiple unit types simultaneously, updating all output fields in real-time as you type, without requiring any page reloads or server requests.

Common use cases

Frontend engineers use the CSS Units Converter when migrating a legacy, pixel-based website to a modern, fully responsive architecture based on rem units. Web designers use it when translating fixed-pixel values from a Figma or Sketch mockup into the fluid CSS required for the actual build. Accessibility specialists use it to ensure that all typography is built using scalable units, allowing visually impaired users to successfully zoom the interface.

Absolute vs relative — and why it matters for accessibility

The core split: absolute units (px) are fixed, while relative units (rem, em, %, vw) depend on something else. For font sizes this isn’t just preference — it’s accessibility. Users can change their browser’s default font size to cope with low vision, and px font sizes ignore that preference, while rem scales with it. WCAG 2.1 (1.4.4) requires text to resize to 200% without breaking, which rem-based sizing helps satisfy. The default base is 16px, so 1rem = 16px unless the root font-size is overridden.

Pick the unit by what you’re sizing

There’s no single “best” unit — match it to the job:

PropertyReach forWhy
Font sizeremRespects user zoom preference
Component padding tied to its textemScales with the element’s own font size
Layout width/height%, fr, pxRelative to parent or fixed
Full-viewport sectionsdvh/svhMobile-chrome-safe (not bare vh)
Fluid typeclamp() w/ vwContinuous scaling
Context-aware componentscqi/cqwRelative to the container

The em-compounding trap

em is relative to the parent’s font size, so it compounds when nested: a 1.2em element inside another 1.2em element renders at 1.44× the base. That’s powerful for components that should scale as a unit, but it’s a frequent source of “why is this text huge three levels deep?” bugs. When in doubt for font sizing, rem (always relative to the root) avoids the surprise; reserve em for padding/margins you want to track the element’s own text size.

The mobile vh fix

100vh on mobile is taller than the visible area because it includes the space behind the browser’s address bar, causing content to be cut off or jump as the bar hides. Use 100dvh (dynamic viewport height, adjusts as chrome appears/disappears) or 100svh (small viewport height, the conservative choice) instead. These are supported in current Chrome, Safari, and Firefox and fix the classic “full-height section is slightly too tall on mobile” problem.

How helpful was this tool?

Click to rate

Advertisement

Key Concepts

Essential terms and definitions related to CSS Units Converter.

Absolute Units

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.

Relative Units

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.

Root Font Size

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.

Viewport Units

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.

Frequently Asked Questions

What is the difference between px, rem, and em?

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).

Why should I use rem instead of px for font sizes?

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.

What is the standard base font size for rem calculations?

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.

When should I use vw and vh units?

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.

What is the difference between % and em?

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.

What is a pt and when would I use it?

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.

How do I make fluid typography that scales smoothly between two sizes?

Use clamp(), which takes a minimum, a preferred (fluid) value, and a maximum: font-size: clamp(1rem, 0.5rem + 2vw, 2rem). The middle value usually mixes a rem base with a vw term so the text grows with the viewport, while the min and max stop it from getting too small on phones or absurdly large on wide monitors. This replaces a stack of media-query breakpoints with one line that scales continuously. Keep a rem in the preferred value (not pure vw) so the text still respects user zoom and stays accessible — pure-vw font sizing can prevent users from enlarging text, which fails WCAG. Convert your target px sizes to rem here, then drop them into the clamp().

What are container query units (cqw, cqi) and when do I use them?

Container query units size things relative to a CONTAINER's dimensions instead of the viewport. cqw is 1% of the query container's width, cqi 1% of its inline size (plus cqh, cqb, cqmin, cqmax). The point: a card component can scale its own padding and font size based on how wide the card is, not how wide the screen is — so the same component looks right whether it's in a narrow sidebar or a wide main column. That's something viewport units (vw/vh) fundamentally can't do, because they only know about the window. Use cqi/cqw inside an element whose ancestor has container-type set. They're supported in all current major browsers and are the modern answer to truly reusable, context-aware components.

Troubleshooting & Technical Tips

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+.

Advertisement

Related Tools

CSS Grid Generator

Color & CSS Tools

Aspect Ratio Calculator

Color & CSS Tools

Tailwind CSS Converter

Color & CSS Tools

Box Shadow Generator

Color & CSS Tools

CSS Gradient Generator

Color & CSS Tools