This is actually an old version of danielmall.com. For the latest and greatest, check out the new site.
 

Soft Serve

I’ve recently gotten a lot of email, asking about specifying font sizes in CSS. Here’s my attempt to answer that, or at least give you the low-down on my approach.

For the unfamiliar, here’s the problem: Internet Explorer does not allow the resizing of text set in pixels. Just about every other browser does.

The solution? Well, it’s not that easy. Unfortunately, there isn’t really a simple answer.

I’ll start from the beginning. There are several ways to size text in CSS. According to the spec, you can size text in 4 ways:

Absolute values refer to keywords that have computed values; that is, values that can be translated into a concrete size. Examples of absolute values include a range of keywords from xx-small to xx-large.

Relative values come in comparative tense. According to the spec, the only possible values are larger and smaller. I’ve never used relative values on a project. I probably never will.

I don’t know what “length” is, so if anyone knows, feel free to share.

Percentage refers to—surprise—percentage values, but it also refers to sizes set in ems. For reference, Robert Bringhurst, author of the typographic encyclopedia The Elements of Typographic Style, defines an em as such:

One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.

When I originally started writing CSS, I used absolute values, mostly in keywords. However, I quickly found that it was much harder to achieve pixel-perfect pages. Keywords estimate font sizes, and—to the best of my knowledge—it’s almost impossible to guarantee sizes across browsers and platforms.

My next step was to try and size text with ems. The trouble with that method was that I was too lazy to do the math to convert units, so programming a site became very much and exercise of guess-and-check. As much of a perfectionist as I am, I knew there had to be a better way. I came across an excellent article by Rich Rutter that simplified the process tremendously. The short of it is this: by initially setting the <body> font-size to 62.5%, you can effectively translate 1em to equal 10px. Instead of doing this:

h1 { font-size: 24px; }

I could do this:

h1 { font-size: 2.4em; }

It makes the math much simpler, it doesn’t take any longer to code, it makes pixel-perfect pages possible, and it’s a reliable way to set font-sizes so that they are scalable in every browser. Hooray!

The downside to that method was inheritance. Because sizing in ems is a percentage-based method, each descendant element can inherit the styling of its parent. I ended up having to write extra code to override some of the effects of the cascade. It looked something like this:


#nav li { font-size: 1.4em; }
#nav li li { font-size: 100%; }
#nav li li li { font-size: 95%; }

It was too messy. Back to the drawing board.

It had never occurred to me that text set in pixels was even worth looking in to. It also wasn’t until the popularization of conditional comments that I would have considered it a viable technique. (For more on conditional comments, see Bruce Lawson’s ultra-informative article entitled Future Proof Your CSS with Conditional Comments.) Once I realized I could serve styles only to Internet Explorer that didn’t affect my main style sheet in terms of clutter or page weight, it all fell into place.

I’ve recently begun to use this method, and, so far, it’s working tremendously. I write my style sheet with font sizes set in pixels. Since IE is the only browser that doesn’t play nice, I override pixel-based values for em-based values in a style sheet included with a conditional comment. It would go something like this…

In my main style sheet:


h1 { font-size: 24px; }
h2 { font-size: 18px; }
p, ul, dl { font-size: 12px; }

In my IE-only style sheet:


h1 { font-size: 2.4em; }
h2 { font-size: 1.8em; }
p, ul, dl { font-size: 1.2em; }

That’s all there is to it. Also, keep in mind that this doesn’t just work for font-sizing. The same theory could easily apply to specifying dimensions, link styles, or anything else that you can do with CSS. In fact, although it would be poor user experience design, you could potentially have a site that looked completely different in IE than it does in other browsers.

Wait a minute, you say. Isn’t that adding extra page weight for IE users by having to override styles? Well, yes it is, but too bad for them. Now, before you dub me as some holier-than-thou elitist, my stance is that half the onus is on the user, and the other half is on the designer and/or developer. The user that cares about fast load times and getting the best online experience should make the effort to find the best vehicle to deliver that experience. However, it is equally as important for the team delivering that experience to educate the user as to how and why their browser choice is significant.

While it seems similar, this is drastically different than the “The site is best viewed in Internet Explorer 5.5” days. Today, both the site creator and the user are working toward the same goal: to not be required to choose a browser. If all browsers worked under the same rendering engine and supported the same CSS properties, there would be no worries about fallback approaches and such. The user wouldn’t care about which browser had the fastest load times or the best security, and the designer/developer wouldn’t need to worry about browser hacks and various support levels.

Admittedly, it is a communist attitude towards browser-making, and it may never happen. But that’s ok. The web is about users, and that should remain at the forefront. I’ve become very comfortable with a utilitarian attitude towards front-end development: the greatest good for the greatest number of people will work just fine. The key, however, is not to forget about the others.

Comments

timfm said:

“The short of it is this: by initially setting the font-size to 62.5%, you can effectively translate 1em to equal 10px.”

Why, pray tell, do you choose:

body { font-size: 62.7% }?

