About CSS Unit Converter

Convert between 14+ CSS units: px, rem, em, vw, vh, vmin, vmax, pt, cm, mm, in, %, ch, ex. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.

Use Cases

• Converting pixel-based designs to rem units for accessibility
• Translating Figma pixel values to responsive CSS units
• Calculating viewport units for full-screen hero section layouts
• Converting legacy px stylesheets to modern rem-based systems

Tips

• Set your base font size to get accurate rem conversions
• Convert px to rem for scalable, accessible typography
• Use vw/vh conversions for responsive viewport-based layouts

Fun Facts

• The rem unit was introduced in CSS3 and stands for 'root em,' always relative to the html element's font size.
• The default browser font size of 16px has remained unchanged since the early days of CSS in the mid-1990s.
• The CSS ch unit, based on the width of the '0' character, was introduced to help size input fields for expected character counts.

FAQ

Which units are supported?

px, em, rem, %, pt, pc, in, cm, mm, vw, vh, vmin, vmax, ch, ex. Plus the newer container query units (cqw, cqh, cqi, cqb).

What's my base font size?

Configurable — default 16px (browser default). em/rem calculations depend on this; viewport units depend on window size which you set too.

When should I use rem vs em?

rem: always relative to root — consistent across components. em: relative to the current element's font-size — useful for proportional padding/margin within a component.

What about cqw and cqh?

Container query units — relative to the nearest container with `container-type` set. Make components truly responsive to their parent, not the viewport.