Em/Rem Calculator
Convert PX to EM and REM instantly based on your typographic hierarchy.
PX vs EM vs REM
Understanding CSS units is crucial for building accessible and responsive web typography. Here is how the three main units differ:
- PX (Pixels): Absolute units.
16pxis always exactly 16 pixels regardless of user settings or where the element is nested. They do not scale automatically if a user changes their browser's default font size, making them poor for accessibility. - EM: Relative to the font size of its direct parent. If a parent container has a font size of
20px, applying1.5emto a child element makes it30px(20 * 1.5). EM values compound when nested, which can lead to unexpected scaling if you aren't careful. - REM (Root EM): Relative to the font size of the root element (the
<html>tag). If your root font size is16px,2remwill always be32px, no matter how deeply nested the element is. This makes REM predictable while still remaining accessible to user browser preferences.
When to use EM vs REM
A common modern practice is to use REM for global sizing (typography, overall layout dimensions) and EM for local, component-level sizing.
For example, if you build a button component, you might set its padding and border-radius using EM units (like padding: 0.5em 1em;). This way, if you change the button's font-size, the padding scales proportionally automatically without having to write extra CSS rules.
Why is the default root size 16px?
By default, almost all desktop and mobile browsers have their root font size set to 16px. This is considered the optimal baseline reading size. When building web applications, it is a best practice to never set the root <html> font-size in explicit pixels (e.g. html { font-size: 16px; }) as this overrides the user's browser settings. Instead, rely on the default 100% and use REM units to scale from there.