Typography for the web: good news for designers

Over the past few weeks at Mogul we have been working hard on an extremely exciting in-house project. One of the reasons that we’re enjoying it so much is not only are we creating a beautiful website (which in itself is always exciting), but we’re also developing a brand identity. And it has been going back to brand identity design that has got me thinking about how far web design has come in recent years, particularly the advances that have been made in web typography. There are so many things that we are able to do now that not so many years ago would have been impossible…

Typography on the web has changed, and in almost every way very much for the better. The advent of the @font-face rule, and the subsequent increase in the number of fonts available for use online, are most certainly good things, and it is with great pleasure that us designers can now choose from an extensive range of fonts for use online. We are no longer restricted to the sad selection that once was (I’m talking Arial, Verdana, Tahoma, Times New Roman and god forbid Comic Sans – you know the culprits, we’ve all used them).

Although for years web designers have come up with creative ways to get round the problem of being restricted to only system fonts – using images of type, or image replacement technologies such as Cufon – these have always been at the expense of usability. But now, with all of the latest versions of browsers supporting the @font-face rule, and font foundries producing fonts in the IP-protected WOFF format, the number of webfonts available has seen a sharp increase. In other words, what this means for you, is that in all likelihood your brand font that was not available as a webfont 5 years ago, will almost certainly be available now.

So far so good, right? Well yes, this is brilliant – it means that your brand guide will no longer need to include an aesthetically inferior ‘websafe’ version of your font. Your visual consistency will remain intact, and your brand identity will flow seamlessly across online and offline media. Well that’s the idea at least.

The only drawback to this situation is that many people think that more fonts = better design. This is unfortunately not necessarily the case. Firstly, many brand and print designers now think that ALL fonts are available as webfonts, which they are not. So when refreshing your brand, or developing a new identity, make sure that the fonts that are chosen are available for web. Secondly, no matter which font you choose, typography will always be about the details; about how you use the typeface and the design decisions that you make. Letter spacing (tracking), word spacing, line height (leading), paragraph spacing, heading to body size ratio, characters per line – these are the very basic foundations of good design. And up until fairly recently they have been widely ignored on many websites (not by Mogul I might add!).

Fortunately, as well as an increase in the number of webfonts available, there has also been the development of CSS3 (an updated version of the coding language that is used to make your site look beautiful), which means that the control designers now have over typography on the web is much more comprehensive.

With this increase in choice and control a new era in web design has come about. Designers are getting experimental with typography, and trying out new techniques (with varying degrees of success!). We can now use gradients, shadows, outlines, transitions, opacity and blurs. We can even create shining or flaming text, just using code, if we so wish. But, and it is a big but, just because we can use a ‘funky’ font, create a 4px text shadow and a metallic shine, does’t mean that we should. The danger of giving designers lots of options is that they will try and use them all at once. We don’t want the web to start looking like it was created by an intern using word and clip art now do we! So with all of these options it is more important than ever to exercise some restraint, and to keep the golden rules of typography always at the back of our minds.

These techniques have also been developed with the intention that they will look great across the variety of devices that people now use to browse the web. So, if done well, your customers will have a great experience of your site, whether they use their phone, tablet or PC to view it.

So what does this all mean for you and your business? Well, because online marketing and communication are carrying ever increasing clout, and more and more people are accessing the web with mobile devices, these developments have come just in the nick of time. Technology has placed us in a really strong position to be able to produce more beautifully crafted, high quality designs online. And this means that by using our time-earned typographic skills and our newly extended set off tools, we can make sure that your website or app will more usable than ever, and that your brand can reach its potential online.