Convert between px, em, rem, pt, vw, vh, cm, mm, and in
px — Absolute pixel unit. em — Relative to parent element's font size. rem — Relative to root (html) font size. pt — Points (1pt = 1/72 inch). vw/vh — Percentage of viewport width/height. cm/mm/in — Physical units (at 96 DPI).
CSS supports numerous units and knowing when to use each is crucial for responsive design. Pixels (px) are absolute and predictable. Rem is relative to the root font size — ideal for consistent scaling across components. Em is relative to the parent element's font size — useful for component-internal spacing. Viewport units (vw/vh) scale with the browser window — perfect for full-screen sections and fluid typography. Percentages are relative to the parent element. Points (pt) and centimeters (cm) are for print stylesheets. This converter handles bidirectional conversion between all common CSS units, accounting for the base font size that affects rem/em calculations. Essential for migrating legacy px-based designs to modern responsive rem-based systems.
Use rem for typography and spacing — it respects user font-size preferences and scales consistently. Use px for borders, shadows, and decorative details where exact sizing matters. Most modern CSS frameworks use rem as default.
Browsers default to 16px root font size. So 1rem = 16px, 0.875rem = 14px, 1.25rem = 20px. Some developers set html { font-size: 62.5% } to make 1rem = 10px for easier mental math.
vw/vh are ideal for full-screen hero sections (height: 100vh), fluid typography (font-size: 3vw), and responsive spacing. Be careful: 100vh on mobile doesn't account for browser chrome — use 100dvh (dynamic viewport height) instead.
rem is always relative to the html element's font size (consistent everywhere). em is relative to the current element's parent font size (compounds with nesting). rem is generally preferred for its predictability; em is useful for component-relative sizing.
Divide px values by 16 (or your root font size). 24px = 1.5rem, 14px = 0.875rem, 48px = 3rem. This converter does the math instantly. Consider using a CSS preprocessor function for batch conversion in large codebases.