Using Google Web Fonts to Make the Web More Beautiful (and Functional)

A. Dawn Shaikh, Senior User Researcher, Google, Inc.

Summary. The state of web typography is undergoing a change as web fonts become more prevalent. Website designers and developers now have many alternatives to the standard system fonts (Arial, Times New Roman, Georgia, etc). This practitioner-directed article explores the current state of web typography, work-arounds that are commonly used to incorporate non-standard fonts and their drawbacks, and the alternative method of using web fonts to customize a website’s typography. After a brief overview of several web font services, the article describes Google Web Fonts and shows several examples of Google Web Fonts in action.

Current state of web typography

Today designers and developers typically rely on the standard “web-safe” fonts or system fonts – fonts that are commonly installed on operating systems and therefore available for all users. When a web page designer calls a system font, the font is called from the users’ machine. Commonly used system fonts include Arial, Courier New, Georgia, Times New Roman, Verdana, Tahoma, Trebuchet, and Comic Sans.

Existing font work-arounds

Many designers and developers rely on work-arounds to incorporate non-standard typography on their sites. The most commonly used work-arounds are embedded images & Adobe® Flash® replacement techniques. While these work-arounds allow designers more creative freedom than system fonts offer, they have some drawbacks. Most of the drawbacks are those that are inherent in images or Flash – not selectable, searchable, accessible, or translatable, and often requiring plugins.

An alternative method – web fonts

Web fonts are not a new technology; the @font-face rule was first proposed for CSS2 and has been available in Internet Explorer since IE 5.0 (ref) When designers/developers want to use a non-system font, they license and host the fonts on their servers. When users visit a site using @font-face, the fonts are called from the site’s server. @font-face allows users to view additional fonts without having them installed on their local machine. @font-face is a difficult syntax to get right (Figure 1), and small publishers (e.g., bloggers) often have great difficulties finding a place to host fonts. The @font-face code must also be maintained and updated as browsers change.

Figure 1. Sample of “bullet-proof” @font-face syntax.

Figure 1. Sample of “bullet-proof” @font-face syntax.

Today, several services exist that make using web fonts easier. For example, Monotype’s Fonts.com Web Fonts, Webtype, FontDeck, WebINK, Google Web Fonts and other services license and host the fonts for designers/developers and offer quick, easy implementation on sites (Figure 2). The implementation is completed by adding a few snippets of code which are often simpler than the @font-face rule. By offering large libraries and various subscription models, designers are able to include a wide variety of fonts on their websites. TypeKit boasts several big name foundries – Adobe, TypeTogether, Mark Simonson Studio, and many more. Monotype’s webfonts.fonts.com offers thousands of classic Monotype fonts as web fonts. Google Web Fonts relies on open source fonts from a variety of designers including professionals (Steve Matteson) and new type designers like Pablo Impallari. While Google Web Fonts is free to use, TypeKit offers full library access with limited pageviews for $49.99 a year; Monotype and WebINK rely on similar subscription models. WebType uses a pay-per-font model that ranges from $40 to $400 a year depending on traffic; FontDeck also uses a pay-per-font model.

Figure 2. Snippets of code to install the font Arvo through Google Web Fonts.

Figure 2. Snippets of code to install the font Arvo through Google Web Fonts.

Benefits of using web fonts

Web fonts eliminate most of the drawbacks of the commonly used work-arounds, since text remains selectable (cut/copy/paste), searchable (via CTRL-F), accessible, and translatable. Additionally, web fonts are typically smaller in size than images used in work-arounds. Text using web fonts is also indexable by search engines which can improve search engine optimization. With the increasing number of web fonts available, designers are truly free to be creative when designing websites. Through CSS and web fonts, designers are able to carefully control a full range of typographic elements. Web fonts work with the following typographic-related CSS commands:

  • text-decoration
  • font-size
  • font-variant (small cap, etc)
  • text-transform (uppercase, lowercase)
  • font-weight
  • letter-spacing
  • word-spacing
  • line-height

