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

css, fonts

Solution

(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.

Problem

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.

Original source