Gone are the days of the Blackboard
Fellow web-users, by the very fact that you are reading this article, I’m going to assume that you are savvy enough to understand what the web is and also what a typeface is. (For those of you who are a litte foggy, this should clear things up: http://en.wikipedia.org/wiki/Typeface)
In today’s modern classroom, the blackboard is no more and the humble chalk has taken on a much more sinister meaning. Children are no longer practicing their hand-writing on the board in front of the class, but rather selecting which font to use in Word. Yet many people are un-aware of the difference between fonts that you can use on your computer, and font’s displayed on the web. And so without further a due our lesson in Web Typography begins…I hope you are all sitting comfortably.
It is a common misconception that a font that you use for documents or printed material, possibly even your corporate typeface can be slapped onto a website and used just as you would any other format. From the dawn of the web when HTML was first created, font faces and styles were controlled exclusively by the settings of each user’s web browser. Then in 1995, Netscape introduced the <font> tag which was then standardized in the HTML 2 specification. However, the font specified by the tag had to be installed on the user’s computer or a fallback font, such as a browser’s default sans-serif or monospace font, would be used. A list of fonts were compiled based on the most likely to be installed across all browsers and Operating Systems, these were considered ‘Web Safe’ fonts (For a complete list of what fonts were considered ‘safe’ for web, see this site: http://web.mit.edu/jmorzins/www/fonts.html) In summary, the most-used were (and still are!):
- Arial / Helvetica
- Times New Roman / Times
- Courier New / Courier
- Verdana
- Georgia
- Trebuchet MS
And so web designers were either limited to these web-safe fonts, or forced to find other methods of using them. Such methods would involve ‘Font Replacement’ techniques, which would either use code to embed a non-web font or alternatively convert the text into an image with a non-web font. The problem for designers with these methods however, was that using code to replace text would often cause long bug-fixing sessions and many headaches to ensure that it worked cross-browser. And with image replacement, the text was no longer selectable and so could only be implemented on very short blocks of text or headings, where a user was unlikely to select it.
However due to the rate of progression, the web is now opening up much easier methods to use different fonts online. Coupled with that, the fact that the average user’s computer now comes preloaded with more fonts than it would have 10 years ago. This therefore means that we are now seeing an influx of websites that can be very creative with the way they use typography. While this is great in the sense that traditional and digital design are becoming ever closer, it does mean that some maverick designers now have more options to create something hideous and illegible.
And so web designers now face the crux that has been at the forefront of art and design over the last few decades; Form over Function. Or vice versa, as readability, usability, and style should all be balanced in perfect harmony to both visually represent the website, but also make it easier for the user to access information. While there will be inevitable failures, there will also be some truly stunning design (see http://carsonified.com/ as an example). As it happens, here at Slightly Different HQ we have a number of sites in-development that not only use beautiful typography, but they are also accessible, legible and most importantly, user-friendly. Watch this space for a sneak peak!
