A mini-guide to Typography on the web
One of our customers just asked about changing fonts on his website, and we thought we’d share the response we gave in case other people are interested.
Typography on the web is quite a complex issue, but it basically boils down to this:
- In the old days you had to specify fonts for websites that you could be sure would be installed on people’s computers. The code would say something like ‘helvetica; arial; sans-serif’ which would tell the browser to use Helvetica if the computer had it (mac), Arial if it didn’t (PC) and the computer’s standard sans-serif font if neither were available. It meant there wasn’t much choice over which fonts were safe to use on the web.
- Now you can be more precise about which fonts you use. The website delivers the font to the computer so it can display it for the site. The complication is that different companies own the rights to different fonts and some charge for their use on websites. Google Fonts are free but generally poorly designed. Fonts.com and TypeKit are companies that offer well-designed classic and contemporary fonts from famous foundries. They have free and paid-for options, but the free option requires that you have a little badge advertising their services on your site. There are plug-ins available for WordPress that make using any of these services very simple.
If you’re interested to find out which fonts are used on a site you can view the source code and search for ‘font’ or ‘font-family’. If you know how to use the developer tools and element inspector for your browser you can find out more precisely which font is being used for specific pieces of text.
There’s a wonderful website and mobile app called WhatTheFont that can examine a photo that you have taken and tell you the font used in it. Great for if you see a font that you like in a magazine or advert.