Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

A Subpixel Safari

June 12, 2007

Safari for Windows? Sure, why not. May as well ride the popularity wave and see if you can’t get another product or two into the hands of the masses.

Of course, we all know by now the only way to get massive amounts of users to use a particular browser is to bundle it. For all the pubilicity and popular opinion, Firefox is still sitting at what, 15%? Good luck climbing that hill without force-installing Safari during an iTunes upgrade. It can’t hurt to have another browser on Windows, but I don’t exactly see a major revolution happening here. (Jon Hicks and Jonathan Snook have a few more thoughts on yesterday’s Safari news.)

But what really caught my eye though is the trouble to which Apple has gone in order to mimic the OS X Safari experience on Windows. Everything from window sizing controls to scrollbars to font smoothing. There’s an ironic point to be made here about how much complaining is directed at applications that don’t make an effort to be Mac native when run on OS X…

Joel Spolsky took particular issue to the font rendering, using the release of Safari to rant at length about the philosophy difference between Apple and Microsoft when it comes to displaying on-screen fonts. He’s absolutely right about familiarity affecting judgment, to the point where simple unqualified statements like “I prefer OS X’s font rendering” are fairly useless in a debate about any relative merits between the two operating systems.

What I really wanted to respond to are two points in particular from Joel’s post. One, the bit where he says, “Microsoft pragmatically decided that the design of the typeface is not so holy, and that sharp on-screen text that’s comfortable to read is more important than the typeface designer’s idea of how light or dark an entire block of text should feel.” Marginalizing type designers is a pretty poor way to make any sort of point about typography, given that entire careers are based on an understanding of legibility and facilitating ease of reading. A statement like that one almost veers into dangerous “programmers knowing better than experts in their respective fields” territory, which I can’t imagine was his goal. Joel’s a smart guy, I’m sure it was unintended.

However, lest the larger issue go unheeded, that brings us to the second point. Joel talks about the pixel grid, and how Microsoft’s type rendering pays more attention to it. Speaking as someone who thinks a lot about the pixel grid, I have to say I think I’m coming around to the idea that Microsoft’s ClearType simply works better.

Alright, I’d better qualify that quickly. Think about it this way — as a designer, you don’t just set type in Photoshop and let it go, right? You tweak. You kern. You attempt to match the letters to the pixel grid as closely as possible to reduce the blurriness. Sometimes spacing suffers, and you have to choose between a slightly blurry letter with perfect spacing, or a more precise fit within the pixel grid with just slightly off spacing. I can’t be the only one that leans toward the latter most times.

And that’s the difference here. ClearType is a closer match to what I do manually already. Yes, I prefer the way type on OS X looks; ClearType seems too sharp and overly blocky, the subtleties of the curves are lost and it’s overly chunky. But, for the medium in which it’s being rendered, it seems like a more ideal solution.

Here’s the caveat though — high resolution displays. At 100dpi, ClearType wins out, but we’re not going to be stuck here much longer. Give it a few years, let’s do this comparison again when 200dpi is standard. I suspect the pixel grid won’t matter nearly so much then.


1
June 12, 13h

What’s interesting is the amount of effort Apple has put it to emulate the OS X interface on Windows. It doesn’t go anywhere near this extent on any other of it’s high profile Windows apps (iTunes and Quicktime).

I think they’ve mimicked the OS X Safari because they wanted the rendering to be identical between the two, although I’ve not yet tested this. This will make developing for Safari far easier for Windows users, as it’ll render the same in Windows as in OS X, and then you’d logically assume it would render the same for iPhone’s Safari – opening up iPhone app development to millions of Windows based web developers.

2
Alex says:
June 12, 13h

A lot of good points. I use a PC, and I’ll give Safari a try, but I’m pretty much a devoted Firefox user. I wasn’t aware Apple was going to provide font smoothing with the browser; seems like they should leave that up to the OS.

3
June 12, 13h

“But what really caught my eye though is the trouble to which Apple has gone in order to mimic the OS X Safari experience on Windows”

As you’ve alluded to in your post, whenever apps are ported to OS X and don’t follow Apple’s UI standards people go up in flames. Why should it be any different for apps ported over to Windows? I’m actually appalled that Safari doesn’t follow Windows UI standards and I think it looks fairly shabby.

4
Dave S. says:
June 12, 13h

“I wasn’t aware Apple was going to provide font smoothing with the browser; seems like they should leave that up to the OS.”

There’s actually precedence here, Microsoft also did this:

http://www.mezzoblue.com/archives/2006/08/07/clearertype/