Web fonts for free

Google Web Fonts differ from other web font services, in that users have access to 100% of the available fonts for free. Users of these fonts do not have to create accounts and or be concerned about high pageviews leading to unexpected expenses. The fonts offered through Google Web Fonts are open source meaning they can be used for any purpose (commercial or personal) and can be extended as needed. The Google Web Fonts collection currently contains over 200 fonts! As a curated font collection, the available fonts range in style (sans, sans serif, display, and handwriting) and script (Latin, Cyrillic, Greek, Khmer, and Vietnamese). All of the Google Web Fonts are freely available to download and install on local machines. Google Web Fonts can be integrated into a website in 30 seconds with one line of code in the <head> tag and basic CSS calls for font-family. Users of Blogger, Google Docs, and other Google products can access Google Web Fonts through integrated drop-down font menus. On the technical side, Google Web Fonts handle browser quirks by optimizing web fonts for each browser/platform combination. The web fonts are also cacheable so that once a font is cached in your browser, all pages using it load faster. Finally, the dynamic subsetting feature allows users to choose only the necessary characters to reduce page load time which is excellent for logos and page titles. Google Web Fonts recently launched a fully redesigned user interface (Figure 3) that offers users a three step process for choosing web fonts – Choose, Review, and Use. The three step process was based on months of user research investigating how users think about, select, and interact with fonts.

Figure 3. Google Web Fonts - redesigned version launched in June 2011.

Figure 3. Google Web Fonts – redesigned version launched in June 2011.

Google Web Fonts in action

Below are examples of Google Web Fonts in action.

Smashing Magazine with Droid Sans for headers.

Figure 4. Smashing Magazine with Droid Sans for headers.

The Royal Wedding Album Guest Book uses Homemade Apple for personal messages.

Figure 5. The Royal Wedding Album Guest Book uses Homemade Apple for personal messages.

 Francois One on Google’s Clean Energy Innovation.

Figure 6. Francois One on Google’s Clean Energy Innovation

PBS Special, The Storm that Swept Mexico uses Arvo for navigation elements & call-outs.

Figure 7. PBS Special, The Storm that Swept Mexico uses Arvo for navigation elements & call-outs.

 The Les Paul Doodle uses VT323 for the short URL.

Figure 8. The Les Paul Doodle uses VT323 for the short URL.

 Google Offers uses Open Sans, a web font with 10 styles,for headings and body copy.

Figure 9. Google Offers uses Open Sans, a web font with 10 styles,for headings and body copy.

Lobster is used for the logo and Yanone Kaffeesatz for headers on Reevoo.com Magazine.

Figure 10. Lobster is used for the logo and Yanone Kaffeesatz for headers on Reevoo.com Magazine.

Norad Tracks Santa uses Mountains of Christmas.

Figure 11. Norad Tracks Santa uses Mountains of Christmas.

Google Web Font Facts

  • The web fonts Arimo, Tinos, and Cousine are also the core fonts used in Chrome OS machines.
    • Tinos and Cousine are names of Islands; Arimo is the name of a town in Idaho.
    • Arimo, Tinos, and Cousine are metric compatible to Arial, Times New Roman, & Courier respectively. Since these font pairs have the same spacing and kerning, documents created in either Arial or Arimo will appear the same in length.
  • The most popular Google Web Font is Droid Sans by Steve Matteson of Monotype.
  • The Google Web Font Lobster (rank = #2) was the designer’s first font.
  • A Google engineer, Raph Levien, is the designer of the popular monospaced font, Inconsolata.
  • The font Expletus Sans was designed by a talented 14 year old from the Netherlands.
  • Vernon Adams currently has the most fonts on Google Web Fonts with 32.
Tagged with: , , , , , , ,
Posted in Usability News
Subscribe to SURL

Want to receive notifications when SURL has new articles? Please enter your name and email address to subscribe to our website.

Popular Topics in Usability News
Log in/Sign Up
%d bloggers like this: