We should be using rem instead of pixels.

[metal-gogo]

We should be using rem instead of pixels

• We should be using rem instead of pixels
  • Summarizing em vs. rem difference:
  • When to Use Em vs. Rem
  • Tip
  • References

Pixels vs. Relative Units in CSS: why it’s still a big deal makes an amazing job explaining why this is important. I'll quote a couple of important points:

The most important reason for using responsive and unitless values in our CSS is for supporting our users that rely on zooming. If you read the Web Content Accessibility Guidelines, our users need to be able to zoom the viewport without loss of content or functionality, or restrictions imposed by CSS values or viewport scaling settings.

Design systems and threads of consistency
As someone who works on the O’Reilly Media Design System, weaving threads of consistency across brand, style, and UI components is a top priority. Consistency across a system empowers designers and developers to craft great app experiences for the end-user. That said, the most important thread that connects all elements of a design system tapestry is established accessibility best practices — for colors, typography, components, patterns.

Summarizing em vs. rem difference:

• The translation of rem units to pixel value is determined by the font size of the HTML element. This font size is influenced by inheritance from the browser font size setting unless explicitly overridden with a unit not subject to inheritance.

• The translation of em units to pixel values are determined by the font size of the element they’re used on. This font size is influenced by inheritance from parent elements unless explicitly overridden with a unit not subject to inheritance.

Note: For me, this makes rem more predictable than em, therefore, I prefer rem over em.

When to Use Em vs. Rem

This Comprehensive Guide: When to Use Em vs. Rem makes a great guideline for sizing units. I'm going to copy their bullet-point recap:

• rem and em units are computed into pixel values by the browser, based on font sizes in your design.

• em units are based on the font size of the element they’re used on.

• rem units are based on the font size of the HTML element.

• em units can be influenced by font size inheritance from any parent element

• rem units can be influenced by font size inheritance from browser font settings.

• Use em units for sizing that should scale depending on the font size of an element other than the root.

• Use rem units for sizing that doesn’t need em units, and that should scale depending on browser font size settings.

• Use rem units unless you’re sure you need em units, including on font sizes.

• Use rem units on media queries.

• Don’t use em or rem in multi-column layout widths - use % instead.

• Don’t use em or rem if scaling would unavoidably cause a layout element to break.

Tip

When creating layouts it’s often easier to think in pixels but output in rem units. You can have pixel to rem calculations done automatically via a preprocessor like Sass, or a postprocessor like PostCSS with the PXtoRem plugin.

References

• EM vs REM vs PX – Why you shouldn't “just use pixels”
• CSS units for font-size: px | em | rem
• PX, EM or REM Media Queries?
• Rem-Calc Function from Foundation
• Mixins for Rem Font Sizing