Tech Tip: Using custom typography on your blog

On the web (as opposed to print) it's not that easy to introduce custom typography or unusual fonts.

And yet, attention to typography is an essential part of design for print, and custom fonts can take on a fame of their own, such as the typeface designed in 1916 for the London Underground, known as P22 Johnston.

But introducing a custom or unusual font to the web is risky. Just specifying a particular font doesn't mean it will appear that way on every screen - if the device you're using to read the blog doesn't have that font installed, the browser will substitute a default font such as Arial or Times New Roman. Suddenly, your fancy heading looks a little... flat.

Should you be using custom fonts in the first place? Elaborate fonts can be difficult to read on screen. No-one wants to have to work that hard.

Then there's the question of aesthetics. Does that font really look good as a header for your blog? Or even if it does, by using the same font for menu headings and in the sidebar make the page a little busy or cluttered?

What about the impression you'd like to create - does the font suit the subject matter? Does it say the right things about your blog?

However, a strong custom font can really make your blog stand out and come to be instantly recognisable as your 'brand'.

By using Typekit, the New Yorker is able to
reproduce its iconic print typeface on screen.

If you do decide to use a custom font, one way of doing it is to use a web font. This is a font that is hosted remotely and loaded onto the webpage by the browser, in the same way as photos. What you have is still live text, but it should always display correctly. I say 'always' in the internet sense, which is 'usually but not guaranteed'! Custom fonts don't always display correctly in mobile devices, and even when they do, a slow or interrupted connection can mean all you see is a blank space where the font should be.

Google Web Fonts

Typekit was one of the first web font services, although it's not free. Google Web Fonts is free, and worth checking out. Here is a useful tutorial on how to use Google Web Fonts in Blogger, and if you are using Wordpress this article offers several options on how to use custom fonts.

If you don't feel especially strongly about the font used in the main body of your blog, then go for a classic, safe Sans Serif font like Arial or Verdana. You can make it look quite distinctive on the screen by other means, for example by changing the colour or line height or justifying the text.

If you only want a fancy font for your main header or sidebar headings, then one method is to create them as image files. Just be aware that it can make your blog more image-heavy and less fluid, and from a point of view of being found in web searches it's not quite as good as using 'live text'.