In recent days I came across with a particularly problem where the text looks bold on a Mac browser (Firefox, Safari, Chrome) and at the same time, looks pretty fine on Windows browsers. This behavior doesn’t seem to affect all the text, but only for some fonts and a certain sizes and backgrounds.
I don´t have a Mac, so I never considered this kind of problem until some Mac user let me know and sent me a screenshot of the issue on Chrome and Firefox. The problem seems to increase over a solid background. On Windows everthing looks fine no matter the browser but on Mac, especially on Firefox, everything looks thicker.
This doesn’t apply for Windows. So grab a Mac and see these examples:
Gill Sans
Looks bold on Mac
(Gill Sans is a Mac font. If you are using Windows, probably only see Times New Roman because Gill Sans is not a safe web font. Use it carefully).
Helvetica Neue
(Helvetica Neue is a Mac font. If you are using Windows, probably only see Times New Roman because Gill Sans is not a safe web font. Use it carefully).
Arial
Looks bold on Mac
(Arial is a web safe font. It exists on almost every plataform. You should use it).
Solution
Mac uses subpixel rendering to increase the apparent resolution of the display, which helps render crispier, sharper text. That’s why the text seems bolder, even if it is not set. So, on Safari and Chrome browsers, you can turn subpixel rendering off and instead uses the standard antialiasing technique to make fonts look smoother.
It is not a bug of Mac, in fact this is for a very good reason. Each pixel on the screen isn´t one little square of light, it’s is actually three stripes colored red, green and blue. Each of these subpixels can be turned to different intensities, which allows them to be used for extra detail. So instead of using all 3 simultaneously as one pixel, we use these subpixels individually to draw sharper shapes at very small sizes. That’s why at larger font sizes, everything looks quite thicker and strong (at least compared to Windows). The reality is turning subpixels off just makes text less readable at smaller sizes. The irony is that the Apple’s home web site, turns off subpixel in their own style sheet called base.css:
/******* body rule of the Apple's home web site CSS on apple.com *****/
body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; background-color: transparent; color: #333; -webkit-font-smoothing: antialiased; }
Option one
Lets turn subpixel off then. This will not work on Firefox. Lets try this interesting property of CSS called «font-smoothing». There are three different values we can use for it.
-webkit-font-smoothing: none; /* Looks very thin and awful */
-webkit-font-smoothing: subpixel-antialiased; /* It is the default and looks bolder */
-webkit-font-smoothing: antialiased; /* Looks pretty much the same than Windows */
Let’s try antialiased on the examples above and see what happens. This will not work on Firefox.
This doesn’t apply for Windows. So grab a Mac and see these examples:
Gill Sans
See the difference? Looks thinner on Safari and Chrome.
Helvetica Neue
See the difference? Looks thinner on Safari and Chrome.
Arial
See the difference? Looks thinner on Safari and Chrome.
Option two for Firefox
Well it seems to solve things on webkit based browser, but what about Firefox? Well, if you really have to, you can accomplish these using a standard and nice property that we use almost never on Windows: font-weight. On Windows we set two values: normal (400) and bold (>600). That’s it. But on Mac we have to specify the thickness of the font and besides, this only works with font that support weight like Gill Sans (3 weights:300, 400, 600), Helvetica Neue (4 weights:100,300, 400, 600) and others. Arial, Verdana, Helvetica and others do not support other weights than 400 (normal) and 600 (bold).
font-weight: lighter | normal | bold | bolder; /* standard named weights */
font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; /* 400 is the same as normal, 600 is the same as bold */
Lets try it instead of the font smoothing approach. This will work on Chrome, Safari and Firefox. This doesn’t apply for Windows. So grab a Mac and see these examples:
Gill Sans
See the difference? Looks thinner. Just like on Windows.
Helvetica Neue (weight 200)
See the difference? Looks thinner. Just like on Windows.
Arial
No difference. Arial does not support others weights than normal and bold
We can even use a lighter weight for Helvetica Neue:
Helvetica Neue (weight 100)
See the difference? Looks super thinner.
So there you have it. I think the right thing to do is let the browser and the platform decide what kind of rendering is the best for it. That’s the beauty of HTML, standards, right? It is almost impossible that you try that your design looks exactly the same on every device on the planet, no matter how different they could be. But, I know the reality is far from this. You stomp with situations where you have to do «your magic», even knowing it sounds crazy. So, lets put a smile on their faces and use this work around on our developments.