I recently spent sometime working on a responsive header using foundation 4 and was in the process of testing it on other machines around our office. I noticed on a co-workers machine that the fonts looked a lot different than on my machine. I was puzzled as to why this was occurring.

My browser vs. Co-workers

(opens new window)

(opens new window)

We are both using Mountain Lion and Chrome in this example. As you can see the fonts look thicker and bolder on my co-workers machine. I did some investigation and found an option under Mountain Lion's general system preferences called "Use LCD font smoothing when available". On my machine this was unchecked. It looks like on newer machines this is checked by default. If you uncheck this option and relaunch your browser (Chrome in this case) you'll notice the thicker and bolder fonts go away.

(opens new window)

We wanted to find a solution to normalize this on the web because we preferred the way it looked without font smoothing enabled. We found that if you apply this to your websites it fixes the problem. Please note that this only works in webkit browsers. We have not found any other vendor prefixes that accomplish this.

body { -webkit-font-smoothing: antialiased; }