Should I ever use pixels (px) again?

Yes, pixels are still suitable for properties that should remain constant, like small border widths.

Why is 1rem usually 16px?

16px is the standard default font size for most modern browsers, though users can adjust this for accessibility.

CSS Units: The Ultimate Guide to em vs. rem

When you first start learning CSS, using px (pixels) for font sizes or margins feels natural. However, in today’s world of responsive web design, pixels are often sidelined because they are static and absolute.

Modern developers favor relative units like em and rem. But what is the actual difference between them? When should you use one over the other? Let's break it down.

Why Should You Move Away From Pixels?

Pixels are absolute units. If you set a font to 16px, it stays 16px regardless of the user's browser settings. This is a major accessibility issue. Users with visual impairments often increase their default browser font size. If you use px, your website won't adapt to those changes, making it harder for them to read.

1. What is rem?

rem stands for Root em. This unit refers back to the font size of the "root" element, which is the <html> tag.

By default, most modern browsers set the root font size to 16px. Therefore:

 /* If root is 16px */ 1rem = 16px; 2rem = 32px; 0.5rem = 8px;

rem Advantage: It is consistent across the entire website. If you change the font size in the html element, every element using rem will scale proportionally.

2. What is em?

Unlike rem, the em unit is relative to the font size of its parent element. If a parent element has a font size of 20px, then:

 /* If parent is 20px */ 1em = 20px; 2em = 40px;

Compounding Problem: em can get tricky with nesting. If you have an element inside another element, the sizes multiply, often making text far larger or smaller than intended.

Comparison Table: em vs. rem

Feature	rem (Root em)	em (Element em)
Relative To	Root element (<html>)	Parent element
Consistency	Highly consistent	Varies by nesting
Best For	General Font Size & Layout	Modular components (Padding/Margin)

Practical Example

In this example, if you change the .button font-size to 2rem, the padding (using em) will automatically grow to match the text. That is the magic of relative units.

 .button { font-size: 1.2rem; padding: 0.5em 1em; /* Scales with the font-size */ border-radius: 4px; }

Conclusion

For beginners, the best rule of thumb is: use rem for almost everything, especially font sizes. Only use em when you specifically want a property (like padding) to scale based on the element's own font size.

heyfajar