Bulletproof Tuesdays – Ch. 1 – Flexible Text

Having problems with your text sizing? I didn’t think so, but if you’re wondering how you can get great results with any browser follow along. Bulletproof Web Design begins with a chapter on flexible text. First off what does it mean to have flexible text? Probably the most common way to define text size is using a pixels. For instance font-size: 12px. Setting your text size using this method offers the most consistent text size across browsers. However Internet Explorer won’t allow users to adjust the text size if you set your text using pixels. If you’re trying to reach the largest possible audience, not being able to resize text in the most popular browser is a bad thing.

If you take a look at these screenshots it becomes obvious that not all browsers are created equal. Even if they are fed the exact same code. So what do you do? Based upon what I had read earlier on The Noodle Incident site I’ve been setting the body text size to 76% and adjusting the rest of the text using em’s.

Dan Cederholm on the other hand recommends the Bulletproof technique of setting the base size using absolute-size keywords. Basically you want to set your body font-size to: small and adjust the headings, etc. using percentages. So even if you text size isn’t perfectly consistent across browsers the ratio between your font sizes will be.

Letting go of “pixel precision” and allowing your users to adjust the font size as they see necessary is a big step in the right direction. So what exactly should your CSS look like? Well the simplified box model hack (sbmh) is probably the best. It solves an IE5/Win bug that renders text larger than it is in other browsers. The sbmh looks like:

body {
font-size: small;
}
* html body {
font-size: x-small; /* for IE5/Win */
f\ont-size: small; /* for other IE versions */
}

So once you’ve got your set your body font-size to small, what do you do next? Now you can use percentage to adjust the rest of the text sizes. So you would have something that looks like:

body {
font-size: small;
}
h1 {
font-size: 150%;
}

There are a few more pitfalls to deal with when using this method, but I’ll let Dan tell you about that in the book. This chapter is pretty basic and straight forward, and next week should be more interesting. I had a few challenges implementing the keyword method, I had to make adjustments to some line-heights. When changing em’s to percentages I just changed 1.1em to 110%. Overall it seems to work great and I bet you can’t even tell I changed anything, which is the whole point.

For more reading on the subject of text sizing check out:
Size Matters
The Noodle Incident

Popularity: 7% [?]