Typography on your Website

Published: May 11 2012, by John

Font selection on websites has always been something of a bug-bear. For a long time we could only use fonts that were universally installed on users computers. This meant Arial, Helvetica or Verdana for sans-serif fonts and Times, Georgia or Garamond for serif fonts.

Like so much in the web world though - things are a changing.

You can now use a technique called @font-face which allows you to embed specific fonts into your web pages. There are a few restrictions with issues over licensing and consideration that embedding these font files into your website does add a bit to the overall file size. But on the whole it's a great step forward and can be a simple way to really enhance the branding on your website.

Google offers a free web font service, which we have used in the past. But as with all things: you get what you pay for. Overall we've found that free fonts don't have the attention to detail put into them to be really robust and ensure top quality presentation in all instances across a website.

There's lots of more premium solutions, the one we've been really happy with at Mekonta is Typekit. It's a paid service, but the annual fee is pretty modest and, importantly, gives you access to a number of premium fonts that can really enhance your website.

We used it on our own website. We use Museo Sans for most of the body copy. Chaparral Pro for a serif font and Bello Pro for the script style headlines.

Bello Pro

Chaparral Pro

It does make a difference and helps distinguish your website from the competition with an extra layer of individuality and character. The Mekonta logo uses the font Candy Script - but licensing means we can't use this on the website with @font-face. Bello Pro gives a similar rounded, chunky and scripty look which maintains some of the main branding traits. Almost, but not quite - can be dangerous compromises when it relates to your company branding. But the web isn't a perfect place and you have to relinquish control sometimes, and a close approximation to our first choice font is one we've been happy to make.

If the technology weren't available to us, as web designers we could manually create some graphics whenever we wanted to use a particular font in a headline and use a text replacement technique. That's all very well for us to do on our own portfolio website - but not really practical for clients who want to be able to maintain their websites without having to resort to this type of jiggery-pokery.

So we are now recommending a Typekit licence as part of most web projects we quote on. The extra cost of it is really minimal in comparison to the extra design and branding advantages it brings.

On the website we recently launched for Erin Cox Jewellery, we used Typekit. Across most of the site we used the sans-serif font Proxima Nova, and made occasional use of a serif font Acta Display as a nice contrast. To enhance the contract between fonts, the serif font is always used in italics. Acta Display adds a sense of elegance to the website and is easily legible at small sizes. On the blog pages, we use Acta Display in a much heavier weight at a larger size. It gives a very different look to these pages - but still retaining consistency through using the same font.

Font licensing is still an issue, so it's not always possible to use your first choice of font as used across all company marketing. But often there's an acceptably close alternative and more fonts are having licenses updated, so if it's not available today it might well be soon.