Not-so ClearType :: Apple FTW

There’s been much hoo-hah regarding the font rendering in Apple’s beta release of Safari for Windows. I decided to install the beta myself and see what all the fuss is about.

Here’s why I think Apple gets it right and why Microsoft could learn some lessons from them:

Apple’s font renderer more accurately maintains the intended look of the font. It does this by smoothing the edges and corners of characters where appropriate which can sometimes lead to small letters looking a little blurry. Microsoft’s ClearType technology attempts to make fonts sharper and more readable by jamming characters into pixels in a miscellaneous and sometimes unpleasant fashion.

I’m not a designer, but I own a few typography books and have a strong appreciation for the topic. Which side you choose in this debate is likely to be influenced by which platform you use. However, I don’t see why Microsoft needs to remove the designers ability to use a font in exactly the way it was intended, especially when you consider the availability of various fonts designed specifically for on-screen reading.

OK, so to most seasoned Windows users Safari probably looks a little strange; we’ve got years of mutilated descenders to blame for that. That fact is, designers should be trusted to make smart decisions about the font they want to use and how they want to use it.

Full disclosure: I am currently a Mac user but spend an unfortunate amount of time using Windows on Parallels.

Anyone care to weigh-in (while I don my flame proof suit)? Is it right to morph a font into something that’s close to what it should look like for the sake of readability? Or is typography a sacred art that shouldn’t be messed with?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Kaystarmaker

    readability goes above all, IMO. Typography on print is possible because it has sharp letters. until we get 300DPI computer screens for the masses, I’ll take the readable butchering of fonts above the blurring out for the sake of somewhat keeping the intended form. Which, actually, wasn’t blurry to begin with, so in a sense apple messes this up as well, just in a slightly different, and less readable, way :)

  • Anonymous

    noticed the safari browser had better font typefaces myself and it threw me for a moment, not being aclimitised to a mac but i think apple gets it right as well…

    but i still question the need for another browser in an otherwise bloated market? one annoying thing i can’t use yahoo! mail with safari so it can’t be that compliant with standards just yet :(

    typical really, a bemused dr livingston

  • http://blog.cssbasics.com/ Johnny Gulag

    I agree with the first response. I think readability should take precedence over “the correct way” If “the correct way” is blurry and un-readable it just doesn’t seem so correct to me anymore.

  • Ed

    I too agree readability is number one. I am slowly getting used to the Safari browser (although it’s not as fast as Apple claims). The browser seems to make bold fonts too bold … normal seems to be OK. And yes, now as a web designer I have yet another browser that I have to cater to. However, the Safari browser crashes quite often and I don’t think it can overtake FireFox as the preferred browser for testing standards compliant pages.

    The very fact that FireFox is spell checking this form keeps me in their camp. BTW, I am waiting for the new iMacs and will likely purchase one, so my tune about Safari may change. Although I know of many a Mac user who prefers FireFox over Safari. Safari is just a browser, nothing really special about it, except that it has some fluffy, swoopy animation in some places, such as logging into MS WebMail (NTLM authentication which doesn’t work by the way).

  • Mike

    My opinion is similar to Ed’s: the normal fonts seem absolutely fine. It’s the fonts that are weighted bold that are the problem, looking blurry and, well, just not right.

    Another issue I have is not whether ClearType is better or worse than whatever Safari uses, just that Safari for Windows isn’t using the font setting that the user has chosen. ClearType can be adjusted, after all, and people have different eyes; it doesn’t make much sense for Safari for Windows to have its own font rendering because *some* people feel it is nicer, and ignore the user’s own preferences.

    Mike

  • http://diigital.com cranial-bore

    What percentage of text on the web is the product of a typographers concentration and labour?

  • http://diigital.com cranial-bore

    Whoops, forgot to escape my less than sign and my comment got cropped.
    Oh well.

  • http://www.saumendra.com Saumendra Swain

    Mike you are correct in pointing the fact that Safari in Windows , does adjust its fonts without users preferences. This, I think is not the best practice in web development or even any software development.

  • dave

    Typical Macinista response: the problem isn’t Apple’s, the problem is *yours*.

    It really gets tiresome…

  • http://www.gd-studio.com/ logic_earth

    @Ed “now as a web designer I have yet another browser that I have to cater to.”

    What do you mean another? Safari is not a new browser I really hope you have been catering to it. The only difference now is that it is also on Windows. It is the same on both platforms Apple has said as much until proven otherwise I’ll believe them.

    For the crashing it is beta they are ironing out the bugs still. One should still test in this browser even if you don’t expect to have a high level of Mac users.

  • Ed

    What I meant about “catering to yet another browser” is: now I have to test pages in Safari for windows and Safari in Mac … and until I purchase my iMac I won’t know for sure if Safari on the Mac is the same as Safari on Windows.

    BTW, I am posting this message using Safari (and yes I know it is a beta and I expect bugs) I have been using Safari everyday. I now run 3 browers all day (sorry Opera and others).

    I look forward to a Mac where I can run Parallels (I hope I spelled that right) and not need numerous computers to test pages.

    The font size in this text box or any text field for that matter (using Safari) is incredibly small (although easy to read) … but not so good for seniors (anyone over 30 — OK just kidding, anyone over 50 who wears bi-focals).

    I do however, like the feel of the Safari browser. It is a bit quirky though. It can only be resized manually from the bottom right corner and when you click in the address field to type an address it does not automatically hilight the entire field like FireFox and IE.

    Are their any plugins for the browser? If it can use something like the Web Develpers toolbar that FireFox and IE have then I am most interested.

    Anyway, slightly off topic about font rendering. So just to re-state my opinion: fonts render well, but the bold fonts are too BOLD.

    PS. Sitepoint designers– the style guides for this posting text box [str] [em] [b-quote] [link] etc., do not appear. I wonder what else does not appear?

  • Etnu

    So basically you’re saying that someone’s arbitrary definition of physical beauty is more important than usability? If so, that really explains all the many shortcomings of Safari as a browser, and why so many Mac users opt to use Firefox or Camino on that platform anyway.

    Computers are about utility, not making a god damned fashion statement.

  • dealerpix

    I think you are right, and wrong. For you maybe, computers are a utility, for others, it is a fashion statement, in a way. I would be willing to bet that pretty much every PC and Mac user customize their backgrounds, use apps to change the layouts of the desktop, all in an attempt to personalize their computers, making them a fashion statement about themselves (provided these are their own computers and not their work computers).

    I am a Mac user, have been for some time. I run my web development business using Macs, but also run Parallels for the Windows testing. In the end, these are all just browsers, and I think it comes down to personal preference; what feels better to the user, what makes internet browsing the most “enjoyable.” All browsers will be needed for testing purposes, but in terms of which browser is best for you, to do your web browsing, it is a personal preference issue. Safari and Firefox have always, always, worked great for me on my Macs, and even with all the hype about Firefox and Apple pushing how good Safari is, I am a Camino user… it just feels better.

  • http://www.designity.nl peach

    people read onscreen text considerably slower then text on paper, the blurring only makes it worse.

  • tedeh

    @Ed
    Uh, no, actually you won’t have to cater to another browser. Safari Win and Safari Mac have identical rendering engines, me thinks. Atleast they both cleared the ACID2 test properly. Right now Safari Win is bugged, but it’s safe to assume it wont be once it hits the shelves, so to speak.

    Safari Win isn’t a nuisance, it’s a big relief, especially for Windows developers like me, since now I don’t have to borrow my friends/colleagues/whatever’s Mac to achive cross-platform/browser compliance anymore.

  • http://www.realityedge.com.au mrsmiley

    fonts render well, but the bold fonts are too BOLD.

    I agree with Ed on this point. The rendering of normal weight text isn’t so bad, just the bold fonts. They are too blurry.

    Readability should come first on the web considering its primary use is for displaying information to be read. If it were a design medium like paper, then I’d agree correctness should come first. I wonder if it makes a difference on a high definition screen?

    IMO, IE7 has struck a nice balance between correctness and readability. Firefox looks crisp, Safari too burry, IE7 is somewhere in the middle which is actually easier on the eyes over a long period of time.

  • http://www.sitepoint.com Matthew Magain

    mrsmiley said:

    Firefox looks crisp, Safari too burry, IE7 is somewhere in the middle which is actually easier on the eyes over a long period of time.

    Are you sure this isn’t just because IE7 has ClearType enabled by default? (Tools > Internet Options > Advanced > Multimedia)

    With ClearType on for all Windows applications then the fonts should look identical between all browsers that use the operating system’s rendering of fonts (i.e. every browser but Safari). To turn on ClearType, right-click on your desktop, and select Properties > Appearance > Effects.

  • http://www.gd-studio.com/ logic_earth

    …I wonder if it makes a difference on a high definition screen?

    It quite does, both Apple’s and Windows’ font smoothing are very very good at making the test much nicer to read.

    On a 17″ widescreen HD LCD 1920×1200

  • nerfhammer

    So, if a font used within a web design is too small and therefore made blurry or difficult to read by Apple’s choice to maintain the design of the original face, then my question is the following: Is that a problem aptly blamed on Apple, or is that a problem aptly blamed on a designer who made the choice of that font at that size? I personally say the latter. I want the face to look like the face first and foremost. If I know that’s always going to be the case then I can design accordingly and as a designer I can weigh the importance of legibility.

  • http://www.sitepoint.com AlexW

    So, if a font used within a web design is too small and therefore made blurry or difficult to read by Apple’s choice to maintain the design of the original face, then my question is the following: Is that a problem aptly blamed on Apple, or is that a problem aptly blamed on a designer who made the choice of that font at that size? I personally say the latter. I want the face to look like the face first and foremost. If I know that’s always going to be the case then I can design accordingly and as a designer I can weigh the importance of legibility.

    If designing good systems was all about assuming only smart, well-informed users would use them, we wouldn’t put auto-closing doors on trains or speed limits on roads or airbags in cars. Your average reasonable person closes the train door, drives within the limit and doesn’t crash.

    Good systems design assumes and anticipates some people are going to wander outside what’s sensible and attempts to do it’s very best to help them regardless.

  • http://www.sitepoint.com AlexW

    That fact is, designers should be trusted to make smart decisions about the font they want to use and how they want to use it.

    By extension we should be blocking any attempt to resize and override the font choice within the browser. Can’t have those pesky users deciding what their text looks like, when so many qualified designers are out here to help ;)

  • http://www.cvwdesign.co.uk clivewalker

    Personally, I have just never got on with Windows ClearType so I have it turned off. Unfortunately, Safari for Windows imposes Apples font rendering and overrides my Windows OS choice. I’d like to see the option to turn off font smoothing in Safari.

  • Chris

    “The very fact that FireFox is spell checking this form keeps me in their camp.”

    Safari for Windows does this too. Edit > Spelling > Check Spelling While Typing.

  • Ed

    ““The very fact that FireFox is spell checking this form keeps me in their camp.”

    “Safari for Windows does this too. Edit > Spelling > Check Spelling While Typing”

    Umm … sorry, not in my Safari … I turned it on but it does not work … it won’t even put a check mark beside it in the menu. Maybe it’s a beta thing…

  • http://www.calcResult.co.uk omnicity

    Many of you seem to be missing the point here. Safari on Windows is meant to be IDENTICAL to Safari on OSX. How do you expect to have an identical appearance if you allow Windows to butcher fonts in a different way to how the Mac butchers its fonts (depending on your point of view)?

  • Breton

    “So basically you’re saying that someone’s arbitrary definition of physical beauty is more important than usability? ”

    ARRRGGHHH. Is that what you honestly think design is about? Just physical beauty? If that was the case we’d be called *web stylists*, not web designers. Clear visual communication should be concern number 1.

    With the juggling between blaming apple, or microsoft for butchering typefaces, or making type unreadable, I’m surprised that nobody has thought to put some blame on the typeface designers. The fact is, our typical family of fonts on the web were either designed for a computer that renders small type without anti-aliasing, or simply designed for print with no concern for the screen at all.

    What we need now is not a fancy rendering engine. We need typeface designs that are aware and informed by the conditions under which they will be rendered, and adjust themselves accordingly. Sadly, with the way the “politics of tech” are going, this does not look likely.

  • mihd

    fairly pathetic!

    would it not be easier to admit that safari on windows is substandard?

  • AndyH

    What we need now is not a fancy rendering engine. We need typeface designs that are aware and informed by the conditions under which they will be rendered, and adjust themselves accordingly. Sadly, with the way the “politics of tech” are going, this does not look likely.

    I agree with you there. A new family of fonts, specifically designed for the web, because in this day and age we can’t just use an old font for something new and technological. It’s like trying to use a car from the 1930′s to win a formula one race.

  • josh

    I use both vista and tiger daily.

    This is totally subjective dependent on the font chosen and on screen resolution. It only even looks this close on blocky san-serif “western” fonts.

    Once you get off cheap crappy low resolution/dpi monitors, the true letter forms look soooo much better then the distorted pixely garbage windows pushes out. Pick any font other then arial/verdana/tahoma and you will be blown away at the difference.

    At these low crappy resolutions, check out any font with serifs or other accents and tell me which looks better. wow. They look so much better when rendered correct to their intended hintings and forms like apple does. Check out small times new roman samples etc. Only with boxy arial like fonts does the boxy distorted rendering looks like it is crisper….yeah ms!

    Not to mention the western centric view here, Asian and Arabic fonts are almost unusable in the windows pixel distortion method, really ugly, but very clear and sharp when rendered true to letter form. Completely usable and beautiful.

    I find it humorious that this discussion is even occurring at this juncture in technology. Almost akin to which fonts look better on a dot matrix printer…really you’d rather not see dots at all…but if you are still on a crappy printer you talk about things like this in this way.

  • http://www.sitepoint.com AlexW

    I find it humorious that this discussion is even occurring at this juncture in technology. Almost akin to which fonts look better on a dot matrix printer…really you’d rather not see dots at all…but if you are still on a crappy printer you talk about things like this in this way.

    That’s a pretty long ‘juncture’. We’ve had 72-96ppi monitors since the mid 80′s and I haven’t seen any plans for 300 ppi monitors any time soon.

  • George Ou

    “Anyone care to weigh-in (while I don my flame proof suit)? Is it right to morph a font into something that’s close to what it should look like for the sake of readability? Or is typography a sacred art that shouldn’t be messed with?”

    Having a user setting would probably satisfy everyone, but I think we need to look at the application. In my opinion which is based on pragmatism, readability and respecting the limitations of the pixel grid (until we have 200 DPI displays) should outweigh the sacred art of typography if we’re talking about regular desktop applications like web browsers. If we’re talking about default settings for Desktop Publishing applications, they should default to respecting the typography.

    But again, users should be permitted to override the settings and that would keep everyone happy. The fact that Apple insists on prioritizing the sacred art of typography is unfortunate since most of us need readability for the vast majority of applications.

  • Me

    OMG why can’t we get on-screen text to look like printed text already. Cleartype helps but come on.