Apple releasing Windows version of Safari

[KLB]

For those of us who run windows, but would like to test our sites on Safari, Apple is now making a Windows version of Safari available at: http://www.apple.com/safari/

It is only in beta but its a start.

[Cutter]

I've found it very interesting how Apple has finally cozied up to Windows. I think they saw the light with iTunes. Hell, I use iTunes all the time now, download TV episodes and just plug the PC into the HDTV.

[Johnny Gulag]

This is an awesome turn of events, no more screenshots!

[Selkirk]

Yeah, its really a win for everyone. I'm working on a site today where the designer had no conception of what the site looked like in Safari. It was completely unusable. Now there is no excuse for that.

[KLB]

I had a chance to look at my site with Safari on OS/X a month or so back and the Windows Safari and the Mac Safari render virtually identically. The only real annoying thing for me is that Safari renders fonts with a much heavier line. Thus normal fonts look almost bold and bold looks really bold compared to other Windows browsers. I'm playing around with this, but finding no solution.

[Selkirk]

Fonts are one of the biggest differences I notice when I do happen to use a Windows computer. Maybe its just what I'm used to, but I've always found the fonts on the windows side to be ugly.

I did some cross-browser, cross-platform tests with typography a while ago. Safari pretty much rendered every combination of attributes at least decently. IE, on the other hand was nearly unreadable in some combinations as was FireFox/Win. I wonder if the Windows version of Safari will have different font rendering because of the underlying platform?

Another Mac/Windows difference that gets me is font size. Browsing on Safari, some pages designed for Windows have fonts that are just way too small when viewed on a mac. Hopefully that will change with OS X 10.5 and device independent resolution. Having to magnify font sizes is probably my biggest complaint with my MacBook. I can't just increase the default settings because I have different DPI on my laptop and my external monitor.

Another big difference is in rendering of forms. Safari does not let you change the display of form elements in the same way as IE and FireFox. For example, a checkbox in safari will always look like a Macintosh checkbox.

[KLB]

It isn't important whether or not the fonts on Windows or Macs are ugly because there are lots of different fonts pre-installed on both. It is about the proper choice of fonts for webpages. For instance, Times New Roman is not a good font for webpages as it is harder to read on-screen. The best choice for on screen display is Verdana because it is clean without serifs yet makes the 'I', 'l' and '1' look different (something Arial does not do).

What is important is that fonts render the same way on different browsers. Safari making text thicker than what all other browsers do means that a page doesn't look as the web developer intended on Safari if they developed their site using Firefox, Opera or MSIE, which render fonts the same way. Likewise a Mac developer using Safari may expect fonts to look the way Safari renders them for all users not realizing that all other browsers render fonts differently from Safari.

[Selkirk]

It seems alot of blogs and forums are talking about this today. I found some interesting information on the font issue in the comments of this post (http://www.codinghorror.com/blog/archives/000884.html). It seems that Microsoft is using manual hinting on certain fonts. So some fonts at some sizes will look better on Windows because the pixels have been manually produced, where on the mac they are generated. On the other hand, Windows doesn't preserve the spacing between characters and words and the fine details of fonts. That's why Safari did much better in my test of typographical combinations. I also think some people try to look at the form of individual characters, while missing the readability of the text as a whole.

As far as trying to get things to look "the same," I find that way leads to madness. I think its better to have things that look good under a variety of conditions, rather than to try and make them look the same. Go with the flow. :)

[KLB]

As far as trying to get things to look "the same," I find that way leads to madness. I think its better to have things that look good under a variety of conditions, rather than to try and make them look the same. Go with the flow. :)

Except for the fact that Safari's over bolding of text makes my page look cartoonish, which isn't good for a science site. This isn't a subtle difference. There is a very significant difference in the way Safari renders fonts and the way all other browsers render fonts. A little difference would be one thing, but this difference isn't little with Safari. Of any group that appreciates this concern, the graphics design community, which heavily use Macs should be able to really appreciate this concern.

[Selkirk]

I don't think your site looks cartoonish at all under safari, although the fonts are too small and the fixed width is too narrow, making the text very crowded when enlarged.

BTW, its not just Safari, I believe FireFox/Mac renders fonts the "Mac way." Not sure about Opera/Mac.

[cameron]

The only real annoying thing for me is that Safari renders fonts with a much heavier line. Thus normal fonts look almost bold and bold looks really bold compared to other Windows browsers. I'm playing around with this, but finding no solution.
I found that IE7 is similar, as if they were ripping off Mac browsers.

[KLB]

I don't think your site looks cartoonish at all under safari, although the fonts are too small and the fixed width is too narrow, making the text very crowded when enlarged.
This is due to the very large size of your desktop compared to the size of your monitor. My site is designed to accommodate users who are still using 800x600 resolution, who make up over 11% of my user base. I can not go to a dynamic width layout as it causes other really bad side effects with my layout (especially across different browsers). Also, the font size I use isn't small compared to what is typical for sites.

Your problem with how "small" my page layout and text are the exact reason why browsers need to "properly" zoom pages the way Opera does. Someone who runs their desktop at 1280x1024 on a 14" monitor can't expect pages to be readable with large enough text when the site also has to support 800x600 resolutions. The web browser on the other hand can quite easily allow users to adjust webpage "size" if they would just zoom everything proportionately.


BTW, its not just Safari, I believe FireFox/Mac renders fonts the "Mac way." Not sure about Opera/Mac.
And this is a point where Apple needs to compromise and follow the lead of what is customary. Being different simply to be different is counterproductive. As a developer I need to be able to know that when I carefully code to W3C standards and choose generic fonts my pages will render the same across browsers.

