CSS Unit Converter
Convert between px, rem, em, vw, vh, and more CSS units, in your browser.
Click any value to copy
Why use it
Responsive design without manual calculations
All CSS units
px, rem, em, %, vw, vh, pt, and more. Instant conversion between any pair.
Configurable base
Adjust the base font size to calculate precise rem/em values for your project.
Instant
Real-time results as you type. No buttons, no waiting.
No signup
Daily-use tool available instantly, no accounts or installs.
How it works
Three steps, no hassle
Enter the value
Type the numeric value and select the source unit (e.g., 24px). Adjust the base font size if it differs from 16px.
Get all equivalents
The converter instantly calculates the equivalent in rem, em, %, vw, pt, and other commonly used CSS units.
Use the value in your CSS
Copy the value you need directly into your stylesheet. No manual calculations, no errors.
FAQ
Got questions?
Use px for values that should not scale with user preferences: thin borders (1px), shadows, absolute positions. Use rem for font sizes and spacing that should respect user accessibility preferences: if a user increases the base font size in their browser (most screen readers and low-vision users do this), rem values scale automatically. Use em for values relative to the parent element's font size: useful in components that need to maintain their internal proportions regardless of context.
16px as the base font size was established by web browsers in the late 1990s, derived from typical monitor resolutions of the time (72-96 DPI) and text readability standards for on-screen reading. It is approximately equivalent to 12 typographic points (12pt), the standard size for body text in printed documents since Gutenberg's era. The W3C adopts it as the initial value for the font-size property.
WCAG specification 1.4.4 (Resize Text) requires that text can be increased up to 200% without loss of content or functionality. If you use px for font sizes, the text doesn't scale when the user changes the base size in browser settings (Settings > Appearance > Font Size in Chrome/Firefox). If you use rem, the text scales automatically. This is why accessibility guidelines recommend rem for font-size and line-height, but accept px for borders and decorations.
vw (viewport width) and vh (viewport height) are percentages of the browser window size. 1vw = 1% of the window width. For fluid typography, the CSS clamp() function is used: font-size: clamp(1rem, 2.5vw, 2rem) defines a minimum size (1rem), a preferred size that scales with the viewport (2.5vw), and a maximum (2rem). This produces text that smoothly increases with screen size without abrupt jumps, eliminating the need for media queries for typography.
CSS has absolute physical units: cm, mm, in, pt, and pc. The problem is that on screens, these units don't correspond to their real physical measurements. On high-density screens (Retina, 4K), 1cm in CSS may measure 0.8cm or 1.2cm physically depending on the device and declared DPI. Only in print media (print media queries) do cm and mm exactly correspond to the physical measurement. That's why web designers use px, rem, em, and relative units, reserving absolute units for print styles.
CSS units: specification, history, and the 62.5% trick
The CSS Units and Values specification (CSS Values Level 3) was published by the W3C in 2015 and standardized viewport units (vw, vh, vmin, vmax) that browsers had started implementing experimentally since 2012. Viewport units solve a fundamental problem in responsive design: creating layouts and typographies that adapt to screen size without media queries. CSS Values Level 4 (in advanced draft status) introduces container query units (cqw, cqh, cqi, cqb, cqmin, cqmax), which are percentages of the nearest CSS container rather than the viewport, enabled in all major browsers since late 2022.
The 62.5% trick is a historical technique to simplify rem usage: by setting font-size: 62.5% on the html element (equivalent to 10px assuming a 16px base), rem calculations become trivial (1.6rem = 16px, 2.4rem = 24px). It was popularized by Jonathan Snook around 2011 in the context of growing responsive design. However, this technique has an accessibility problem: if a user has a base font size other than 16px configured in their browser, the 62.5% adjusts it incorrectly, breaking scaling. This is why modern accessibility guidelines discourage this technique in favor of leaving the html font-size unmodified and using rem directly.
CSS Values Level 4 also introduces typographic-relative units: cap (cap height), ch (width of the 0 glyph), ic (width of the CJK water glyph 水), lh (element's line-height), rlh (root line-height), ex (x-height). These units allow creating perfectly typography-proportioned spacing without relying on fixed numeric values. The ch unit is especially useful for setting maximum column widths for text (max-width: 65ch is an optimal readability measure according to typographic research, approximately equivalent to 65 characters per line).