Make Your Website Fontastic
Drew McDowell, with apologies to the pun
As web standards have matured over the years, few new features have had quite the impact on web design as the ability to choose from and display a limitless number of fonts on your website.
Past limitations in web typography
Web designers used to be constrained to using web-safe fonts. You’re probably familiar with most of them: Arial, Times New Roman, Comic Sans (groan), etc. Web-safe fonts are so-named for their ability to reliably be displayed on all computers, from Macintosh OS 9 to Windows 95. Graphic designers still cringe at the term “web-safe fonts.” That’s because graphic artists have traditionally worked in the print medium, where typography is king. The complexities of typography deserve to be covered in a separate blog article (a point I’ll remember the next time Ellen asks what my blog will be about and I inevitably have that “deer in the headlights” look). I will say that typography lends style, emotion, and even credibility to words. Viewing fantastic ad copy displayed in a tired font is a bit like hearing Shakespeare, as read by Ben Stein. (Where for art thou Bueller?)
Case in point: watch how merely swapping fonts on Red Sage’s homepage reduces its supermodel-good-looks to kindergarten-fingerpainting-sloppiness.
Past Solutions
One way that designers have circumvented this limitation in the past is to create their styled text in Photoshop and embed it in a webpage as an image. While this is still useful when creating certain graphic elements of a webpage, important text should be just that: text. Portable, scalable, selectable, searchable, text. Allow me to expand on these benefits.
A C[SS] change
With the near-universal support of web technologies such as CSS3, web designers can now choose virtually any font for use in web pages as page titles, headers, design elements, and even body text. The design benefits of having this kind of typographical freedom are clear. However there are more benefits to relying on web fonts for text and graphical elements, rather than images.
- Portable (small): Calling upon a number of font families can have a small impact on page load times, however it’s nothing compared to loading dozens of pre-prepared images.
- Scalable: Fonts are vector-based, meaning you can enlarge them without any loss in quality. Images are raster based, meaning they start to blur or look blocky as you enlarge them. This distinction is becoming more important with the onset of high-resolution displays, like the “retina” screens found on iPhones, iPads, and now Macbooks. (For more on vector vs. raster, see Mark’s previous post, Can You Send That in an EPS?).
- Selectable: Visitors can easily highlight text you’ve written in order to copy and paste elsewhere. This is especially helpful in allowing visitors to share particular information via email/social sharing sites, or perhaps copy your contact information into Google Maps or Outlook.
- Searchable: Google can’t read text in images. However, information entered as text can be read, interpreted, and displayed appropriately by all search engines. This means the content you write is more easily discovered by potential customers.
How to Add a Font Flair to Your Website
The first step to adding fonts to your website is to choose which fonts you want to use. It’s important to remember that many fonts such as Helvetica, while seemingly ubiquitous, are in fact license-protected. Thankfully, talented designers worldwide have been creating, open-source, free-to-use fonts. So where do you find these fonts?
The all-knowing, all-seeing, debatably-benevolent overlords at Google have created a repository for free professionally-developed fonts in the form of Google Web Fonts. This is an extremely powerful tool for choosing and implementing fonts into your website. At current count they have 620 font families to choose from, many with additional styles for each family (italics, bold, thin, etc.). You can select fonts based on style, thickness, slant, and width, review your chosen fonts in various sizes, and easily implement them into your new or existing website. Google Web Fonts will walk you through the whole process!
Conclusion
Google Web Fonts isn’t the only way to add fonts to your website, but it’s certainly the easiest I’ve found. And if you need a little inspiration, this page from awwwards.com highlights some of the best fonts Google has to offer. I’ll leave you with an example that I was able to style in a matter of minutes using Google Web Fonts:
Bye!