Last summer, I read a great book by Dan Cederholm, called Bulletproof Web Design. It was great because it opened my eyes to a new method of developing using HTML and CSS, which involved getting back to my roots…

When I read my first HTML book, in 1996, web pages were simple things, fitting on a single side of A5. A few years later, they were behemoths of nested layout tables. Then, I started to use CSS to replace font and layout markup, and life became even more complicated.

Bulletproof Web Design took me back to 1996. I started writing simple markup again. I tried to leave all the tricky layout stuff to CSS. The book became my bible … for about four months.

Recently, it occurred to me that I had never subscribed to any web design newsgroups. I always got my coding tips from surfing the net. So, I joined a few groups, and lurked for a few weeks. After a while, someone popped in and asked about setting font size with CSS. No one replied. I felt ready. I helped out, using some of my new-found Bulletproof technique.

I was lynched.

Maybe I should have lurked longer. Maybe I should have read more books on advanced CSS and web accessibility. Maybe I should have just kept my gob shut. Nah, I just need a thicker skin. It turns out that, although the basic philosophy of the book is sound, some of the technique is less than ideal. I decided that the book should be my moral guide, but I should look further for coding tips.

So, what did I learn? Don’t set your web page’s base font-size in words (like small, medium), or ems (IE messes it up), and certainly don’t set it in absolute units (like px) unless you want a damn good thrashing. Set your body font-size in percent, and use the cascade to set descendent sizes using percent or ems.

If you were totally dogmatic about accessibility, you’d have to set your body font-size to 100% (after all, that’s what the visitor ‘wants’), but, if you liked, you could set it larger or smaller, depending on the purpose of the pages.

Most people surf the web with an unaltered default font-size of 16px. Millions of web sites base their typography and layout on this fact, together with a the assumption of a typical screen width of 800–1000 pixels. So, it’s unrealistic to suggest that these typical users are going to make things harder to read by reducing their default font-size (let alone actually bother looking for the setting). People with bad eyesight are most likely to do this, and they will be increasing the default to something easier to read.

So, if you want to get a lot of copy into your typical window, you’re going to need to set a font-size lower than 16px — maybe 12px, but certainly not much lower, unless you want to make it very hard to read. That translates to a body font-size of 75%. People with dodgy eyesight will have already increased their default font-size, and consequently have to scroll down to read more, but then you did design your page to allow for expanding text, didn’t you?

I also learned that all line-height is not equal. I had been scratching my head for a while on a site which made extensive use of varying line-height. It turns out that I’d made a fundamental mistake in specifying line-height in ems, which then triggers a (correct but) strange behaviour in descendant tags, inheriting the computed line-height of ancestor tags instead of recalculating them to match the current font-size. Fortunately, the solution was simple: specify line-height as a ratio, like 1.5, and the cascade works always on the current font-size, as you’d have expected in the first place.

Sorry, this was a bit of a long one. I’ll try to keep these shorter in future.