Frontend Development
📐 Why Use REM over PX?
A quick guide on scalable CSS architecture and web accessibility.
When writing CSS, pixels (px) are an absolute unit of measurement. If you tell a browser that your paragraph text is exactly 16px, it will hard-code that size onto the screen. It is rigid and unforgiving.
A REM (Root EM) is a relative unit of measurement based entirely on the root font size of the HTML document.
Accessibility First
The primary reason professional developers use REMs is for web accessibility. Users with visual impairments often go into their browser settings and change their default font size from the standard 16 pixels to 20 or 24 pixels so they can read the web easier.
- If you use PX: The browser ignores the user's preference. Your 16px text stays exactly 16px, making it difficult for them to read.
- If you use REM: If you set your text to
1rem, it will dynamically scale up to match whatever the user's preferred root size is. Your layout breathes and scales beautifully.
The Conversion Math
The math is simple: REM value = (Target Pixel Size) / (Root Pixel Size).
By default, almost all web browsers set their root font size to 16px. Therefore, if you want a box to be 32 pixels wide, that is 32 / 16 = 2rem. If you want a margin of 24 pixels, that is 24 / 16 = 1.5rem.
What about EM?
An EM is similar to a REM, but instead of scaling based on the Root document, it scales based on the font-size of its direct Parent element. EMs are extremely powerful but can cause cascading scaling issues if nested too deeply. For broad layout sizing, REM is safer.