“Should I use pixels or rems?”. In this comprehensive blog post, we'll answer this question once and for all. You'll learn about the accessibility implications, and how to determine the best unit to use in any scenario.

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

If you want to build the most-accessible product possible, you need to use both pixels and ems/rems. The most popular unit for anything size-related is the px unit, short for “pixel” The em unit is an interesting fellow, based on the element's calculated font size.

The Surprising Truth About Pixels and Accessibility

Link to this heading Accessibility considerations

Link to this heading Strategic unit deployment

Link to this heading Quick tricks vs. mental models

Link to this heading Bonus: Rem quality of life

I really love it. There is so much thing that I didn’t know about css units. Thanks :)

REM and EM are units of measure for fonts and that’s it. PX is a fixed unit that should only be used for small spacings that have not changed regardless of layout. VH and VW These are units that change according to the View port and are very good for working with larger spacings that should increase or decrease according to the device. And a very good secret is to never work with fixed widths or heights, always use padding and margin to get the desired sizes and so the layout won’t get stuck.

Really made me rethink some of my coding practices. Great content!