RE: using relative units of measurement

Hi Michellanne,

> I tested out some code that used pixels and found that Chrome was able to scale it. I also tested this in Safari.

All browsers [1] have a method of zoom that will re-size text that has been sized in px, but in some browsers (e.g IE, Chrome at least) using px will prevent a particular method of re-sizing text.

E.g. in Chrome settings (appearance) you can change the “Font size” to large or very large, and that won’t override px-sized text.
However, there is also a “Page zoom” setting just underneath that which will override px-sized text (and everything else except VW/VH units).

There are a couple of schools of thought for this, the nub for each side seems to be:

  *   Some people do change their default font size therefore you should support that and size everything relative to font-size.
  *   Setting everything in EM/REMs then means text-size = zoom, so what’s the point? Use whatever unit you like and browsers should (and do) default to zoom.

I tend to fall into the latter camp as I see so many sites which mix units. Multiple developers, old codes bases etc. Their styles are not consistent and therefore you get clashes where text sized in (R)EMs overflows percentage or pixel sized containers. Whereas with zoom & media queries it works quite predictably whatever units people have used.

I wrote more on px/rems usage: https://alastairc.uk/2018/08/pixels-vs-ems-commentary/


All the units are an abstraction layer, all the units are relative to something, and all get translated into CSS pixels by the browser at some point. On desktop browsers there are good solutions for increasing size of text, I don’t consider this a big issue. However there is a gap for mobile browsers at the moment:
https://alastairc.uk/2015/10/zoom-for-fixed-and-responsive-sites/#zoom-mobile


HTH,

-Alastair

1] I’m pretty sure it’s all browsers, but there might be an old or niche browser that doesn’t support a pixel-zoom based approach, let me know if you find one!