In magazines, you have a freedom of design almost on a par with illuminated manuscript. You can set your headlines in any font imaginable, even one where all the letters are little nude couples demonstrating the Kama Sutra, and run them vertically, horizontally, or at any angle between.
On the Web, you’re more constrained. Snazzy design was not a significant priority when it was conceived as a way to publish academic papers. On the contrary, the choice of font was originally left entirely to the reader. That makes a hell of a lot of sense when the priority is conveying information rather than amusing the eye (and in fact any decent browser still lets you override the creator’s intent and choose the font you find most readable), but of course designers soon wanted more control.
One way to insert fancy lettering is to do it as images. But these take longer to download, and directly conflict with important principles of flexibility and accessibility. Worst of all, search engines can’t index the text in a picture. So though they are used a lot for the headers of pages, images are deeply unsuitable when it comes to the body text.
There is some flexibility; the designer can specify what font they want. But “want” is the operative word – the wish will only come true if the user happens to have that font installed on their computer. While this is OK for a handful of almost ubiquitous “Websafe” fonts like Times New Roman or Arial Black, go for anything more imaginative and you’re taking your chances. There are different fonts installed on PC, Mac, Android, Linux, and so on. If the one specified isn’t there, another must be substituted. The result might look OK, or it might be grotesque.
But hey, it’s the Internet – why not just download a font? The idea looks good at first glance but there are a number of problems. A font is a big thing and takes time to download, so you either wait for it to finish before the text can appear, which would be tedious, or switch to it when the font arrives, which would be ugly and annoying.
What’s more, fonts tend to be expensive and proprietary. It’s a profitable industry, and foundries (many still call themselves that) are reluctant to give their high-value goods away. Thanks to this lack of cooperation, attempts to make downloadable fonts part of Web design have sputtered and died several times already in the medium’s brief history.
And that’s the stage we’re still stuck at, as I was telling a friend a couple of days ago. Afterwards though I decided to check on the latest developments – and I found I was dead wrong. Things have moved fast since I’d last looked. There are currently two “Webfont” services actually up and running. Adobe’s, which you pay for, and one from Google that’s free.
Hmm. I do like free.
So I had to try this. I’ve been (sporadically) working on a whole new cutting-edge website using Drupal and PHP and MySQL and all that good stuff. It’s still a long way from being finished though, and the aesthetic stage of the design, when I get there, must start with a clean sheet. So I can’t be doing experiments on that. In the meantime however I’ve neglected my actual working website. In fact it’s dated to the core now. Standards compliant, sure, but not to standards that people remember now. And the newest material on it must be five years old. But it’s all the showcase I’ve got, and I do actually get business from that site. A design refresh might be just the thing.
So I gave it the Google Webfont treatment. You might find it displays the old sensible face first before the fancy handmade-looking one appears, but once it has loaded you wouldn’t know it’s not a normal font.
The range Google has is still limited, at least when it came to my specific need for an all-cap, comic-lettering style font. The best I found is called “Walter Turncoat”, for some bizarre reason. It might remind too many people of MS Comic Sans, but it bears a surprisingly good resemblance to my real hand-lettering.
It’s not hard to use Google’s free Webfonts on your own site. (If you take care of your own hosting anyway. If you have a hosted blog it can be more tricky and/or costly. I’ve added a few useful links below.) In fact there are three ways: The easiest is to simply add an “@import” link to your style sheet. That way you can change the whole site with just one edit. However that method can cause some browsers to slow down, so the faster way is to add a link to the header of every page. There’s also a technique using JavaScript, but I don’t know of any advantage to that. More details on Google’s page.
It’s true that it seems a little rough. In the illustration I’ve inflated one up to some ridiculous size (350pt!), and you can see that in spite of it being a real vector font the edges are bizarrely complex and jagged. This I guess is an artefact of the compression that makes them load at such an impressive rate.
I’d like to see the roughness improved upon somehow – or perhaps it will be less important as screen resolutions continue to increase – but even with it I think the font gives the site a personality and friendliness that simply would not have been possible otherwise. We are on the threshold of a new era here.
Related articles
- How to Use Webfonts in Blogger (asserttrue.blogspot.com)
- 3 Simple Tips That’ll Have You Customizing WordPress like a Web Design Pro (managewp.com)
- Responsive Typography in Web Design: Understanding and Using (designmodo.com)
- Rethinking On Typography with Google Web Fonts (zoho.com)