Cascading Style Sheets (CSS): September 2006 Archives

Julie Harpring from the MU Graduate School gave a great presentation* today at the Web Developers Group meeting on the value of Web standards. A lively discussion followed where many of the developers in the room shared their experiences with CSS and creating standards-compliant sites. Despite a bit of a learning curve and some frustration, I think it's fair to say that most of the folks who have moved to standards-based design are reaping the benefits.

When designing with CSS, one hurdle you have to overcome is consistent font sizing across browsers. A common approach is to set type using pixel measurements. It seems like a good idea because they are consistent and easy to manage. The problem with that approach is that IE won’t let a user make type larger. This causes a usability problem.

There are several approaches to this problem, but I’m going to talk about the one that I use. I came across it in this book: Bulletproof Web Design. No matter how you decide to do it, the important thing to remember is to use relative font sizes.

Update 11-21-07: I've found a simpler way to do almost the same thing and it doesn't require a hack. Simply use 76% as your font-size, like below.

That's it! Pretty easy, huh? I have noticed that this method isn't as precise as the more complicated one. Fonts seem to be a tad smaller on the Mac. I can live with that as long as it makes my style sheet simpler.