An Introduction to Web Fonts

For this post, I just pulled together some facts about current Web font basics to form a bit of an introduction to Web fonts. As with everything on the Internet, Web fonts are growing and changing rapidly, so much of this information will probably already begin to be outdated by the time I hit the "Publish Post" button. 


What are Web fonts?
• Web fonts are defined as the collection of fonts which are considered “safe” for Web use. Because the display of fonts on the Web largely depends on the viewer’s font collection, it is common practice to use fonts which are already installed on a large percentage of viewer’s computers. Unfortunately, good statistics on font installation is hard to find. As a consequence of this, as well as the fact that designers disagree about the percentages that make a font “safe,” there is no definitive list of web safe fonts. However, Times/Times New Roman, Helvetica/Arial, and Verdana are generally considered among the safest.


How are Web fonts used?
• Currently, there are a limited number of fonts that are considered “safe” to be used online because they are commonly installed on most PCs and Macs and should therefore be available on the end users machine. That is the limiting factor with the Web, you can only use fonts that are available on the end users machine. This is why Web designers usually specify a number of similar font choices when coding text specifics. If a non-standard font is specified and the user doesn’t have it, the font will default to the next one in the list or a generic font.
• There are other possibilities with installing fonts remotely, but these are still not 100% foolproof and don’t really offer a reliable alternative to using plain old CSS.
• An example of this is @font-face, a CSS rule which allows the user to download a particular font from your server to render a webpage if the user hasn’t got that font installed. This means that Web designers will no longer have to adhere to a particular set of “Web safe” fonts that the user has pre-installed on their computer. The latest versions of Safari and Firefox and Google Chrome support @font-face and Opera is planning to support it soon. Internet Explorer has supported it since 5.5.


What are the benefits of creating new Web fonts?
• One of the advantages of working with web fonts is that companies and organizations that use a certain typeface for their identity can now easily extend their brand to their online presence.
• Designers have more creative freedom and are not limited to “safe fonts.”

Web safe fonts chart courtesy of www.w3schools.com.

Sources:
– The Web Designer’s Typographic Glossary — Design Pepper 
http://designpepper.com/blog/post/the-web-designers-typographic-glossary/
– Method and Class: “Which font work on the Web”
http://www.methodandclass.com/article/font-on-the-web/
– What is @font-face
http://www.font-face.com/#lime_content
– World Wide Web Consortium – CSS Web Safe Font Combinations
http://www.w3schools.com/css/css_websafe_fonts.asp