Ever skim a website and not quite know why the text feels wonky or spacing is disproportionate across devices? A lot of that comes down to how measurements are set.
In web design, there are three units of measurement you most commonly use: pixels, rems, and ems. Knowing when to use each can keep your designs flexible, consistent, and more accessible.
Let’s quickly go over each, and what they’re best used for.
Pixels
Pixels are exact — meaning, one pixel equals one pixel, no matter where it’s used. That makes pixels great for things like icons, borders widths, and images — basically anything that needs to stay precise. The downside is that text set in pixels won’t scale across devices, or if a user increases their browser’s font size, which can hurt readability.
Pixels are best for: borders, icons, images, pixel-perfect details.
Ems
Now when it comes to ems, these particular units are relative. One em equals the font size of the element’s parent. This makes them useful for elements that should grow with their container, like a button that expands along with its text. The catch is that ems can “stack,” meaning sizes multiply when nested, which sometimes leads to things getting larger than expected.
Ems are best for: elements that scale with their container (like buttons or headings).
Rems
Lastly, rems are also relative, but instead of looking at the parent element, they reference the root (the html font size). If your root is set to 16px, then 1rem will always equal 16px no matter where it’s used. So 2rem = 32px, 4 rem = 64px, and so on. This makes rems perfect for keeping font sizes and spacing consistent across a site. They also help your fonts scale nicely if someone changes their browser’s default font size for accessibility.
Rems are best for: consistent font sizes, spacing, and layout across a site.
Create a habit
I used to be intimidated by the different options, but once you nail down how they work, and the root math for rems, it just becomes part of your flow. You don’t need to memorize every technical detail, just remember that pixels are fixed, rems are consistent, and ems are flexible.
Design to Dollars takeaway: The right units make your design seamless, which means more people stay, read, and take action.
Thanks for reading,
