CSS Unit Converter

Convert CSS units bidirectionally between px, rem, em, vw, vh, %, and pt. Configure the base font size (default 16 px) and viewport dimensions for accurate vw/vh/% conversions. This tool is essential for any front-end developer working with responsive layouts, design systems, or accessibility-compliant stylesheets.

Unit guidance: Use rem for font sizes and spacing to respect user accessibility preferences. Use em for component-relative sizing. Use vw/vh for viewport-responsive layouts. Use px for borders, shadows, and fine details that should not scale. Use pt when translating between design tools and CSS.

Understanding each CSS unit is critical for building maintainable and scalable stylesheets. Pixel values (px) are absolute and do not scale with user preferences, making them suitable only for fixed-dimension properties like borders, outlines, and box shadows. Root em values (rem) are relative to the root element font size, which defaults to 16 px in most browsers but can be overridden by user settings. This makes rem the preferred unit for font sizes, padding, and margin because it respects accessibility preferences. Element em values (em) are relative to the current element inherited font size, which makes them useful for component-level scaling where child elements should proportionally resize with their parent.

Viewport units (vw and vh) are relative to the browser viewport dimensions. One vw unit equals one percent of the viewport width, and one vh unit equals one percent of the viewport height. These units are powerful for hero sections, full-screen layouts, and typography that scales with the viewport. However, they can cause issues on mobile devices where the viewport changes when the address bar appears or disappears, so test thoroughly.

Percentage units (%) are relative to the parent element dimension. They work differently for horizontal vs vertical percentages: width percentages are relative to the parent width, but height percentages are relative to the parent height only if the parent has an explicit height set. This is a common source of confusion.

Point units (pt) come from the print world, where 1 pt equals 1/72 of an inch. In CSS, 1 pt is defined as exactly 1.333 px (16 px / 12 pt). Design tools like Figma and Photoshop often use pt, so converting between pt and px/rem is common during design handoff.

Tips for responsive design: Use a 4 px or 8 px spacing scale in rem for consistent spacing. For example, 0.25 rem (4 px), 0.5 rem (8 px), 0.75 rem (12 px), 1 rem (16 px). This creates a predictable spacing system that scales with the root font size. Combine clamp() with rem values for fluid typography: clamp(1 rem, 2.5vw, 2 rem) sets a minimum, preferred, and maximum font size.

Common conversion pitfalls: Remember that em values compound — nesting elements with em-based font sizes creates a multiplicative effect. A 0.875 em font inside another 0.875 em font results in 0.765625 em relative to the root. This is why rem is generally preferred for global sizing, while em is reserved for component-scoped scaling.