TypeTalk: What Are Web Fonts?

TypeTalk is a regular blog on typography. Post your questions and comments by clicking on the Comments icon above.

Q. I’ve been hearing a lot about Web fonts but don’t understand what they are. Can you explain?

A. In the past, the only way Web designers could be sure text would display in the fonts the designers intended was to limit themselves to fonts that are shared by Mac and PC operating systems. That small list was known as “Web-safe fonts.” If you wanted to venture beyond Web-safe fonts, you could rasterize type and display it as an image, but that came with its own drawbacks.

Then the CSS @font-face rule was created. When a web designer specifies fonts using @font-face, those fonts don’t need to be installed on a site visitor’s computer; instead, the Web browser temporarily downloads the fonts and uses them to display text.

While the CSS @font-face rule has been around for a while, it’s come into its own recently because of the rise of several Web font services. These companies store fonts on servers, and anyone’s website can access and automatically download those fonts, which are optimized for onscreen display.

Most of these Web font services are subscription-based, with different tiers of service for different budgets and needs. The majority require that you add a special code to your site, but they instruct you on how to do so.

For designers and clients alike, this means greatly expanded creative and typographic freedom, plus text that’s searchable, editable, and faster loading than rasterized type.

Click the screenshots below to visit typographically exciting websites that use Web fonts:

Some of the major supplies of Web type follow:

And more are on the horizon.

To experience the power of Web fonts without getting into licensing and coding, check out FontShop’s Font Fonter, where in a matter of seconds you can see what a site looks like with a Web font. Read more on the technical details of the new Web font technology in the articles “Expand Your Web Design Font Choices, Part 1” and “Expand Your Web Design Font Choices, Part 2”.

Love type? Want to know more? Ilene Strizver conducts her acclaimed Gourmet Typography workshops internationally. For more information on attending one or bringing it to your company, organization, or school, go to her site, call The Type Studio at 203-227-5929, or email Ilene at info@thetypestudio.com. Sign up for her e-newsletter at www.thetypestudio.com.

 

Tags
Posted on: October 13, 2010

Ilene Strizver

Ilene Strizver, founder of The Type Studio, is a typographic consultant, designer, writer and educator specializing in all aspects of visual communication, from the aesthetic to the technical. Her book, Type Rules! The designer’s guide to professional typography, 4th edition, has received numerous accolades from the type and design community.

3 Comments on TypeTalk: What Are Web Fonts?

  1. Everything the communication industry saved by dumping print is now costing more. And here’s another! All that paper and power you thought you were saving? Think about how much electricity it takes to cool a server farm to power the internet … and that power has to be on constantly. The type people have discovered recurring revenue. Inflation hits the internet world.

  2. Love the idea, but it seems that it hasn’t been perfected yet – when I click on the beautiful MOON website in Safari it renders as:

    MOO
    N

    and Firefox substitutes a different font.

  3. If you look at these sites on the iPad or iPhone the fonts don’t display correctly at all and the sites completely fall apart. So why go to all the trouble and expense of designing something that doesn’t work on mobile devices?

Leave a comment

Your email address will not be published.


*