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?
Final Thoughts
While Safari doesn’t have the development community that Firefox has, it completely and UTTERLY trounces on it when rendering text. I think this should be the first thing that the Mozilla team address for the forthcoming Firefox 3. Forget all the other bullshit guys, this should be priority number 1 because you guys are trailing EVERYONE.
Ok, two things:
Safari actually brings the whole ported-over-to-windows Mac OS X font-rendering with it. So not just the KHTML part, not just the whole webkit, but webkit+mac os x stuff. That’s the reason it looks so different and is of such high quality.
On IE vs. Firefox, it looks as if your dad has cleartype on, while you don’t. it makes a huge difference, especially on normally sized text. Even with it on though, it renders edges extremely rough on big-sized text.
Now Firefox 3 should be coming with a new graphics system (Cairo) if I’m not mistaken, and who knows, it might open the door for Firefox to implement their own font-renderer.
Either that or Windows needs to get a better one.
↓ Quote | 8/7/2007
James, you’re right cleartype does indeed make a different, just honestly not all that much. No where NEAR what’s being produced by Safari.
The issue is that if Safari can do it on a windows machine, then I fully expect Firefox to do it as well. Or at the very least strive to do it. I honestly didn’t realise the actual sheer difference between the two. Gobsmacked.
↓ Quote | 9/7/2007
This is one of the real bonuses of living with a Mac. Font rendering is magnificient and Firefox is Safari’s equal in my world :)
↓ Quote | 10/7/2007
Just wanted to chime in and say that IE7 renders text with ClearType by default, regardless of if it’s enabled cross-the-board in Windows. If you enable it in Display settings, all browsers in Windows will render things a bit better. And, on OS X all browsers smooth fonts pretty dang good, just by nature of using Mac’s text rendering.
↓ Quote | 10/7/2007
There’s a reason all of us Mac-heads swear to the cult of Mac :)
PS: Firefox on OS X smooths nicely as well.
↓ Quote | 10/7/2007
I’m now actually tempted to try out Safari over Firefox, but does the former have a built in automatic spell checker? Heck, I didn’t even know you could download a PC version.
And what’s happened to your big black header?!
↓ Quote | 10/7/2007
@Mike: I know, I know :). It getting to the point where I might actually consider getting myself a macbook now,…rasem phasm :)
@CK: Throwing shit at the wall and seeing what sticks. Some elements I really liked from that design, other not so much. Currently I’m just concentrating on the typography and the layout and the overall structure. Once those elements are done then we’ll come back with the colours and the pretty graphics and the images (notice how it’s currently ALL text).
↓ Quote | 10/7/2007
I started noticing the differences in font rendering after I began using OS X and Safari all the time at work. When I try to go home and use Firefox on my PC, it is just painful. I was really pleased when IE7 came out and the text looked so much better than in IE6. It’s still got nothing on Safari though.
If the Firefox team can address this font issue (and maybe speed up the application in OS X) then I feel like it would be the top browser for most platforms.
↓ Quote | 11/7/2007
Firefox renders fonts fine in Windows as long as you enable cleartype. It’s off by default for some strange reason..
↓ Quote | 16/11/2007
It might be worth taking a look at fonts in Linux as well. There are patent concerns, which is why it doesn’t always look great out of the box, but the following article of mine shows a screenshot of text in Firefox for Linux, and I’d consider it the best rendering of the three OSes:
http://danns.co.uk/node/194
↓ Quote | 21/11/2007
thanks for the GREAT post! Very useful…
↓ Quote | 21/11/2007