zahnster

I’ve always been a big supporter of hackless CSS. 99% of the CSS problems I’ve experienced have to do with rendering order and browser assumptions – for instance, when you set a float to something in Internet Explorer, by default it does not depreciate that element to inline; however that practice is followed in Firefox and Safari. It’s by learning these differences and putting catches in that you can successfully develop anything hack-free.

However, there’s one thing that I have never been able to get around without filters, and that’s font-sizes.

Font sizes can be called in three ways – using pixels, ems, or percentages. Setting your font-size in pixels is optimally ideal (although I could get into many fights with some of my college teachers about this) – we’re web developers, we live in pixels. We’re familiar with them, and we know how big a 10px font looks on the screen. Besides, ems and percentages are too relative to the browsers – 1em in Firefox is not the same as 1em in Safari.

So why not just use pixels? Well, technically you can, and it works cross-browser, cross-platform. However, there’s a catch – if you set a font size to a pixel amount in IE – it’s stuck at that size for life. Even if you adjust the font size in your browser settings. It’s a total accessibility crutch for close to 80% of the web viewing market.

So, if we want to develop accessible websites, what do we do? In college, I was taught to use ems, and it was all very defended: they’re fonts, after all. Set your font and get over the minor inconsistencies. It might have worked in Advanced Web, but in the Industry you have clients and designers breathing down your neck – they don’t understand why the font is slightly bigger in Safari, and they don’t like it.

So what do we do? The only real solution is in IE filters – sometimes they’re just a necessary evil. Luckily, the font-size problem is only in IE6 and below, so one simple star filter can allow you to set browser font-size in pixels, but in IE, use ems.

html { font-size: 10px; }
* html { font-size: .8em; }

For the rest of your font adjustments, feel free to use percentages or ems – everything will be relative to that base font-size setting.