How It Works
Every CSS unit ultimately maps to a pixel value on screen. This tool converts between units using these formulas:
| Conversion | Formula | Example (base 16px) |
|---|---|---|
| px to rem | px / baseFontSize | 24px / 16 = 1.5rem |
| rem to px | rem * baseFontSize | 1.5rem * 16 = 24px |
| em to px | em * baseFontSize | 1.5em * 16 = 24px |
| pt to px | pt * 1.333 | 12pt * 1.333 = 16px |
| px to pt | px / 1.333 | 16px / 1.333 = 12pt |
| % to px | (% / 100) * baseFontSize | 150% / 100 * 16 = 24px |
| vw/vh to px | (vw / 100) * viewportWidth | 50vw / 100 * 1920 = 960px |
Note on em: In real CSS, em is relative to the parent element's font size, not the root. This tool uses the base font size as a simplified approximation. For deeply nested elements, the actual computed value may differ.
PX vs REM vs EM: When to Use Each
| Unit | Relative To | Best For | Example |
|---|---|---|---|
| px | Nothing (absolute) | Borders, shadows, precise layouts | border: 1px solid |
| rem | Root font size (<html>) | Typography, spacing, responsive layouts | font-size: 1.125rem |
| em | Parent font size | Component-scoped sizing, padding relative to text | padding: 0.5em 1em |
| pt | 1/72 of an inch | Print stylesheets, PDF generation | font-size: 12pt |
| % | Parent element | Fluid widths, responsive font scaling | width: 50% |
| vw | Viewport width | Full-width sections, fluid typography | font-size: 5vw |
| vh | Viewport height | Full-height sections, hero banners | height: 100vh |
Rule of thumb: Use rem for most font-size and spacing values. Use px for borders and box-shadows where you want exact pixel control. Use em when you want an element's dimensions to scale with its own font-size (like padding on a button).
FAQ
What's the default browser font size?
All major browsers set the default root font size to 16px. This means 1rem = 16px unless the user or a stylesheet overrides it. Some developers set html { font-size: 62.5% } to make 1rem = 10pxfor easier math, though this practice is falling out of favor because it forces you to override every element's font size.
Should I use rem or em?
Use rem for global consistency — every rem value maps to the same root size, so 1.5rem always means the same thing regardless of nesting. Use emwhen you want sizing to scale with the element's own font-size, like padding on a button that should grow proportionally when the button text gets larger. Avoid deeply nested em values — they compound, so 1.2em inside 1.2em gives you 1.44em of the root, which gets confusing fast.
How does base font size affect rem?
The rem unit is calculated relative to the <html>element's font-size. If the root is16px (the default), then 1rem = 16px. Change the root to 20px, and 1rem = 20px. This is what makes rem powerful for responsive design — adjust one value and everything scales. Use the base font size control above to see how changing it affects all conversions.
Can I mix px and rem?
Absolutely, and most production codebases do. A common pattern is: rem for font-size, margin, and padding (so they scale with user preferences); px for borders, box-shadows, and outline-offset (where fractional pixels cause blurry rendering); em for component-local padding (so buttons scale with their text). Consistency within each category matters more than using a single unit everywhere.
Need CSS effects? Glassmorphism Generator creates frosted-glass CSS you can combine with any unit system. Or use the Color Converter to find the right colors for your designs.