So, if you’re a Web developer, you’ve probably come across a most crucial decision: how should you scale your fonts? Should you use pixels (pixels) or the em measure?
Internet Explorer’s Antics
In the sad technically stupid history of HTML, why you’d use px over em was a simple matter of whether you’d support scaling fonts in Internet Explorer.
Here’s how it works. In order to provide accessibility for the visually impaired and the tired eyes of elders, every HTML browser was to be capable of scaling fonts. Since fonts were, well, text, they didn’t require downloading any additional components to beautifully scale. In other words, pictures weren’t included here, and only text would scale, nothing else.
This is true to HTML’s very flexible nature, and true to the reason the Web has been stricken by such ugly designs year after year, not for a lack of better designer, but for the sake of accessibility.
Right, so, Internet Explorer, once the only surviving Web browser on Earth, or rather the monopolizing web Web browser of the world, could so such a thing; scale font sizes via a clever menu item. However, for some reason, some programmer at Microsoft thought that “fixed font size” in px fonts meant, fixed as in really fixed (exaggerated truth). And so, Internet Explorer could not change the size of fonts defined in px, but could change the one of em-defined fonts.
That is, perhaps not so obviously, not how it works.
How does it work, really?
Alright, so here it is. First of all, both px and em defined fonts MUST be scalable on a browser via a menu item. Of course, no browser has to implement that feature, but that’s how it works. That is, if you do implement it, at least do it correctly.
So, any current Internet Explorer version does not do this correctly (The IE9 Platform Preview did not implement the functionality at all, so you’ll have to wait until IE9 Beta to find out). Mozilla Firefox, as well as Opera, Safari and Chrome all do it correctly of course.
In fact, whether a font should scale via a menu item is not the issue at all with px (fixed size) and em (relative size).
The difference is as follows:
Px-defined font sizes are called fixed because no matter what setting used by the browser, except optional font enlargement via a menu item, they should never change size. Fixed font sizes are safe for design, because some weird setting will not go on and alter its size (normally, some browsers such as Firefox can override this).
Em-defined font sizes are called relative because their size is relative to the default font size defined by the browser. This font size, which is usually Times New Roman at 16 points, is not always the same. In Internet Explorer for example, it is handled by the operating system. If your OS uses larger UI fonts as customized in some accessibility settings, so will your browser, and so will web sites that use em-defined fonts.
How much does it matter today?
Today’s modern Web browsers all use uniform page zooms, yes, including Internet Explorer, which was actually one of the first to pioneer the technology. Some browsers don’t even offer the older method anymore (Opera).
Page zooming is cool because it simply zooms everything, including images, which thankfully does little damage to designs, the degree varying across the different implementations of the various Web browsers (Chrome and Safari have a few precision issues while IE, Firefox both have excellent algorithms, while Opera has the most sophisticated and flexible/useful one to date).
Hence, it doesn’t really matter today, design and functionality-wise, whether you use em or px font sizes.
Should I use px or em?
It depends on what you want to do.
If you want the people visiting your Web site to see it as intended, then just use px sizes. It’ll prevent a minor percentage of people seeing your site with screwed up font sizes (frankly, nobody changes that setting, so it doesn’t really happen).
If you want the people visiting your Web site to be able to change the font size automatically to suit their eye problems, then em sizes are the way to go. They provide slightly more accessible Web sites, although with the aforementioned zoom technology, it’s not entirely useful and brings along many design pains and worries. Having to design with the possibility of fonts being much larger than planned brings along many challenges.
However, if people weren’t stupid enough as to put ultra small 10 point fonts as body text, maybe we wouldn’t have this problem in the first place.
As for myself, I use a mix of both. In my menus, it’s px sizes all the way. Those are the most fragile components of a Web site in design, so you want them to never change. Body text however is always in em, and I plan out my designs so that fonts can be scaled within a confined box without destroying my efforts at making something pretty.
Tip: For this to work, never use global font sizes (as in defining the size of fonts in the body). It should not cause any problems, technically, but it can, and it’s bad practice since other developers may go WTF when they try to put some font in 10 px and it gives them 20… whatever default font size you would have used to that, but hey, you never know, and it’s entirely possible.