Font Rendering
You know when you’re in the dark about something and then someone wakes you up and you get that realisation that things could have been better, you just didn’t know any better, because nobody bothered to tell you about it?
What am I talking about? I’m making less sense than normal? I’ll tell you what I’m blathering about. I’m talking about how fonts are displayed on the four major web browsers, Internet Explorer 7, Firefox 2, Safari 3 and Opera 9.
If you’ve visited the ‘kode in the last week, you’ll have seen some more changes in my every evolving design process. Currently I’ve given up altogether with putting a design mockups and opting for the completely different approach of throwing shit at the wall and seeing what sticks. Subsequently I’ve decided to do things in glorious black and white and start thinking about colours and design elements once I’ve got the basic structure and functionality working as I actually want it. However what I have done is use fonts as big bold elements in the design, going above 16px font-size to bring things to the forefront.
Fortunately for me (as this is what actually opened my eyes) was that this effectively brings out the font rendering inadequacies in my favourite (and de facto) browser, Firefox.
Firefox
Obviously all development occurs in this browser. Everything from the web developer plugin, to ruler, to Colorzilla to Firebug all live on this browser. You'd be taking a huge step backwards if you thought to design in another browser. However the font rendering is actually the worst of the entire lot. Notice the 'o's in the main title, completely pixerlised monstrosities. Have a look at the sidebar list of links. Those are meant to be bolder. The letter spacing however is in tack and is looks as it's intended.
Opera
I've tried in the past to use this browser, but to be honest there wasn't anything there that was bigger than Firefox which has been my de facto browser for many years now. Predictably this little browser renders the fonts in a very similar fashion to Firefox proper. It's still choppy, no font smoothing at all. Surprisingly however it does provide a very slightly better rendering. The best place to notice this difference is if you take a look at the 'a's in Javascript.
Internet Explorer
What the Deuce? This is actually where all of this started. I inadvertedly launched IE7 and the fonts had rendered oh so much better. I was genuinely surprised. I consider this machine (my dad's) as the vanilla machine. This is what the majority of people have, with respect to fonts, setting etc, in that they remain exactly the same. So imagine my surprise when the fonts where actually smoothed. Of course it wasn't perfect in that it hadn't picked up my letter-spacing which is annoying but alas at least they were doing something more right than Firefox, which I've got to say I did not expect to say. IE is one up on Firefox.
Safari
Which brings us to Safari. Oh dear. Remember that scene in the first 'Matrix' where Cypher is eating the meat and make a deal with Agent Smith and he goes "Ignorance is bliss" taking a big bite out of the steak? Man, that's exactly how I felt after I had the fucking red pill. Seriously you need to have a look at this to believe it. The difference in rendering is unbelievable. Even though the design is as simple as milk, it actually looks half decent. There are different weights to different types of text.
The fonts are all smoothed (the only part that I felt was a bit off, but that’s only because I’ve been staring at this for a while trying to find faults) is the bottom of rounded characters which become slightly more blurred. I haven’t checked to see what other things this browser has to offer because I’m still a bit gobsmacked by the way it rendered a simple page. I understand that Safari is based on the same framework as Konquerer, is that correct?