I’d tend to agree it should be an OS-level setting, but Apple’s not breaking new ground here anyway.

5
June 12, 14h

Finally, I’ll be able to test in Safari without having to find a friend with a Mac, or buy one myself. Question is: how closely will it display to Safari running on a Mac? I already have to have 2 PC because of IE6 and IE7. I don’t have room for another computer on my desktop.

6
JulienW says:
June 12, 14h

And what about the webkit engine embedded in Adobe Apollo (or AIR) ? Will the font rendering be OS-native or WebKit-native ? Or Adobe-native ? ;)

7
Payton Biddington says:
June 12, 14h

I’m almost positive their initial reason to bring Safari to Windows is so that Windows developers can create iPhone apps, and font-smoothing is part of how the apps will look on the iPhone, so they included that, too. Sure, Apple hasn’t directly said, “well… we just came out with Safari on Windows only for the iPhone”, because that’s most likely not their only goal.

Safari on Windows is helpful for web developers, and might be a tiny bit helpful when trying to ‘switch’ Windows users. Now Windows users have got two apps that to try out before even using OS X. They can see how Apple’s programs work, for free.

I’ve installed it on my parents’ Windows machine (I’ve got an iMac G5, and it didn’t run too well.) and to my surprise, it was actually quite fast, and the font smoothing worked nicely.

8
Bramus! says:
June 12, 15h

@ Stan : the rendering of the PC version does not match the rendering of the Mac version at all.

Compare http://www.3rds.be/wordpress/wp-content/uploads/2007/06/safari-mac.jpg (mac version) to http://www.3rds.be/wordpress/wp-content/uploads/2007/06/safari-pc.jpg (pc version) or open Google with Safari 3 (PC) and you’ll see why.

I’m suddenly getting IE Mac vs. IE PC flashbacks here … *sigh*

9
June 12, 15h

Another possible reason for the increasing number of Apple apps now available for PC users could be an attempt to break down the “otherness” that some PC users feel towards Apple and OS X.

I have been an Apple user for many years now but have no real trouble when, on those rare occasions, I have to use a PC. However, when talking to PC users about OS X I find I am faced with blank looks and pained expressions.

“Switchers” have been a hot topic with Apple of late. Maybe the answer to “Safari on Windows, why?” can be found here?

10
June 12, 15h

Joel never claimed that on-screen text legibility is more important than typography. The full quote is:

“Microsoft pragmatically decided that the design of the typeface is not so holy, and that sharp on-screen text that’s comfortable to read is more important than the typeface designer’s idea of how light or dark an entire block of text should feel.”

I guess you could interpret the word “pragmatically” as endorsing Microsoft’s decision, but I don’t read it that way.

11
Dave S. says:
June 12, 15h

“I guess you could interpret the word “pragmatically” as endorsing Microsoft’s decision, but I don’t read it that way.”

Yeah, my omission of the lead-in does kind of change the meaning a bit. Fixed to now quote the whole passage.

That said, endorsement or no (and from the overall tone of the post I think it’s clear there’s one implied), the specific wording of that passage is still problematic.

12
cam c. says:
June 12, 16h

I completely agree… although I’d say at 150dpi, Cleartype is still marginally better. (My laptop with 1920x1200 at 15.4 inches works out to 147dpi – Safari still looks a bit chunky and blurry compared to Cleartype.)

I wonder if the real solution is to have custom anti-aliasing controls like what Flash has would be the best answer, and just let the user decide? Of course that would make our job as designers even harder, not knowing what it would look like on anyone’s screen.

13
Justin M says:
June 12, 18h

For Stan G and anyone else using multiple PCs just for different versions of IE: http://tredosoft.com/Multiple_IE

14
June 12, 18h

I can’t bring myself to use anything but Safari as my day-to-day browser because I think the text looks so much better than anything else. Of course, I do acknowledge that at large part of the reason for this is just that I”m *used* to it.

To the point of screen dpi: we’re not very far away from *much* higher res displays. On my desk right now sits a Nokia 770 Internet Tablet (not a phone, just a mini-computer) that has a 220dpi screen. It’s amazingly sharp and clear, even on miniscule text.The iPhone has a 160dpi screen. Within a year or two, I think most screens will be well over 150dpi, and probably even over 200dpi.

15
Random Reader says:
June 12, 19h

@Bramus!: The PC version of Safari renders it just fine here.

Based on comments elsewhere, it looks like Safari has major problems in non-English locales, as it seems to want to use the current locale but only includes English resources.

I expect that’ll be fixed soonish, as they must have hundreds of bug reports about that by now.

16
David Robarts says:
June 12, 19h

