Apple releasing Windows version of Safari

[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/...2.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 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 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 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.