A px (pixel) is an absolute unit of measurement that represents a single dot on a screen. It’s a fixed size, which means it doesn’t change relative to other elements or the user’s browser settings.
Example: font-size: 16px; will make the text 16 pixels high.
Pros 👍
Easy to use and understand.
Predictable because the size remains constant.
Cons 👎
Does not scale with user preferences. If a user has increased their browser’s default font size for accessibility, px values will not adjust.
Less flexible for responsive design, since it’s not relative to other units or container sizes.
What is rem in CSS?
A rem (Root EM) is a relative unit of measurement. It’s relative to the root element’s font size, which is usually the <html> element.
By default, most browsers set the <html> font size to 16px. Therefore, 1rem would equal 16px unless otherwise specified.
Example: font-size: 1.5rem; would be 1.5 times the root font size, which would typically be 24px (if the default is 16px).
Pros 👍
Scales with the user’s settings. If the user changes the default font size, rem values will scale accordingly, improving accessibility.
Useful for creating consistent spacing and sizing throughout a project because it always refers to the root size.
Cons 👎
Might be slightly more complex to understand if you're not familiar with how it calculates relative values.
When to use px
You need pixel-perfect control (e.g., for elements like borders or icons where size should be precise).
Consistency is more important than scalability (e.g., for tiny design elements that should remain unchanged).
You are working with designs that have specific pixel specifications.
When to use rem
You want your design to be scalable and adapt to user settings, improving accessibility.
You want a responsive design that adjusts easily when the root font size changes (e.g., when switching between mobile and desktop views).
You want to maintain consistency across a project. Using rem makes it easier to create a modular scale, where changing the root size will adjust all related elements proportionally.
Browser Defaults and Best Practices
The default browser font size is usually 16px, but users can modify this in their browser settings. Using rem allows for automatic adjustments based on these preferences.
A common practice is to set the <html> font size to 62.5% (which equals 10px by default) so that 1rem = 10px, making calculations easier.
– One-click bug reports
Use Whitespace to create bug reports that engineers love with a single click straight from your browser.
– One-click bug reports 