Optimizing fonts for mobile devices

Having looked at text sizing, the next thing to focus on is fonts. You are probably aware that until quite recently, web designers were limited as to the number of fonts we could reliably use on websites. We tended to stick to half a dozen, which we could assume would be installed on users' computers, defining backup fonts just in case. This has changed recently with the widespread adoption of the @font-face property and the explosion of online font services. Theoretically, you could now use any font you wanted anywhere on your site.

But this doesn't necessarily mean that you must apply all those fonts. A large part of the reason designers have historically stuck with the common fonts, especially for content (as against headings), is that they work well on screens. Fonts such as Georgia and Verdana were designed to be viewed on screens and so they are easy to read for users.

Note

For a guide on using web fonts and the @fontface property, see http://www.html5rocks...