I didn’t take Joel’s article as a rant. I do agree that he prefers Microsoft’s rendering over Apple’s but it doesn’t sound to me like he considers Apple’s to be wrong, just a different way that appeals to different motives. If anything, he was trying to understand why there are differences in opinion over which is better.

I agree that Safari on Windows is primarily to support corporate iPhone development - that and Steve doesn’t mind bragging rights for having the fastest browser on a PC.

Bummer about rendering - but if Safari PC is that bad then it probably will never be relevant to web designers.

My biggest problem with Steve’s announcement in the Keynote was on his charts showing Apple’s desired market share of browsers he cut out IE’s other competitors not IE.

Currently I use Camino, but will try Safari anew when I get it with Leopard - I’m still in Panther, Tiger wasn’t compeling enough for me to upgrade, but I want Leopard (unless I hear bad reviews of Leopard on G4 based Macs).

17
Scott Greiff says:
June 12, 21h

Have you seen how Windows mutilates Japanese typography? ClearType seems to be clear for Roman-based languages, but there’s no vector smoothing in sight for Asian languages.

You can wax philosophical all you want about grids, but from a user’s perspective of font look, font use, and font management; I think Apple has an edge.

18
June 12, 23h

I think Safari looks completely out of place in the Windows environment, just like iTunes.

Personally I think Apple should realize the UI looks great in a Mac environment, but not so hot in a Windows environment (I’m in Vista and Firefox, even IE looks more at home and I’d be more comfortable using.) Using Safari in Windows in it’s current state feels alien and this is not a feeling I think Apple wants users to associate with Safari.

Apple are great designers, take on the challenge and create a great UI that feels at home in a Windows environment.

19
Bramus! says:
June 13, 01h

@ Random Reader : also suspected my non-English of being the guilty one (http://www.bram.us/2007/06/11/safari-on-pc/#comment-54713)

And oh, the problem has been narrowed down to em elements not being rendered visibly (on all sites).

Guess I’ll have to wait a new Safari build …

20
June 13, 03h

I just downloaded Safari for Windows (beta) and tested it on my Win XP - wasn’t that happy with the rendering of my webpages. It all seems quite blurry, especially the fonts, and a lot of Javacsript embedded in the websites just won’t go off. Furthermore I saw that certain websites that can be approached without the www in front of it (the only way to go these days, www is so passé) rendered without the stylesheet. Maybe some Beta-bugs, hopefully they’ll be solved in tje latest release. At least I now have Safari on my Windows machine. Running Linux as a second OS on my laptop I now have a complete testsuite (including all those Multiple IE’s - which I’ve been using for several years now - excellent tool). ;-)

21
June 13, 03h

ClearType and pixel-fitting only work because of ‘hints’ (really a fairly complicated program) in the TrueType/OpenType fonts which tell the renderer how to move various parts of the outline around at the low pixel counts used by our 96 dpi monitors.

Higher DPI monitors will use higher pixel counts and therefore the outlines won’t be affected as much by the hint program. It’s easy to see how the font will look at 192 dpi: simply double the point size and move further away from the monitor! ClearType and other anti-aliasing techniques will still have some impact on the edges of the fonts at the higher DPI, but the colour-fringing effects will be much less noticeable.

At higher DPIs the relative weight between bold and regular type also will vanish.

I’ve used poorly-hinted or unhinted fonts in the past and they really suck on-screen.

It’s pretty clear that Apple have simply ported their whole graphics rendering engine to Windows and run Safari on top of that. I wouldn’t be surprised if it used DirectX to blit the result to the screen since DX is faster than using GDI’s BitBlt call.

22
June 13, 04h

I’m running windows, and to me the font smoothing is too much. Smaller text becomes almost too chunky to read. On windows it crashes as soon as you try to type in your proxy password and you can’t edit the proxy settings (the button is greyed out in preferences.) It seems to render pretty quickly, but I was testing at work and it seemed to lag on the initial request, like the Microsoft network protocol was stopping it and saying “What are you doing here?” : ) All told, I don’t think I’ll be switching away from firefox. Safari currently lacks the plugins I’ve come to depend on, and I just don’t see anything that really makes it worth switching. Based on the text alone I don’t see myself switching over to Safari as my default browser. I know it’s still in beta but I see myself sticking by firefox. However, I’m very excited to see Apple opening up it’s browser to windows users. One more browser I can test my sites on now.

23
June 13, 05h

ClearType and pixel-fitting only work because of ‘hints’ (really a fairly complicated program) in the TrueType/OpenType fonts which tell the renderer how to move various parts of the outline around at the low pixel counts used by our 96 dpi monitors.

