I wrote the first version of this article more than fifteen years ago, when web designers were debating whether to use pixels or relative units for typography.
While CSS has evolved dramatically since then—with rem, clamp(), CSS Grid, Flexbox, and responsive design becoming standard—the core principle remains the same:
Design interfaces that adapt to people, devices, and accessibility needs—not the other way around.
Many of the techniques have changed, but the philosophy still holds.
When I first wrote this article, web designers were debating whether font sizes should be defined in pixels or relative units like em. Browser support was inconsistent, responsive design was in its infancy, and accessibility was only beginning to influence mainstream web development.
A lot has changed since then.
Today we have rem, clamp(), CSS Grid, Flexbox, and design systems that help us create far more flexible interfaces. While the techniques have evolved, the underlying principle hasn't:
Build interfaces that adapt to users—not the other way around.
This article revisits those original recommendations from a modern perspective.
Pixels define a fixed size, while relative units adapt to their environment. That flexibility makes layouts more resilient across different screen sizes, browser settings, and accessibility preferences.
Using relative units allows users to enlarge text without breaking layouts and gives designers a consistent scaling system that works across devices.
In most modern projects, this flexibility outweighs the simplicity of fixed pixel values.
When I originally wrote this article, em was the recommended approach because it inherited the size of its parent element and respected browser settings.
While that recommendation wasn't wrong, my preference today is rem.
Because rem is based on the root font size rather than nested parent elements, typography becomes much easier to predict and maintain across large applications and design systems.
I still use em where parent-relative scaling makes sense, but for most typography, rem has become the more practical choice.
html {
font-size: 100%;
}
h1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
Relative units aren't just about text. Margins, padding, spacing, and component sizing all benefit from a consistent scale.
Whether your spacing system is based on 4, 8, or another increment, using relative measurements creates layouts that feel more intentional and are easier to maintain as products grow.
Modern design systems are built on this principle.
Despite the shift toward relative units, pixels haven't disappeared. They remain an excellent choice for elements that require precise control, including borders, icons, shadows, and other fine visual details where scaling isn't desirable.
Good design isn't about avoiding pixels. It's about understanding when fixed measurements communicate intent better than flexible ones.
One of the original motivations behind using relative units was accessibility.
That hasn't changed.
Users should be able to increase text size, zoom their browsers, or use operating system preferences without sacrificing readability.
Modern CSS gives us better tools than we had fifteen years ago, but the goal remains exactly the same: create experiences that work for as many people as possible.
Looking back, I wouldn't write this article exactly the same way today.
Some recommendations have evolved. New CSS features have simplified problems that once required complicated workarounds. But the lesson that stayed with me is larger than any specific unit of measurement.
Technology changes.
Browsers change.
Frameworks change.
Designing for flexibility, accessibility, and people has never gone out of style.
Editor's Note (2026): This article was originally written in 2010 and has been updated to reflect modern CSS practices while preserving the principles that continue to guide accessible, flexible web design.
References
Send me a note and say hello.