Web Typography Tools and Tips

In a forgotten time (well just a couple of years ago, the digital world moves fast) web typography was pretty non-existent. You were limited to about 7 fonts that were guaranteed to display on a users computer. This made creating more individual designs or keeping something on brand quite difficult, especially when the fonts you could use included Arial and Times New Roman. You could embed fonts as images but that made editing content difficult and the big G didn’t like this when it came to search rankings.

There were a couple of options available but these often proved difficult or very developer unfriendly. My first real awareness of a usable service was from Google, in the shape of Google Web Fonts. This allowed use of a simple line of code to display chosen fonts from their library within individual websites, and created something more engaging and on brand.

One of the first sites we created with this functionality was for an up and coming music composer Mitchell Gibbs and part of the project was to create something minimal and individual. Through the use of more bespoke typography we could create something that remained clean in layout, but stood out with bold headings to create a focus for the site.

The advantage of this service was that Google were readily adding new fonts to improve their existing library, making it more useful; the initial library was quite limited, not in quantity but the usability of a lot of the fonts, as many were too eccentric to be used for the majority of sites. Despite my preference for Google fonts, recently the service has become quite slow, which affects page loads for users, so until they fix these issues (hurry up Google) we will hold off, which is a shame as it is quite a user-friendly option.

Our preference at the moment is for Typekit, which is used by some big name companies, so you know you’re in good hands. The advantage of Typekit is its large repertoire, making matching web typography with your branding that much easier, for example Apple can use their corporate font Myriad Pro for both their offline and online communications for consistency.

This is the main benefit of Typekit, since the fonts available come from recognised type foundries – something Google’s services currently lack – meaning a client can benefit from a higher quality of font in different weights. Typekit also includes plenty of well-known fonts that have been re-designed, or versions created specifically for greater legibility on the web.

We like this service, and have used it to enhance pretty much all of our recent work to ensure that the typography is a better fit with a client’s audience. Here’s an example of one of our sites using Typekit fonts: Hostcomm.

If you wish to see the benefits of web typography on your site I recommend you try Font Dropper. This is a simple plug-in for your internet browser, which adds a bookmark to your browser. When clicked, it allows you to edit the text on pretty much any site, meaning you can play Picasso, well with type at least – FontDropper. This is a tool I often use when designing for a project as it enables you to quickly try different combinations on a live site, giving a idea of new fonts in context and whether they’re appropriate for the project at hand.