[KLB]

I found that IE7 is similar, as if they were ripping off Mac browsers.

I run IE7 on WinXP and I don't see what you are talking about. Safari makes my text way heavier than IE7.

[Selkirk]

Ken, As I said before, one of my biggest problems with OS X is the problem of font sizing and resolution for the laptop display. I definitely think the solution to this lies on the OS X side. My problem is that if I jazz up the default font size in safari so its fine on my laptop display while I'm browsing from the coffee shop, it looks HUGE when I get home and hook up to my external monitor. To me, this is my single biggest usability complaint with OS X, something I hope 10.5 will address in October.

I'm not saying your layout is wrong, just that the choices you have made make the site hard for ME to read on MY system.

Regarding coding to W3C standards and choosing generic fonts, are you sure that you really are designing for w3c standards and not "ie standard?"

see css units (http://webkit.org/blog/57/css-units/) and High DPI web sites (http://webkit.org/blog/55/high-dpi-web-sites/).

[KLB]

Selkirk, My environmental chemistry site (which is what I really care about) validates to W3C's HTML4.01 Strict and CSS2 specifications. I'm pretty obsessive about making my code validate. I also test my site across a wide range of browsers and currently test against:
MSIE 5.5 (spot check only now a days), 6.0 & 7.0;
Firefox 1.5 & 2.0 (primary development browser);
Opera 8.5 & 9.02 (been testing against Opera since v6.0);
Safari 3.0b (as of yesterday);
Lynx (spot check only).

I also spot check pages with CSS and JavaScript turned off to make sure my pages are accessible and logical for users of non-graphical browsers (e.g. dynamic braille displays).

I have been preaching conformance to W3C specifications since the days when HTML3.0 was state of the art. I am absolutely certain that the issue I am having is a Safari specific issue as I have confirmed this by reading reports of it on many different sites. The issue revolves around how Safari handles font smoothing.

[agua]

In my experience of building websites - it seems to be Internet Explorer which cannot seem to render a bold version of a font correctly.

Ken - I've just checked your site in FF, Safari and Opera on a mac and they all render the same - nice font definition IMO.

One thing you have to remember is that when you look at your site using a different environment - it is going to be different to you because it is not what you are used to.

I code a different site (or 2) each week and test in different environments and you just have to give and take - no 2 combinations of browser and system will ever produce the same results.

I've always looked at your environmental chemistry site using a mac and it has never ever crossed my mind that it looked "Cartoonish".

If you are really worried about your fonts being bolder then use the font-weight property and the values of 100 - 900 for variations of bold.

To isolate style sheets to work in safari only use this hack
/*\*/
html>body*.red { color: #FF0000;}
/**/Hope that helps :)

[KLB]

I tried the numerical font-weight variations and it had no effect. Unfortunately none of the browsers do more with the numerical variations than pigeon hole them into normal and bold. There is so much more we could do layout wise if we could define degrees of bold that all browsers appropriately obeyed.

Someone over at SitePoint forums pointed out a good article that explains why Apple and Microsoft have taken a different track on rendering fonts that can be seen at: http://www.joelonsoftware.com/items/2007/06/12.html?hi=joel

Basically Apple is very style conscious, which means they make sure fonts render on screen as accurately as possible in relation to how they print out. This results in thicker lines so that the fonts are smoother. This also makes Apple's fonts appear fuzzy on screen. Microsoft on the other hand has a utilitarian approach to rendering fonts on screen, which means readability trumps style. Microsoft will compromise accurate flow of font lines to provide crisp text that is very readable. This means that Windows can render fonts with a finer line than can Macs/Safari.

Both philosophies have merit. Apple's approach makes a lot of sense when one is creating a document that is intended to be printed out. Microsoft's approach, however, makes more sense for things that are intended to be primarily read on screen. Microsoft's approach might lack Apple's artistic sense of style, but it is easier on the eyes.

Personally I think that both Apple and Microsoft would do good to adopt each other's approach to rendering fonts where Apple's methods are used for documents that are going to be printed out, while Microsoft's method is used for on screen presentations like webpages.

[Selkirk]

The degree of bold depends on which fonts you specify and the fonts available on the user's system. The CSS spec has an algorithm (http://www.w3.org/TR/2004/CR-CSS21-20040225/fonts.html#propdef-font-weight) for how to map the weights to fonts.

At best the CSS font algorithms are sloppy. You say "I'd like something like this" in your style sheet. The browser then has quite a bit of leeway to match against your specification and substitute in the name of readability and of what is locally available for fonts.

It looks like Microsoft did change their font rendering (http://blogs.msdn.com/ie/archive/2006/02/03/524367.aspx) in IE 7. I repeated some of my tests last night and IE 7 is much better. I think they've come closer to the CSS 2.1 standard for somethings. There are still differences, however. For example, Safari bumps a font size of 15.5px up to 16, which IE 7 rounds it down to 15px. Which is right? Who knows.

Here is a good writeup (http://www.macobserver.com/columns/devilsadvocate/2004/20030330.shtml) on the resolution independence issue.

[agua]

nm... probably better off not specifying half pixels as I don't think there is such a thing :)

[Selkirk]

The rounding issue with font sizes comes about as a normal part of the cascade if you use relative values, such as percentages or ems.

The interesting thing, if you read some of the device resolution independence links, is that a pixel is considered a relative unit and a pixel unit in css is not necessarily a pixel on your device. In that case, half pixel measurements would be meaningful.