CSS Unit Converter

This tool converts a length between every CSS unit at once — px, rem, em, pt, pc, in, cm, mm and Q — so you can switch between absolute and relative units without doing the maths by hand. It is useful when translating a design’s physical measurements into pixels, or converting pixel values into responsive rem units.

How it works

The absolute units are anchored to the CSS rule that 1 inch = 96px. Everything is expressed relative to a pixel and converted through px:

The relative units depend on font size: rem uses the root font size and em uses the parent font size, both defaulting to 16px and editable to match your CSS.

Example

Enter 16px:

16px = 1rem (at 16px root) = 12pt = 1pc = 0.1667in = 0.4233cm

So 16 pixels equals exactly 1rem at the default root size, or 12 points.

When to use each unit

Picking the right unit for the job prevents layouts from breaking when users change their browser font size or when a design is printed.

• px — precise pixel values; good for borders, shadows, and images. Ignores the user’s font-size preference when used for type.
• rem — scales with the root font size; the best choice for font sizes, padding, and spacing that should respect the user’s browser setting. At the 16 px default, 0.875rem = 14px, 1.5rem = 24px.
• em — scales with the parent element’s font size; useful for padding or margin that should grow proportionally with the text inside a component, but can cause compounding if nested deeply.
• pt / pc — used in print stylesheets; 1pt ≈ 1.33px on screen. Useful when a design specifies measurements in points (common in typography tools).
• in / cm / mm — physical units in print; on screen they resolve through the 96px/inch rule and are rarely used outside @media print.
• Q (quarter-millimetre) — a typographic unit common in Japanese CSS; 1Q = 0.25mm ≈ 0.945px.

Common conversions at a glance

All conversions run entirely in your browser — nothing you enter is sent to a server.