Should I use PX, EM or REMs? Page Builder Edition

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?

Please share this post:

DWcircle

I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.

Leave a Comment