Web Design and Typography

Web Design & Typography

The evolution of fonts in web design has been a slow and steady one. In the early days of the internet there was Courier, then Times New Roman, followed by Arial and Verdana. For years, the list of “safe” fonts available to web designers was less than extensive. If you wanted to get creative with your typography, your only option was to use an image, a choice that is anything but search engine friendly.

With the introduction of CSS2 in 1998, the @font-face embeding technique sparked excitement about the possibilities of fonts and the web. Unfortunately, browser support was hardly satisfactory and concerns about infringement and illegal use of fonts resulted in it being removed in CSS2.1. After a number of encrypted font formats fixed the infringement problem, CSS3 reintroduced the idea. But the problem still remained that no two browsers are alike.

TTF (True Type Font), OTC (Open Type Font), WOFF (Web Open Font Format), and EOT (Embedded Open Type Fonts) are the most widely used font formats. While TTF/OTF and WOFF are supported by recent versions of Firefox and Chrome, all versions of Internet Explorer up until version 9 only support EOT, a format not supported by any other browser.

By the time Internet Explorer joined the ranks of modern browsers with the release of version 9 in 2011, fairly widespread support for TTF/OTF had made fonts more consistent for most users.

Last year, Google introduced their own Google Font API in an attempt to ease the chaos of web design typography. With a good selection of high quality, open source fonts, Google Fonts allows designers to use a variety of creative fonts while maintaining a consistent user experience across browsers. This free service is easy to use by adding a brief link that Google provides to your website’s HTML. The font will be displayed to users on any of the following browsers:

  • Google Chrome: version 4.249+
  • Mozilla Firefox: version 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+
Posted in: Design

Download Executive's Guide to Website Development

Share This Article:

comments powered by Disqus