Difference size font rendering on Windows VS MacOS. How to solve?

Question

I've been wondering myself why on windows my font looks smaller, and much crappier than on OSX.

Screenshot Mac VS Windows : http://screencast.com/t/UUxqLRhM

Is that because i used "em" on some rules instead of "px" ?

Thanks.

Answer 1

The way MAC and PC handle fonts is different, but that is not what is happening here. You have set a font that is not web-safe, "MyHelveticaBold", and the font windows is using is clearly not the same as the one on your Mac. If you don't want to use a web-safe font then you should use open source web fonts that you can serve to the user upon visiting.

There are some CSS properties that can adjust how a font is rendered such as -webkit-font-smoothing. Read more here: http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/

Answer 2

(This is from a comment, but I'll post as an answer.)

This is nothing on your end, and the culprit is different font rendering engines. Mac OS X tries to render fonts exactly as they were designed, whereas Windows tries to alter them slightly to make them more readable. The problem is, with certain fonts and sizes, it actually makes them look worse. (This article is a good read on the subject.)

If you make the font bigger, it will probably make it look better on Windows. I would venture to say that if you removed the bold font-weight, it would also look cleaner. You could also try a different font.

Overall though, all you can do is just play with different settings and see what looks good and what doesn't; the actual rendering is out of your control.

Answer 3

Different browsers do have different standard font-sizes. Maybo other font-types and the different way to show fonts of the OS. 100% same look is... not possible