Do you set your font sizes in pixels?
Until recently, I did too. But I’ve completely changed the way I approach font sizing—because REM is just better.
It’s easy to stick with what you know, but sometimes, there’s a better way that you haven’t discovered yet.
Why Pixels Aren’t Ideal
Sizing fonts in pixels is like “hard-coding” them—it locks them in place. That means:
- Your font sizes will stay the same on all browsers, devices, and screens, no matter what.
- If someone increases their browser’s root font size for accessibility, fonts sized in pixels won’t adjust.
- Your typography won’t scale proportionally across different screen sizes.
This is why I now use REM instead—a far more scalable and practical font sizing unit.
What is REM?
REM stands for Root EM—a unit of measurement in CSS that references the root font size you set in your HTML.
Think of your root font size as the starting point for all your font sizes—it’s like your “home base.”
By default, most browsers set the root font size to 16px, meaning:
- 1 REM = 16px
- 2 REM = 32px
- 3 REM = 48px
- 0.75 REM = 12px
You can change your root font size to whatever you want, but I typically leave it at 16px, since it’s the most common.
Why REM is a Better Choice
Scales for Accessibility – If a user changes their browser’s font size to 20px, your pixel-based text stays the same, but REM-based text adjusts automatically.
Easier to Manage – Instead of setting fixed pixel values everywhere, REM lets you control all font sizes by just adjusting the root font size.
Keeps Font Sizes Consistent – Because REM is based on a single starting point, it creates a proportional scaling system rather than a mix of random pixel values.
How to Start Using REM
Once you know 1 REM = 16px, it’s easy to convert your font sizes:
- For an H1 heading, which is typically 56px, divide by 16 = 3.5rem.
- For an H2 heading, around 44px, that’s 2.75rem.
- If you want smaller text, like footer copyright text at 12px, that’s 0.75rem.
At first, it might feel easier to just type pixel values, but once you start using REM, the calculations become second nature—and it makes managing your font sizes across a website so much easier.
See you next time,
