Skip to main content
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?