CSS Unit Converter

How to Use the CSS Unit Converter

1. Enter a value — type a number in the input field.
2. Select the source unit — choose from px, rem, em, vw, vh, %, pt, cm, mm, or in.
3. Adjust reference values — set your root font size, viewport dimensions, and container width for accurate rem, em, vw, vh, and % conversions.
4. Read the table — all equivalent values in every unit are shown simultaneously.
5. Copy any value — click the copy button next to any row to copy just that value, or click Copy Table to copy all conversions as text.

CSS Units Explained

CSS has a rich set of length units divided into two categories: absolute units (px, pt, cm, mm, in) whose values are fixed regardless of context, and relative units (rem, em, vw, vh, %) whose values depend on a reference — the root font size, the parent element's font size, or the viewport dimensions.

Absolute Units

• px (pixels) — the most common unit for screen design. One CSS pixel is not necessarily one physical pixel — it is 1/96 of an inch at standard 96dpi. On high-DPI displays, the OS scales pixels automatically.
• pt (points) — a typographic unit: 1pt = 1/72 inch = 1.333px at 96dpi. Primarily used in print stylesheets.
• cm, mm (centimeters, millimeters) — metric physical measurements. 1cm = 37.795px at 96dpi. Useful only in print or mixed-media contexts.
• in (inches) — 1 inch = 96px at 96dpi. Same caveat as cm — useful for print, not screen.

Relative Units

• rem (root em) — relative to the root element font size (html { font-size: 16px; } by default). 1rem = 16px, 1.5rem = 24px. Preferred for scalable, accessible layouts because it respects the user's browser font size preference.
• em — relative to the current element's computed font size. Compounds with nesting: if a parent is 1.5em and a child is also 1.5em, the child is effectively 2.25× the root size. Use em for padding and margin inside components when you want them to scale with the component's text size.
• vw (viewport width) — 1vw = 1% of the viewport width. 100vw = full browser width. Useful for full-bleed sections and fluid typography.
• vh (viewport height) — 1vh = 1% of the viewport height. 100vh = full browser height. Note: on mobile browsers, the address bar affects vh — use svh (small viewport height) for a reliable full-screen mobile layout.
• % (percent) — relative to the parent element's value for the same property. For width, it is relative to the parent's width. For font-size, it is relative to the parent's font-size (similar to em).

The 62.5% Root Font Size Trick

A popular technique is to set html { font-size: 62.5%; } which makes 1rem = 10px (since 62.5% × 16px = 10px). This makes rem math easy: 16px = 1.6rem, 24px = 2.4rem. However, this approach can break user font size preferences if not handled carefully — always set a body font-size back to 1.6rem (or similar) when using this technique.

Choosing the Right Unit

• Font sizes — use rem for accessibility (respects browser preference)
• Line height — use unitless numbers (e.g., 1.5) which multiply the element's own font size
• Component padding/margin — use em if it should scale with font size, rem otherwise
• Layout widths — use %, vw, or max-width in px/rem depending on context
• Borders — use px (1px borders should always be exactly 1px)
• Media queries — use em (they behave consistently across different zoom levels)
• Print — use pt, mm, or cm for physical page dimensions

Related Tools

After converting your units, use the CSS Specificity Calculator to debug cascade issues, or try the Cubic Bezier Editor for animation timing. For design token workflows, see the Glassmorphism Generator and Neumorphism Generator.