fonts.com blog

Web Fonts: The Need to Know Basics

by Bill Davis

As moderator of a recent AIGA Chicago panel, “The New Web Typography,” I was reminded of how many designers and developers are still looking for a quick primer on Web font basics.

If you were one of the 120 designers in attendance, then you heard from the diverse range of panelists about the need to know more about the fundamentals of Web fonts. Our panel of experts – a Web developer, a Web engineer, and a type designer – offered insights into why the basic rules of Web fonts differ from the traditional world of system fonts.

Whether you’re a traditional graphic artist, a Web designer or developer, here are the top three “need to know basics” of Web fonts. For those who would like to see the AIGA Chicago presentation, check out the slide show at  http://www.slideshare.net/Monotype_Imaging/new-web-typography.

Web Fonts presentation at AIGA by Bill Davis

What Web font tips would you add to this list? What questions do you have? E-mail me at Bill@Fonts.com and please let me know.

1. Font Licensing
Can you take your desktop fonts and load them on a Web server?

For Web fonts, you have to secure the rights. For instance, you can’t take a system font and put it up on the Web just because you have the license to the system font. This point was amplified by each of the presenters. Some fonts on your computer may have been installed with an application, such as Adobe® Creative Suite® software. So you have to be careful and check the font licenses to ensure you have the right to use them on the Web.

You will find that there are some system fonts that are not yet Web fonts. The list of new Web fonts grows each day. However, if the font is exclusive to a foundry and not available through resellers, you may need to check with that foundry as to whether and when the Web font version will be available.

2. Font Quality
How do you choose print fonts that will look good on a screen?

Testing. Often designers ask about the best ways to determine font quality. The answer is testing. As you select fonts, you also need to build out Web pages in order to view your font choices on screen and across multiple Web browsers.

Recently we added a browser preview feature to the Fonts.com Web Fonts service. This allows you to see how fonts appear in different browsers, and with different operating system font-rendering settings.

3. Font Selection
How do you show clients different Web fonts during the creative stage of a Web design without having to buy each font?

There are different answers based on the Web font solutions you use. For example, the Fonts.com Web Fonts professional tier entitles you to 50 desktop downloads per month. This gives you the ability to use, play with and test fonts as part of your subscription during the client comp phase. The alternative is to make an investment in the desktop fonts so you can use them not only for Web design comps, but for any kind of print and Web project.


Tags: , , , ,

2 Responses to “Web Fonts: The Need to Know Basics”

  1. Alice Wonder says:

    One thing I quickly learned with web fonts is one has to be careful about bold faces and slant faces. Identify where web browsers will apply fake bolding and italic, and use CSS in those cases to specify a genuine bold or italic web font. The end result looks so much better.

  2. Bill Davis Bill Davis says:

    Thanks Alice, that is a good comment. Yes, it is important to make sure you style CSS properly to make sure you don’t get a fake bold or italic. One of the cool things about the Fonts.com Web font service is the tools we provide to let you create style sheets and “selectors” to make it easy to assign fonts to each desired CSS styles in your project. This can help to avoid issues with fake bold/italics.

Great type makes sites stand out