Should I use PX, EM or REMs?

(page builder edition)

Why

• BB V 2.2 added Em, Rem, & Viewport-based units and I’ve not covered this for 2 years.
• The Page builder documentation can not really advise on what to use.
• Page Builders help no-coders ( DIYers and client) who could be confused by the options.
• I’ve started to reconsider my approach to speeding up work and be less dependent on platforms.

Quickly

• This is contentious even amongst experts. I only offer my thoughts as a page builder user.
• Things change as we move to modern browsers supporting new ways to manage units.
• I’ll save viewport width (VW) for type for another time because of the present browser support for it.

Units

• PX (PIXEL) Absolute length. WYSIWYG. Arguably not as accessible. Browser support 100%.
• EM (emms) Size relative to it’s parent. Accessible, Suffers with compounding issues. Support 100%.
• REM (root emms) Size relative to the root or html element Support 99.46% or higher.
• VW (Viewport width) effectively relative to the browser size. Needs taming! Support 96.6% (ish)

 Why PX?

• Designers work with static units.
• Theme support for setting your text and headings in px is more common.
• You know where you are with pixels. (no inspecting to find 0.9474em of something somewhere).
• Browsers let us zoom if we find pixel based font sizes too small (or big).
• KEY POINT: We need to be pragmatic about accessibility.

Why EM?

• Accessibility. Allows users to change the text size in their browsers without breaking the design.
• Supported by many WordPress themes.
• Flexibility. For many a relative unit for the web is the only thing to make sense for the medium.
• You don’t have to pick one unit. A EMs can be useful on a more modular level.

Why REMs?

• Mostly the same benefits as Em.
• Reduces the compounding/inheritance problems that come with ems being relative to the parent.
• Fast for design changes and responsive settings.
• 62.5%! Set the root rem to this and 1 rem = 10 px and 1.6 rem = 16px.

Summary

• The debate is mostly about whether fixed or relative units are best for the web,
• Pixels are more accessible to non-coders being consistent with image sizes (and WYSIWHYG)
• Rems offers a easier route to the advantages of relative units.
• Over to you. What have I missed?