Some time ago I came across an article by Jonathan Snook titled Font sizing with rem. Not so long story short;
In the early days of the web, we used pixels to size our text. It’s reliable and consistent. […] To get around that1, we can use em units. […] The problem with em-based font sizing is that the font size compounds. […] CSS3 introduces […] the
remunit, which stands for “root em”. […] Theremunit is relative to the root — or the html — element. That means that we can define a single font size on the html element and define allremunits to be a percentage of that…
A pretty sweet solution, regardless of not ever having any significant issues with the em compounding dilemma, none that I can reliably recall anyway. And I’ve used it on a few projects since reading it. It is a very tidy solution to what could potentially become quite a messy problem. For organizational’s sake, at the very least, I’m really quite fond of this solution.
So I’ve been working on a project recently that I used rems to size some, but not all, text. Specific text where I needed the spacing above and below said text to be consistent across pages. Text where the mark up changes between pages. And this cleanly and easily fixed the issue. Problem, which I’m not all sure I even had in the first place, solved. Not really my point.
However making use of rems to handle text sizing issues raised another serious concern. You see the site uses the exact same User Interface Options I use on this site. The feature I use at the top of this page that allows a user the ability to set the way a user prefers to consume content in their web browser. And I am relatively confident not many people will experience this issue in their everyday work. In fact, I can’t imagine it coming up in any other situation but for the set of similar circumstances/ solutions I was/ am working with. And, taking certain advice into account, I’m simply to looking to publish what I learn. But I digress.
My point is using rems to set your text size won’t allow Javascript powered options, like UIO, to function. Try it out, above — should you be reading this post on my website — and see for yourself. This whole paragraph’s text (read: the characters) won’t scale relative to the elements surrounding it.
Elements using rems to set their font-size are immune to the text sizing option in UIO (and I imagine any spacing set with rem, like margins, paddings or line-heights, would be affected as well). As rems constantly refer to the root for their size, specific display effects of UIO bypass the inline styles it applies to the body affect how those elements display!
Food for thought…
1 If you read Jonathan’s article, be sure to read Zoe Mickley Gillenwater’s article Why browser zoom shouldn’t kill flexible layouts for more thoughtful information concerning “zooming” from a users perspective.