Higher DPI monitors will use higher pixel counts and therefore the outlines won’t be affected as much by the hint program. It’s easy to see how the font will look at 192 dpi: simply double the point size and move further away from the monitor! ClearType and other anti-aliasing techniques will still have some impact on the edges of the fonts at the higher DPI, but the colour-fringing effects will be much less noticeable.

At higher DPIs the relative weight between bold and regular type also will vanish.

I’ve used poorly-hinted or unhinted fonts in the past and they really suck on-screen.

It’s pretty clear that Apple have simply ported their whole graphics rendering engine to Windows and run Safari on top of that. I wouldn’t be surprised if it used DirectX to blit the result to the screen since DX is faster than using GDI’s BitBlt call.

24
June 13, 06h

We installed it on our Windows machines at work and I have to admit I am quite impressed with how nice it looks. It really gives you that OSX feel right in the middle of Windows. I don’t know how that stands out in Vista, but in XP it looks leaps and bounds ahead of the game and should give people a pretty nice impression of what OSX can be.

That said, I tried installing it on my powerbook at home and it just kept crashing when I tried to run it. Fortunately the uninstaller worked well. I guess the main focus was on getting the windows version ready. Hopefully the Mac beta will get some good attention before Leopard comes out because it really needs it.

25
June 13, 06h

To get large numbers of end users to switch, a browser probably has to offer quite a bit more nowadays than just a pretty (type)face… Getting the program out to potential iPhone developers sounds like a good idea, though, especially if it is accompanied by a decent software development kit!

26
Ole says:
June 13, 06h

It is after all Beta, and I doubt it will pick up any majority of the users. It’ll just be yet another browser that you might have to test cos I bet it doesn’t render the same on Windows and OS X.

On a side note, it is hacked and dies if you try using input fields so people should not use it for anything but local testing.

27
June 13, 07h

