Should we continue to use relative units vs. relying on page zooming?
Looking at the upcoming releases of different web browsers I started to wonder whether specifying fonts in relative units, such as ems etc, will be a common approach in the future.
Web browser page zooming status
Beta 4 of Firefox 3, implements Page zooming, and the default behavior is to scale fonts as well as images. There’s an option in the menu to only scale text, though.
Latest nightlies of WebKit feature full page zoom, if you turn it on; then it also zooms images and text.
Opera and IE have already implemented page zooming; Opera a long time ago and IE in version 7. The IE team is also working hard on improving page zooming in IE 8.
Layout relativity won’t matter
Since the default behavior in these web browser when using the shortcut keys for increasing/decreasing font size has now turned into page zooming instead, my question is if should continue specifying font sizes in ems, % etc.
It seems like web browsers has, to some extent, taken the control away from us web developers in terms of creating fluid/elastic/gooey/skanky layouts. And really, is that a bad thing? There are times when increasing only the font-size is what you want, but most of the time, due to poorly created web sites or other factors, it’s just not a nice experience.
I think most users would appreciate full page zooming, where everything in the web page is resized in perfect relation to each other. It will be easier to read while at the same time giving the end user a more consistent use experience.
One possible downside
Now maybe I have convinced you to throw out your rocket science calculations of pixels into ems, you will have everything in pixels and be as happy as when you wrote your first Hello world HTML code.
However, what’s lurking in the bushes goes by the name of DPI (or rather, PPI). Simply put, it is about how many pixels you will have presented in an inch, and the result is that a pixel isn’t always a pixel, if you get my drift. Compare a laptop screen which might have a default setting of 120 DPI, where a pixel would appear larger than of a more normal screen with 96 DPI.
Therefore, there’s really no ways to have a perfectly consistent pixel size for end user.
So, my questions are: should we continue to use relative units? And if not, can we meet the DPI/PPI problem in a suitable manner?
Technically, CSS pixels are relative units 🙂
(in, cm, mm, pt and pc are absolute)
I will continue to use relative units, since it isn't really that much to ask for IMHO. One can never rely on zoom being available, for pretty much the same reasons as those about javascript support.
Page zooming done well can be reasonably useful I suppose, so more browsers implementing it can't hurt.
However, I don't think more browsers implementing page zooming is what affects the choice to use pixels or not for font sizing. The issue is really with Microsoft's refusal to let Internet Explorer resize text sized in pixels (which is still a problem in IE 8). As long as a significant number of people are still using IE 6, which has neither page zoom nor the ability to resize text in pixels, I think it's hard to justify using pixels for font size.
Roger discussed this issue (or at least relative sizing) on his blog, not long ago … and I got into a debate of competing on usability vs. pixel perfection. Briefly device resolution was mentioned, but I think it really touches upon the heart of the issue.
Most of us, or at least the readers of your blog, as well as Rogers blog, are in it for the long haul. We do this because we have passion, take pride in our work, and actually have a desire to add value for our clients.
You can argue that using relative sizing allows you greater flexibility and better long term compatability across many user-agents and devices … at least that's one of my hopes for the work I am currently doing for clients.
You could also argue that using relative sizing, allows a wider audience to use the content provided on a site… I like to think so, but realistically, have my doubts that many less-than-perfect sighted people know how to use text resizing.
Personally, I greatly enjoy reading sites, where I can scale everything in MY favourite browser, without having to figure out an obscure setting, install some other browser or weird add-ons, or wait for the IE team to finally catch up.
Build sites for users, not for user-agents
Admittedly, that statement can be re-used in a wide variety of scenarios.
– Text sizing: Users first, browser (features) second
– SEO: Users first, search engines second
– more examples?
The problem I have with page zooming, is that it almost always creates a horizontal scroll bar. Anytime I use my laptop remotely I usually have to increase the text size because the text is too small. Page zoom in Firefox Beta 3.0b4 is extremely slow, almost to the point of being unusable. IE7 is somewhat fast but then tries to help by centering the page which usually means cutting off the left side of the text in the content column.
Now to my answers.
1. As long as IE6 is out there, for users, it would be nice to continue to use relative units. However from informal interviews, very few people know how to size text in IE6.
2. Wouldn't using pixels for everything solve the DPI/PPI problem?
I guess I'm flat out with sticking to using ems for text sizing… even if the zoom fixed that issue what's wrong with still using ems? Change generally comes via crisis in my world.
Second, I'm not sold on page zoom. IE7 page zoom gave me a User Interface Nightmare when I tried to use it recently. Nobody seems to be mentioning the effect on users of being confronted by a rapidly zooming interface. Done well I can see the benefit of page zoom for some people but lets not think its the answer to anything. In fact it raises a bunch of its own usability issues IMO (scrolling was mentioned, orientation issues and the ability of people to effectively maintain their mental map comes to mind).
Finally, can we ever rely on the user having page zoom in a browser (there are so many out there)? And can we rely the user understands how to use it?
So I'll stick to the status quo here for a while. I can't envision page zoom in the immediate future will exhonerate me from my responsibilities. Ems work fine.
Also, don't underestimate the current users who are visually impaired who are used to bumping up the text a notch to make it readable.
By changing the paradigm of their interaction we should be treading carefully. Why not zoom text only by default (the current thing they're probably using) and the option to go for zoom everything (the new behaviour). Why does the new behaviour state itself as the default? When we create a new behaviour each user out there who is impacted has to learn a new way of doing something, so its good to be cautious. And they don't get confronted with that changed interaction model by choice either, its while they are probably trying to do something with their computer like get on to do some banking. So I always worry when the gadget takes control of my experience and changes it. I never chose to experiment with IE7 Zoom, I actually chose text resizing I believe and the default behaviour had been modified beyond my current expectation.
I guess you can tell page zoom gives me a headache lol… sorry about the rant Robert. 🙂
Though question. For now i would probably keep the ems and percent. When IE 6 i "dead" and every browser have svg and CSS3 support it will be lovely, no more jagged edges and blurry images. But that's in the future…
I think it depends of the target-users and which browser they use. If IE6 is still the main browser, it's better to specify the font-size in em's. If your target-audience uses mostly modern browsers (like it is on your site i think, Robert ;-)), you can specify the font-size in px.
What i don't do anymore, is to specify the whole layout in em's. I do it normally this way: All layout-sizes in px and font-size in em's. It a good compromise, imho.
Thanks all, good input!
I think leaving erlative units behind isn't an option, at least not as of now; due to IE 6 but also lots of other web browser/devices which we can't assure how they will work.
Olly,
Yes. 🙂
Morgan,
Definitely.
Tanny,
Well, no. Because a pixel on one screen doesn't, size-wise, necessarily match the size of a pixel on anothe screen. So, from a pixel-perfect scenario, it won't work (whereas you could probably get at least somewhat more consistent results with something like <code>ems</code>).
Steven,
It's a great question. Why have web browser vendors chosen to do this, and how will it affect us?
Ole,
Personally, I go for layouts that are elastic, in that sense that they have a <code>min-width</code> and a <code>max-width</code> and can scale between those two.
In my play world I use pixels.
It's really allot easier (IMHO), and makes all the math obsolete. The only reason not to use pixels is to fix a broken browser? Does anyone else see a problem with that? OK ok ok … it's not the only reason but I can bet you that's the major reason.
Still in the work world I use ems, %'s etc … because hate it or not IE6 is still out there. I am less and less caring (sad to say), because I feel IF you want text resizing then GET A BETTER BROWSER !!
Daniel,
Yes, I agree that one becomes a bit jaded a times… We can only hope that the playing filed will become better and better in the future.
@Daniel
Perhaps that might work with friends, but not with customers.
You can't push your customers to use a better browsers. Most of the customers I work with are using IE and think that it's a good browser, since they don't have any experience any solution.problems while using it.
It's our job to make it work in the browser the customer is using (and all the others of course) and perhaps also a bit for our own pride.
I'll will defenitily stick with em's..
Tim,
Yes, in a professional development life, in most cases, I don't really see any other option than using <code>ems</code> or something similar.
@Tim
You can't force your customers to use better browsers, sure, but as a web developer you do have an educating role in teaching customers about better browsers and why they should not be using IE6.
It might cause friction sometimes, but it will pay off. The more web developers educate their customers, the faster the web as a whole can progress to new technologies such as CSS3.
I, for one, have stopped using ems.
@Ivo
Done the right way, I totally agree.
"Because it's better" just won't work, obviously :).
While em sizing may be a necessity at the moment, there is a major problem with it. Sometimes, some things need to be positioned and sized by the pixel. The most glaring example is images. In proper browsers, such as Safari, they can be sized and positioned with ems, but in Internet Explorer, images which require resampling look horrible, and thus pixel sizes MUST be used.
In my experience, development often becomes quite challenging when pixel sizes and em-sizes mix.
Ivo,
Definitely!
Alex,
Yep, there a re definitely downsides to using <code>ems</code> as well.
[…] week I read an open-ended post from Robert Nyman asking his readers if we should continue to use relative units on the Web. I’ve had this question on my mind for at least a while, and I’m glad Robert’s […]
Arg… using the holidays to take a minute and rewrite my CSS reset/basic typographic styles. Was wondering if I should keep everything in ems/percentages. But even with page zooming, if IE7 and even IE8 isn't going to support increasing text set in pixles via "Page >> Text Size" then I suppose we're still stuck with em-math.
Hello, sorry to dig up an old article but I came across it on Google while searching for something (no surprises there haha).
Anyway I have some experience using (Windows) laptops at 120dpi (a 17" laptop monitor at 1920×1600) and it's not good. Using pixels and em's in Firefox and Safari is fine, Internet Explorer and Opera are fine if you use pixels but screw up sizing considerably if you use em's.
My only solution was to stick with pixels.
Chris,
More or less, I'd say. Depends on the context, though.
Ryan,
Interesting. And yeah, I can imagine that about IE at least.
[…] Should We Continue To Use Relative Units Vs. Relying On Page Zooming? – Robert Nyman […]