Enter a value to auto-convert between px, rem, em, and pt
Based on 16px base font size
| px | rem | em | pt |
|---|
One value per line, auto-converts all units
px (pixels) is an absolute unit β 1px equals one physical pixel on screen. rem (root em) is relative to the root element's (html) font size. The browser default is 16px, so 1rem = 16px. Using rem helps your layout respect user browser settings for better accessibility.
em is relative to the current element's font size, while rem is always relative to the root (html) font size. Using em can cause compounding effects in nested elements. Generally, rem is preferred for global layout and em for component-specific sizing.
16px is the default font size for all major browsers. Users can adjust this in browser settings, and rem units automatically respect user preferences. Some projects set html { font-size: 62.5% } to make 1rem = 10px for easier mental math.
With a 16px base: rem = px / 16. For example, 32px in your design β 32/16 = 2rem. Some developers set html font-size to 62.5% (10px base) so every rem equals 10px, making conversions even simpler.
pt (point) is a print unit where 1pt = 1/72 inch. In CSS, 1pt β 1.333px. Points are typically used in print stylesheets and are not recommended for screen design because display DPI varies between devices.