Posted on April 20, 2007 09:35 PM

Dan Mall said:

Ah, a case of the hypocrites on my part. I coded this site before I came to the “Soft Serve” conclusion. I was getting some rounding errors in different browsers, and setting it to 62.7% instead of 62.5%. However, I'm also setting all sizes in ems on this site, which I wouldn’t do again if I recoded it. Were I not in the midst of planning a redesign, there are a number of things on this version of the site that I would immediately correct.

Posted on April 20, 2007 11:32 PM

Dan Shields said:

I seen this method of your on one of your redesigns with the Happy Cog people. I remember you discussing it a bit then.

My only thing is, so you have to do twice the work right? you are still going to have to mess wwith all the inheritance issues in IE and set the body to 62.5%.

What are the benefits of doing it twice if you are spending the time to perfect it in IE and it would look the same in the standard browsers with the ems. I'm all for using pixels, I use to do my sites first in pixels then change it to ems, so this might be something I would like to try.

Posted on April 21, 2007 09:21 AM

Nathan Smith said:

@Dan Shields: The benefit of doing it this way is that there are no cross-browser inheritance issues to deal with. All browsers get precise font sizing based on pixels, and then you set the sizes of IE in ems. You don't have to worry about whether or not some other browser disagrees with the em sizing, since you're only serving "soft" values to Internet Explorer.

Posted on April 21, 2007 12:18 PM

Thame said:

You'd still have the inheritance problem with IE though, right?

With IE7, I'm starting to worry less and less about this. I think the new browser's Opera-like full page zooming capability will become the more popular method for increasing text size and aside from some PNG transparency issues, the feature is implemented quite well.

Posted on April 21, 2007 12:56 PM

Dan Shields said:

Ahh I see now Nathan, I wasn't thinking about all the issues across the standard browsers, it does make more sense to just supply them with pixels and let IE have the em's. I guess I just never really notice the inconsistencies to much with the standard browsers and ems.

I guess I was almost there before when I use to write the sized in pixels first and then convert them to em's now I'll just transfer that to an IE specific style sheet. Man I could of had this idea last year, if I thought about it a little more LOL!

Posted on April 21, 2007 07:04 PM

Nathan Smith said:

@Eric: I think you completely missed the point of this article. You should probably re-read it.

@Dan Shields: I feel the same way. I wish I'd come up with this method myself, too. :)

Dan Mall has definitely come up with (in my opinion) the future of font-sizing on the web. I think once IE6 is phased out, and (maybe) IE8 truely supports text resizing (and not just zooming) we'll all be back to using pixels anyways. The only reason ems and % became popular in the first place was due to IE's shortcomings. The Soft Serve method gets us one step closer to perfect cross-browser reliability, and not just "close enough" with ems or %.

Posted on April 21, 2007 09:15 PM

Austin Schneider said:

If you want the body font size to be 10px, then set it to 10px instead of 62.5%

Body { font-size: 10px; } = Body { font-size: 62.5%; }

:D

Posted on April 21, 2007 11:17 PM

Odin / Velmont said:

Oh well. The big problem is screens that have greater resolution than 72 / 90 dpi. Making things 12px on such a screen is a pain in the ass. That is why I think pixels are not very future proof. In the same way that using images as text is a no-no on such screens.

Posted on April 22, 2007 10:47 AM

Tim Huegdon said:

Great article Dan, but I'm a little confused by one point: in your IE specific stylesheet are you over-riding the body font size to 62.5% again? I assume this is the case since your em values match the pixel values for all other browsers.

I think a demonstration page would help to make silly things like this a little clearer -- plus it'd keep code snoopers like me happy!

Posted on April 22, 2007 04:43 PM

Dan Mall said:

Wow, unavailable for a day and I miss all the fun!

Dan Shields and Thame: There will definitely be inheritance problems for IE, but you’re only serving the code to fix it for the browser that has the problem. Other browsers don’t need it, so the code doesn’t matter for them.

The page zoom is a great idea, but, unfortunately, only Opera has a solid implementation, where the page acts as if it were elastic. IE7’s page zoom, however, just looks like an enlargement of the page, and certainly has its problems.

Eric: Most isn’t all. Users should still have the ability to browse the way they want to browse, no matter how hard it makes my job in coding the site. If an IE user wants to enlarge their text, who am I to stand in the way of that?

Nathan Smith: Your check is in the mail :)

Austin Schneider: That defeats the whole point. The pixel is a non-scalable unit in IE, which is why I’m suggesting using a percentage.

Odin / Velmont: Fair enough. I don’t know much about various screen resolutions, but I would assume that those users are in the minority. For me, it’s about serving the most users that I can.

Posted on April 22, 2007 05:38 PM

Torsten said:

I have to agree with Odin. Apple announced resolution independence in leopard, so pixelbased layouts »will shrink to the point of being unusable«.

so working with relative values will be the way to go

Posted on April 23, 2007 02:36 AM

MrQwest said:

Oooh, nice article.

I have nothing to bring to the table when it comes to font-sizing, but this article has certianly helped me understand it a lot more!

