A couple of weeks ago, Cameron Moll posted an article entitled Coding like it’s 1999 in which he put forward his case for switching back to using HTML4 and sizing his text in pixels. I’m not going to cover the HTML issue today (although I happen to disagree with Cameron’s choice), but I did want to put some thoughts down on the issue of sizing text in pixels.
The argument that many designers put forward is that working in relative sizes (such as percentages or ems) is hard work because you have to take inheritance into account. In fact, Cameron refers to it as the “burden of calculating relative units throughout a CSS document” in contrast to “the convenience of absolute units”. I can absolutely see his point on a surface level.
However, I see no reason to use pixel-sized text, and in fact I think it’s shooting yourself in the foot to do so.
The approach I take is to size the body element in ems, and then use percentages from that point down, so everything is relative.
When you think about what makes good design, a lot of it is about proportion – the sizes of elements relative to each other. What’s important is not that the H1 is 36px, but that it is three times the height of the body copy. It’s the sizes of items relative to each other that really counts – that’s what gives us proportion and visual hierarchy.
A lot of what makes a good technical implementation on the web comes down to flexibility. Building with pixels takes away your flexibility to make intelligent changes to text size.
Take that H1 as an example. If the design dictates that the H1 is three times the height of the body text, you might specify the body text as 12px and therefore set the H1 to 36px. If, six months down the line, user feedback tells you the the text size is too small, you might come along and tweak the body text to 13px. In doing so, you’ve compromised the design, as the H1 is now not three times the height of the body text, so you have to adjust that up to 39px. And the H2s are no longer twice the height, so you adjust those to 26px, and the sidebar and footer text is no longer… and so on. A nightmare of changes and recalculations for an extra pixel on the text size.
Compare that to working proportionally, as described above with setting everything in percentages off a base text size. I might set my body size to 0.8em, which is around 12px in most desktop browsers. I’d set my H1 to 300%, the H2 to 200% and so on. When I want to tweak the body text, the integrity of the design is maintained, as the CSS is expressing the rules behind the design, not just the execution of the design.
Text scaling is a red herring
There are obviously other arguments against pixel-based text sizes, such as being polite to IE6 users, and not having inheritance crippled by fixed values. One argument that Cameron puts forward particularly worries me, however.
For example, if a
divcontained text set atop a background image, we would have to either repeat the image as thedivgrew larger with text scaling or create the image larger than necessary to compensate for growth.
Whoa, Nelly. That’s a seriously dangerous line of thought. As I’ve said, a lot of what makes a good technical implementation on the web is its flexibility. The rest comes down to robustness – how far what you’ve built can be pushed and pulled and strained before it breaks. Regardless of the way you choose to scale text, the most dangerous assumption you can make is that what you’re looking at will never change.
To understand by page zooming is a complete red herring you have to understand this: the property of being able to cope with resized text is more important than the size of the text. There are many reasons why a design may need to be able to cope with change, from content being longer than you thought (e.g. forcing a heading to wrap onto two lines), or translation of the text into a different language, to future evolutions of the design or the design being used in ways that were never anticipated. Not to mention the fact that some browsers out there that you may never worry about enough to test in will just get your layout wrong. You have to build to be robust. It is the nature of the web to be robust.
Changing text size is a handy way to test for that robustness, but is it not itself the sole reason for it. Page zooming is a distraction, and you know what? Users can turn that feature off.
The only reason I can think of for using pixel-based text sizes is a perception that it’s less work. That’s a very short-term view, as the loss in flexibility and robustness is so damaging that you’re creating much more work than putting the effort in to do a good job in the first place.
