If you open the CSS file of any legacy website built before 2018, you will see font-size: 16px; everywhere. Pixels were the absolute standard for web design for decades. But today, if you submit a pull request filled with pixel values for typography, a senior developer will almost certainly reject it. The web has moved to REM.
Understanding the difference between absolute units (PX) and relative units (REM/EM) is the key to building websites that are not just responsive, but fully accessible to visually impaired users.
The Problem with Pixels (PX)
A pixel is an absolute unit of measurement. If you tell a browser font-size: 16px;, the browser will render that text at exactly 16 pixels high, regardless of the screen size or the user's personal settings.
This creates a massive accessibility issue. Many visually impaired users go into their browser settings (like Google Chrome) and change their default font size from Medium to Very Large. If your website uses Pixels, it completely ignores the user's browser settings. The text stays tiny, and the user is forced to squint or abandon your website.
Enter REM (Root EM)
REM stands for "Root EM." Unlike pixels, REM is a relative unit. It is directly relative to the font-size defined in the root <html> element of the document.
By default, every modern browser sets the root font size to 16px. Therefore, 1rem equals 16px. 2rem equals 32px.
- The Accessibility Magic: If a visually impaired user changes their browser's default font size to 24px, the root font size instantly becomes 24px. Now, your
1remtext will dynamically scale up to 24px, and your2remheaders will scale to 48px! - Perfect Layouts: Because the text scales naturally based on user preferences, it prevents the UI from breaking or overlapping unexpectedly.
When to Use Pixels
Does this mean pixels are dead? Not completely. Pixels should still be used for elements that must never scale regardless of font size. This includes 1px borders, small decorative icons, and exact box-shadow offsets. However, for anything related to typography (font-size, line-height) and spacing (margins, padding), REM is the modern standard.
Convert Your Old CSS to REM
Migrating an old pixel-based CSS file? Stop doing the math in your head. Use our free web tool to instantly convert PX values into perfect REM units based on your base font size.
Open PX to REM Converter