How this works in your browser
All units are normalised into pixels using your stated base font size, then converted back out into each unit. That base is what makes the relative units meaningful at all: rem, em and percent express a ratio, so without a reference size they describe nothing. Points are converted using the fixed CSS ratio where 96 pixels equal 72 points, a definition inherited from print typography rather than anything about screens, which is why pt has no real place in web layout. The distinction the converter cannot resolve for you is that em compounds through nesting while rem does not, so identical numbers can behave very differently in a real document.
CSS Unit Converter vs. typical online calculators
| Feature | CSS Unit Converter (in-browser) | Typical online calculators |
|---|---|---|
| Where the maths runs | In your browser, on your device | Often posted to a server to compute |
| Your inputs are stored | Never - nothing is sent or saved | Frequently logged with your session |
| Works offline once loaded | Yes | No - needs a live connection |
| Ads inside the result area | None | Common on free calculators |
| Account required | No | Often, to save or export results |
| Usage limits | None - free, unlimited use | Sometimes capped per day |
Who uses CSS Unit Converter
Translating a design handoff
Convert pixel values from a design tool into relative units for CSS.
Moving a codebase to rem
Work out the rem equivalents when refactoring away from fixed pixel sizes.
Understanding relative sizing
See how em, rem and percent relate to a base size.
Checking print stylesheets
Convert between screen units and points where a print layout needs them.
How to use CSS Unit Converter
- 1
Open the CSS Unit Converter
Go to tools.slaytic.com and open the CSS Unit Converter. No sign-up or account required.
- 2
Enter a value and unit
Type a figure in px, em, rem, pt or percent.
- 3
Set your base font size
Use your project's actual root size, commonly 16px.
- 4
Read all five units
Every equivalent is calculated from the value you entered.
Frequently asked questions
What is the difference between em and rem?
em is relative to the font size of its parent element (compounding when nested), while rem is always relative to the root element’s font size - rem is generally more predictable for layout.
What base font size should I use?
Use your project’s actual root font size - commonly 16px by default in most browsers.
How is pt converted?
Using the standard CSS conversion where 96px equals 72pt.
Which unit should I actually use?
rem for font sizes and most spacing, because it respects the user's browser font size setting. px for things that genuinely should not scale, such as hairline borders. em where you want a value to track its own element's font size, most usefully for padding inside a button. Avoid pt on screen entirely; it is a print unit.
Why is em unpredictable when nested?
Because it compounds. An em value inside an element that itself uses em multiplies through every level, so a list nested three deep can end up at a size nobody intended. rem always refers to the root, which is why it is the safer default for anything structural.
Does using px break accessibility?
For text, effectively yes for some users. Browsers scale rem-based text when someone raises their default font size, but a px font size stays fixed. Someone who has enlarged their default because they need to will find your text unchanged, which is the practical harm.
Is a CSS pixel a real screen pixel?
No, and this trips people up on phones. A CSS pixel is a reference unit that maps to multiple device pixels on high-density screens, which is why a 16px font does not look microscopic on a modern phone. The browser handles that mapping for you.