PX to REM
↔
PX vs. REM: Modern CSS Units
In modern responsive web design, using relative units like REM is preferred over absolute units like PX. This ensures your website scales correctly for users with different accessibility settings.
The Formula
REM = Pixels / Base Font SizeStandard Base Size: 16px (Browser Default)
Example: 32px / 16 = 2rem
Why Use REM?
- Accessibility: If a user sets their browser's default font size to 'Large' (e.g., 20px), a site built with REMs will scale up automatically. A site built with PX often ignores this preference.
- Consistency: Changing the `html { font-size }` scales the entire website proportionally.
FAQ
What about EM?
EM is relative to the *parent* element, which can cause compouding issues (nested lists becoming huge). REM is relative to the *root* (HTML) element, making it predictable.