Font sizes in CSS can be specified in multiple units, each with different scaling behaviour. px is absolute; rem scales with the document root font size; em scales with the parent element font size; pt is the print unit; vw scales with viewport width. Converting between them requires knowing the base sizes — this converter handles all five with configurable context values.
px (pixels): absolute unit. On standard screens, 16px is the default browser font size. rem (root em): relative to the root (<html>) font size — 1rem = 16px by default. Use rem for consistent typography across components. em: relative to the parent element's font size — compounding em values in nested elements is a common bug. pt: print unit; 1pt = 1/72 inch = 1.333px at 96 DPI. vw: 1vw = 1% of viewport width — used for fluid, screen-width-relative type.
rem is relative to the root element's font size (usually 16px — consistent throughout the page). em is relative to the nearest ancestor element's font size, which changes based on context. rem is easier to reason about; em is useful for scaling an element's typography relative to its container.
Browsers set the <html> element's font size to 16px by default. Since rem is relative to the root element, 1rem = 16px. If you set html { font-size: 10px }, then 1rem = 10px — a common technique for easy decimal rem math.
For fluid typography that scales with the viewport without breakpoints. Typically combined with clamp(): font-size: clamp(1rem, 2.5vw, 2rem) — sets a minimum (1rem), fluid midpoint (2.5vw), and maximum (2rem).
At 96 DPI (standard screen resolution): 1pt = 1.333px. So 12pt (standard print body text) = 16px. At 72 DPI, 1pt = 1px — the old Macintosh screen resolution that introduced pt-to-pixel confusion.
See also the Border Radius Generator, CSS Gradient Generator, and the Color Converter.