Being a web-developer for the last 10 years (more off than on!), i've missed the whole (x)html + CSS, semantics, clear code etc. so i'm trying to learn as much as possible. I've always had trouble with font-sizing though and this article has brought up some good points and has made me realise what's what!

Thanks again Daniel! This shall be bookmarked!

Posted on April 23, 2007 06:49 AM

Smarmy said:

Prediction: with the advent of IE7, ems will go the way of the Pony Express - buh bye! IE7 resizes pixeled fonts just like FF does. So this em talk should only last a liddle bit longer.

Posted on April 23, 2007 03:15 PM

Dan Mall said:

Tim Huegdon: I’m not overriding the 62.5% in the IE stylesheet. In fact, there isn’t even a new <body> declaration. The best example would be to check out the Happy Cog site and its stylesheets. If you still think a more barebones example would help, let me know and I’ll post one.

Torsten: Unfortunately, that won’t be anytime soon. Take this site for instance. 37% of the readers of this site are on a Mac. I’d assume that was higher than the majority of sites, since the content here is pretty specific. I would also assume that not all of those Mac users are using the most current OS. I’m not; I’m still running Panther. It’s gonna be a while until the penetration rate of users that have a brand new operating system complete with resolution-independent device is significant enough to consider the majority, or even enough of a user base to accommodate.

MrQwest: I’m glad I could help! If you haven’t yet, check out Dan Cederholm’s Bulletproof Web Design, as the first chapter provides an alternate approach to this same topic. It always helps to see multiple points of view.

Smarmy: Maybe, but not quite yet. Again, IE7 is an improvement, but it will be a while until IE6 is completely phased out.

Also, ems may be on their way out in terms of sizing text, but they’re still very useful. For instance, I always specify margin-bottom of any textual element like <p> or <ul> in ems, in order to preserve the visual formatting when text gets resized.

Posted on April 23, 2007 04:03 PM

Matheus said:

This is wrong, if I put 1.4 em it won't look like 14px font. For a 14pixel font I must use 1em, and in IE it gets bigger then it does on firefox

so, this is NOT something better then pixel sizes

Posted on April 23, 2007 06:15 PM

Smarmy said:

Errr, Matheus . . . read the article.

The short of it is this: by initially setting the body font-size to 62.5%, you can effectively translate 1em to equal 10px.

It works. But you have to set body first. The only catch is inheritance, which was also covered.

Seriously man, you're killing me. Read before you post. Learn that and then we can talk ems.

Posted on April 23, 2007 07:58 PM

Mike Palmer said:

Another way to do this if you're mainly sticking with default sizing is set the font-size: 62.5% on the html element and then your default size on the body element, as in font-size: 12px;

Posted on April 24, 2007 10:51 AM

Nathan Smith said:

@Mike Palmer: That would be a sweet way to do it, I agree. However, according to the book HTML Mastery, styling the html element at all can cause some browsers to no longer give the body tag any special consideration, essentially treating it like a div. For that reason alone, I'd avoid styling html.

Posted on April 24, 2007 11:40 AM

Mike Palmer said:

@Nathan Smith: Thanks for the heads up. I'll try to look into it, however, light testing on FF2, IE6, Opera 9 on PC and FF2 on Mac reveals no (visible) issues.

When you say removing "special consideration" for the body tag - what type of side-effects are we looking at?

Posted on April 25, 2007 03:56 AM

Randy Schmidt said:

Hey Dan, it was nice meeting you at Junto tonight! You say 'I don’t know what “length” is, so if anyone knows, feel free to share.' Doesn't that mean the dimensions such as px, cm, etc, which are all measurements of length?

Posted on April 25, 2007 11:48 PM

Andy Budd said:

@Odin/Velmont/Torsten: Regarding the CSS pixel unit not being any good for high resolution screens, I'd definitely advise you guys to re-read the spec.

A CSS pixel is not the same as a device pixel. Instead it's a relative unit of measurement. So in future high resolution displays, a CSS pixel could easily equal 4 or 16 device pixels.

Rather than being bad for high-res screens, the CSS pixel unit is actually the only unit that takes screen resolution into account. In fact, that is what the CSS pixel unit was designed for!

Cool huh?

Posted on April 26, 2007 05:42 AM

Dan Mall said:

Randy Schmidt: Great to meet you too! I guess that is what it means, especially in regards to the spec that Andy linked to.

Andy Budd: That’s news to me too. It makes complete sense; I just never heard it put that way, I guess. Thanks for the insight!

Posted on April 27, 2007 04:25 PM

Jon Cram said:

Three cheers to Andy Budd for pointing out that pixels are relative units!

I, like most others here, am so used to a pixel being a device pixel it never occurred to me that a CSS pixel is anything but a device pixel.

Perhaps we need a new term for the CSS pixel so as to avoid confusion. It's a tiny block similar to a device pixel - bloxel anyone?

Posted on May 1, 2007 10:59 AM

Sorry: comments are closed.