A friend recently asked me: “What are your favourite fonts at the moment?”
Back in my uni days there was one font that always had residency in my top five: Georgia. As a designer working mainly in the web environment, Georgia stood above the limited selection of web fonts available and I used it religiously.
However, a year or so on and Georgia has slipped way down my rankings. It made me think how much typography has moved on in the last few years and how we are no longer limited to a handful of web fonts. In fact, with CSS3 features, the potential of typography on the web is almost inline with print.
Hosted web font sites
There are many hosted web font services that allow you to use traditionally non-websafe fonts on a website. They’re all pretty straightforward, polished services with fallbacks for older browsers. Services such as Typekit have a range of fonts from different foundries, but each one has a different set of fonts so you may need to browse several sites to find what you need.
Apart from the monthly running cost of a hosted web font service and a sometimes limited range of fonts, the main disadvantage is that the fonts aren’t hosted by the developer. This takes control away from the developer and if the service ever went down, all the fonts across your sites would stop working.
Here’s a good resource which compares the features of various hosted web font sites: http://sprungmarker.de/wp-content/uploads/webfont-services/
Font-face
An alternative to hosted web font services is font-face. It’s been around for a while and though it’s surprisingly supported by IE, it has only become widely supported in the last couple of years. It does allow you to upload fonts but, unfortunately, the technology is classed as a font distributing service and is therefore illegal for most fonts with commercial licenses.
However, on my last couple of projects I’ve noticed that there are a number of high quality free fonts which are similar to popular commercial fonts. Some of these are good copies of the original, whilst others just pay homage to a classic, but all are free to use and legal for font-face use:
Didot
Avant Garde
Myriad / Frutiger – Vegur
Bodoni
Helvetica
Palatino
Garamond
Gotham
DIN
Bembo
Font Squirrel has lots of downloadable font-face packs so it’s easy to set up on your site. It even has a generator which converts uploaded font files to formats needed for font-face. From there, you simply copy and paste a snippet into CSS.
Font-face doesn’t work on older versions of Firefox and Safari, so make sure a suitable fallback is defined. This can be done by using a good CSS font stack. For example, if you’re using Avant Garde, then
Example 1
(below) would ensure that when font-face isn’t supported, a similar font (Futura for Mac and Century Gothic for Windows) will display rather than just reverting to Arial.
Example 1
font-family: “Avant Garde”, “Futura”,”Century Gothic”, sans-seri;
Sometimes on PC browsers font-face type doesn’t appear antialiased. This can be fixed with the following CSS declarations:
-webkit-transform: rotate(-0.0000000001deg); text-shadow: 0px 0px 1px rgba(0,0,0,0);
Finally, there is a Javascript font replacement service called Cufon. It’s a solid cross browser as long as Javascript is installed, but the type it renders isn’t selectable. This makes it suitable for headers but not for body copy. Overall, Cufon is a useful script if the alternatives aren’t available.
Web Font Kerning
Kerning all letters initially appears to be a really simple CSS declaration. It even allows you to accurately convert the ‘tracking’ value in the Adobe type tools into CSS using this simple calculation:
1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em
However, WebKit browsers Safari and Chrome have problems rendering sub-pixels and because of this, they’re going to have problems if you’re trying to kern to a fraction of a pixel. So, it’s best to keep your kerning to whole pixels if you want the type to look the same in all browsers.
It is possible to kern individual characters with the jGuery plugin
lettering-js
, however, it’s only advisable to use this for headers as it can be time consuming.
With the development of web typography and CSS techniques, developers no longer need to be limited. Now we can design something as it would be printed and more often than not it can be done on the web. It may take a few modifications to achieve this, but nothing can be achieved without pushing a few boundaries.
Having said that, sometimes, when I’m sat at home designing a website, it feels nice to set the typeface to Georgia italic…if only to transport me back to simpler times and feed my nostalgia.