It is true that it’s a Beta, and the program should be judged as such; however, much of the media attention Safari is getting right now (at least here in The Netherlands) seems to focus on the critical errors that have already been discovered, and the associated security issues… :-(

28
Tantek says:
June 13, 08h

Dave, you wrote: “we all know by now the only way to get massive amounts of users to use a particular browser is to bundle it.”

This is a common misconception.

There are numerous counter-examples in history, especially if you replace “browser” with “client-side binary application” (i.e. something you have to download and install). Napster is the obvious example. Before that there was WinAmp.

Another, more to your point, was IE5/Mac, which grew to 70%+ marketshare on Macs 6 months after release through downloads *alone* - Apple’s process for including updates to pre-installed 3rd party software was too slow (I’m being optimistic and assuming bureaucratic inefficiency/incompetence on their part (having worked there, I have some familiarity with their processes/methodologies) rather than assuming any overt resistance/malice) to bundle IE5/Mac until over a year after release, and by then, not only were “massive amounts of users” using it, but the vast majority of Mac users were using it.

Frankly the “can’t succeed without bundling” rationalization is a sad excuse given by those who are unable to do anything but provide small incremental improvements of existing products. We should stop accepting/propagating their excuse and challenge them to take huge innovative leaps forward, and quit acting like babies that believe incremental improvements entitle them to success.

If you build a product sufficiently better than the default, you will get massive adoption. But it has to be “sufficiently better”, not just minor improvements like a 10% speed increase or a couple of whizzy features.

29
June 13, 10h

@Tantek,

It’s easier for use web designers to look at browser differences and see how one thing or another can make one browser “sufficiently better” than another to warrant switching, but for 99% of users who simply want to visit a couple websites every now and then and check their email, they aren’t going to notice the difference or care.

The fact of the matter is that browsers handle a very simple task that doesn’t require tons of cool features to provide a good user experience. As such, it is quite difficult for one browser to do this simple task so much better than another than people will take notice.

In the case of Firefox, people were sick of IE and were looking for an alternative. Sure it also had some cool features like tabbed browsing and tons of extensions, but for the majority of users who switched, it was IE because was providing them with a poor enough browsing experience that they felt the need to look elsewhere. Why the picked Firefox is probably more a discussion of trends and word-of-mouth than actual superiority on Firefox’s part because the actual superiority is under the skin where most users won’t even notice it.

I don’t know the exact number, but I would be willing to bet that a good majority of browser users use a specific browser because it was what was installed on their computer, or because a more friend told them they should use it. Would they even notice if they had to use another one, aside from the learning curve associated with any new piece of software?

In short, no browser is going to provide an experience that is “sufficiently better” than all the rest to warrant mass exodus from all the different browsers. It is too basic of a tool that just doesn’t require much to provide a good user experience.

30
Nan says:
June 13, 10h

I know I won’t be downloading and installing it. I have tried a lot of browsers at this point - Avant, Opera, Mozilla - but only Mozilla FireFox is being used and the rest is just sitting there on my hard drive hoping for an update.

31
June 13, 11h

Tantek: The difference between Naptser and Winamp and browsers is that when Napster and Winamp became very popular, there was no pre-installed alternative.

Do you think Winamp would ever achieve that kind of success today? Definitely not. Why? Because of pre-installed apps like iTunes and Windows Media Player. Same goes for browsers. I am doubtful a downloadable browser will ever be able to compete in market share with a pre-installed alternative because every computer today comes with a pre-installed browser that is “good enough” for most people.

32
June 13, 15h

Well, since I switched to Mac, I would prefer to have an new IE version for Mac to test my websites, instead of asking others to test the sites on PC/IE or use Virtual Machines to do the testing.

So hopefully after pleasing Microsoft with Safari for Windows and making Web Developers life on PC easier, Microsoft will release IE version for Mac as well.

33
June 14, 08h

> At 100dpi, ClearType wins out, but we’re not going to be stuck here much longer.

Indeedio. Will Shipley, writing about programming and the dangers of premature performance optimisation, pointed out that hardware, generally, will get better. If your app is great but runs a little slow today, on next year’s hardware it’ll still be great, and performance will be better.

Apple won’t have any more work to do to make their fonts look great on higher resolution displays.

34
June 14, 09h

> Apple won’t have any more work to do to make their fonts look great on higher resolution displays.

Indeed, but it might be nice if they did a little extra work to make it look great for everyone else in the meantime.

Font rendering isn’t a mutually exclusive, zero-sum game. It is possible to deliver hinted fonts that look good at low DPI *and* accuarately rendered fonts that look good at high DPI.

Apple just chose not to.

Also, the history of display resolution increases does not support this “suddenly, everyone has 200 DPI” scenario. Unless there’s going to be some kind of radical new display innovation, plotting the history of DPI increases on a graph over time is not encouraging.

35
jeremy says:
June 14, 17h

keep in mind that both apple and MS implemented their respective antialiasing approaches 6 or 7 years ago. Cleartype originated with MS reader and win ce (very low res devices) and with apple, osx.

As for the whole hinting discussion, good hinting and kerning pairs separates the typographic men from the boys.

As for ClearType, having used both platforms extensively, I’d say ClearType does far better at representing fonts at the edge of legibility (i.e. small sizes)

The IPhone may have 160dpi display, but its still only 640x480. Those web pages it renders will have small type indeed.

36
Xtfer says:
June 26, 18h

For those who think their JS doesn’t load in Safari and thats a “bug”, its a “bug” that Mac users have been dealing with for years because Windows developers either didn’t have the resources or couldn’t be bothered testing in Safari.

At the end of the day, font issue aside, if your site doesn’t work in any given browser, then thats your responsibility.

37
Dave B says:
June 29, 20h

The main reason why I want all the bugs to be corrected is the commercial. I can already picture Mac vs PC guy talking about Exploring or going on a Safari.

38
kL says:
July 02, 12h

What I love about OS X’s rendering is that in can render *compressed* text. Without pixel grid as imperative it can render text few percent narrower, if normal-width text doesn’t fit.
You can see that effect in use in TextMate’s project drawer for example.

(and it’s not that OS X completly ignores pixel grid, it still looks sharper than patent-free hintless version of FreeType on Linux, et al.)

39
mac says:
July 07, 11h

I actually much prefer the Apple/Safari rendering. To my eyes -at the distance from which I’m looking at my monitor- the Mac rendering seems to be closer to the actual letter-forms of the typeface, whereas the Windows rendering looks stepped.

Maybe it’s because I’m used to it. Maybe it’s because I’m using a correctly calibrated LCD; or maybe it’s just because on a purely numbers level I fall within the range of users Apple uses to ‘test’ their output.

I guess it all comes down to subjective choice and allowing control within the OS/App.

40
McSeem says:
July 08, 13h

There’s a new article “Texts Rasterization Exposures”:
http://antigrain.com/research/font_rasterization/index.html
I tried to summarize my experience and observations concerning the situation with text rasterization in Windows and Linux. I admit some statements may sound questionable, though.

McSeem

41
kreditrechner says:
November 20, 12h

what about the webkit engine embedded in Adobe Apollo (or AIR) ? Will the font rendering be OS-native or WebKit-native ? Or Adobe-native ? ;)