Font Smoothing in OSX/iOS

Font rendering differences

I found out something recently that’s been well documented, but worth repeating and worth repeating in reference specifically to iOS web app development.

Comparison of anti-aliasing settings on font rendering
Font rendering differences in 10.7 with font smoothing option switched on or off compared with a screenshot from an iPad 3.
The icons in this example are font glyphs and so also affected by the anti-aliasing settings.

In Mac OS 10.5 and below there were various options for on-screen font smoothing in the Appearance settings pane to try and optimise for various types of monitors.

In 10.6 though, this was moved into the General pane and reduced to the single option of ‘Use LCD font smoothing when available’, switched on by default.

Now, much has been written about the effects of this option and even how to bring back finer control through the Terminal, but the gist of it is that when on, it produces a pretty strong on-screen anti-aliasing effect. What’s more, the description of ‘Use font smoothing’ is pretty misleading because if you de-select it then you still get anti-aliasing, just less of it. Some might say a more reasonable amount.

Checkbox option within the OSX 10.7 General preference pane
Checkbox option within the OSX 10.7 General preference pane.
Checkbox is selected by default, preferred option is off.

This ties into iOS web app development if you like to view a web page or app that’s destined for an iOS device in your desktop web browser, by altering the user agent settings for example.

In this case, the strong anti-aliasing effect you’ll see with the default option selected means it’ll look nothing like it will on the device – switch it off however and it’ll match the degree of font smoothing almost exactly.

So, that’s the tip really… if you plan to view your web app on the desktop to test or tweak, then definitely try switching the option off to get a far closer iOS experience.

Leave a comment

Your email address will not be published. Required fields are marked *