Archive for May, 2010

by Chris Roberts

Last week, the latest and arguably most sensational “Web font” development to date was announced. Google unveiled Google Font Directory and Google Font API. Web design and font junkies around the world have lit up Twitter for days with speculation about what it means for Web fonts and the font industry. So, what does this all mean?

What are “Web fonts”?

Briefly, the term “Web fonts” has become shorthand to reference the ability of a Web designer to use virtually any font to display real text on a Web site. This is in contrast to the use of “Web safe fonts”, which are the cross section of “system fonts” that can be relied upon to be resident across Microsoft and Apple operating systems. Web fonts are also contrasted to the use of static images to represent text. Web fonts are real fonts, not images. They are downloaded to the Web site visitor’s PC, much like images or video, and then are used to render real text to the screen via the visitor’s browser. There’s a long history behind all of this, which has been documented many times over by others. Rather than dwell on the history, I’m more interested in exploring the future implications.

What has been announced by Google is an open source font selection and Web font API. The font selection part is pretty straightforward and easy to understand. It’s currently 18 Google hosted open source fonts that can be used for free as Web fonts. This selection is likely to grow as more people contribute open source fonts to the directory. The API needs a bit more explaining. It leverages previously available open source code for making Web fonts work across browsers supporting @font-face. With this code, you can use the 18 open source fonts from the Google Font Directory, or you can theoretically load fonts from other services, like Web Fonts. Google’s API provides a convenient and common way to reference @font-face code, and related commands and events. If you wish to move beyond the 18 open source fonts, it requires some knowledge of JavaScript, and access to properly licensed, formatted and hosted fonts. But for those “do it yourself” capable coders, it represents a nice flexible API that is likely to improve over time. Others have dissected the nuts and bolts of this, so I won’t repeat what has already been documented. In general, I see two significant functions: 1) an aggregation of open source Web fonts; and 2) a central repository for the “do it yourself” means of Web font implementation.

The means: What’s behind that light switch?
First, let’s look at the means of Web font implementation. This area has been fascinating to watch over the past 12 month. It seems like every month a new Web font service has been announced, including our own Web Fonts, and now we have Google in the mix. While these various sites and services approach the “means of Web font implementation” in a variety of different ways, they all address it out of common necessity as a way of unlocking the real value…the display of text in the designers choice of font. After all, what Web designers really wants is to see the fonts displayed on their Web sites. They don’t care so much how the fonts get there, as long as it happens fast, is dependable and looks good. It’s kind of like electricity. You want to turn on a lamp and see light. You don’t really care what is required to deliver electricity to the lamp. The means of delivery are a necessary evil to achieve the desired outcome of getting your lamp to work. Same is true of Web fonts. The Web font service or API, in this case the means of delivery, is just a necessary evil to achieve the desired outcome of getting your fonts to display.

If the steady drum beat of one Web font service announcement after another didn’t convince us that the means of Web font implementation were rapidly becoming a commodity, then Google’s announcement last week should remove all doubt. This is not rocket science folks. It’s becoming easier and easier to implement Web fonts on your Website. You have a choice of several easy to use hosted services, or you can “do it yourself” if you have the chops. So…why should anyone pay for Web fonts?

The ends: Not all lamps are equal
Web fonts are like most any other product category you can think of. There is a wide range of quality. To carry the electricity analogy forward, you can find a table lamp for free on the side of the road or you can pay hundreds of dollars for a table lamp at a high end lighting gallery. They are not the same lamp. They both use electricity and deliver light, but for most good interior designers, that’s not the total objective. There are thousands of free fonts available on the Web, there have been for years. So, with all these free fonts floating around the Web, why hasn’t the commercial font industry crumbled? Think of it like this, all design is not of equal value. Same is true of fonts. So, to the extent that greater accessibility to open source Web fonts leads to broader market adoption of Web fonts across the Web, I think it’s very good news for premium quality Web font providers. The market for premium quality Web font is growing, not shrinking. The quality bar for web design has just been raised.

So what do I think Google Font Directory and API means for Web fonts, and the font industry? I think a new market is emerging before our eyes, and it just got a very big push from our friends in Mountain View. In the end, what matters most is not how the font gets delivered, or what stack of code is used to make it all work, or even how many free fonts there are on the web. What matters is what your Web fonts looks like to your Web site’s visitors. Do they support your brand? If so, your visitors will feel comfortable and secure. If not, they may wonder if they are is the right place. Is the text legible and pleasing to their eyes? If so, your visitors will engage more deeply with your content and message. If not, they may leave your site for greener pastures. These are not really new considerations. Print designers have been making these assessments and resulting font purchasing decisions for decades. From the printing press, to desktop publishing, and now to Web publishing…the highest quality fonts have always been demanded by the design professionals who serve organizations that care about brand identity and image. Greater accessibility to the means of Web font implementation will lead to wider market adoption. Wider market adoption of Web fonts creates a larger market for premium quality Web fonts. Most importantly, the Web becomes more interesting and beautiful.

by Allan Haley

Typographic clarity comes in two flavors: legibility and readability. Legibility is a function of typeface design. It’s an informal measure of how easy it is to distinguish one letter from another in a particular typeface. Readability, on the other hand, is dependent upon how the typeface is used. Readability is about typography. It is a gauge of how easily words, phrases and blocks of copy can be read. It is therefore possible to take a very legible typeface and render it unreadable through poor typographic arrangement.

Generally, the most legible typefaces are those which offer big features and have restrained design characteristics. While these attributes may seem contradictory, actually they are not. “Big features” refers to things like large, open counters, ample lowercase x-heights, and character shapes that are obvious and easy to recognize. The most legible typefaces are also restrained, in that they are not excessively light or bold; their weight changes within characters are subtle; and if serifs are present, they are not overly elongated, very thin, nor extremely heavy. The Ysobel™, ITC Stone® Sans II, Egyptian Slate™, Malabar™ and Felbridge™ typefaces are great examples of legibility designs.

While not all typefaces should be designed to be paragons of legibility, those that are intended to be used for text or lengthy display composition should be the ones designers choose. Save the Eccentric™ and Frances Uncial™ of the world for three or four-word headlines.

Allan Haley
Allan Haley is Director of Words & Letters at Monotype Imaging. Here he is responsible for strategic planning and creative implementation of just about everything related to typeface designs.

by Chris Roberts

by admin

by Steve Lee

We are very excited to introduce Web Fonts – a service you can try for free as of today. We have been working hard to design a service that will allow Web designers to focus on the design of their sites and spend less time contending with workflow complications and design compromises. The disadvantages of displaying text in graphics or other technologies are numerous and have frustrated designers since the early days of the Web. One must invest in and learn how to use image processing software, learn how or work with IT to host these images, and create a process for managing and updating these assets. At the end of this lengthy process, the designer is left with a Web site with text that is difficult for visitors and search engines to access.

Now we can have the best of both worlds. We are no longer confined to handful of ‘Web safe’ fonts – and the text on our site remains just the way we want it: scalable, search engine friendly and easy to edit. Our service puts thousands of fonts at your fingertips. The workflow is intuitive. Select the fonts you like, assign them to CSS selectors and add one line of code to your HTML page. You can change the fonts anytime, without touching the code again. I’ve enjoyed demonstrating this for others. They seem to have an epiphany when the fonts change before their eyes.

Here I will try to show you how you can use a free Web Fonts account to use Web fonts a Web page. In this case, I’m using my blog on

After logging in to, I create a project named ‘blog.’ Next, I add the domain of my site: to it so our service knows where to serve the fonts.

I add some fonts to my project which I then need to associate with the CSS Selectors used in my blog. If you’re not already familiar with CSS selector tags, this article may be helpful. To find out what selectors are used in my blog, I open the ‘Template’ of the blog and I can see that H1, H2, H3 and some other common tags were used. So I add the names of these selectors to my project on the ‘Work on style sheet’ tab. Next, I assign the fonts that I wanted to use to each selectors and click on ‘Save changes and update style sheet’. (Figure 1)

Figure 1

To allow Web Fonts to serve fonts to my blog, I need to paste just one line of code into my HTML. The line of code can be found on the ‘Publish’ tab. I copy the code (Figure 2)

Figure 2

and paste into the blog template right after the <body> tag (Figure 3)

Figure 3

and save the template by clicking “SAVE TEMPLATE CHANGES.” That’s it. The fonts I chose were selected to show a dramatic difference (see figures 4 and 5). In real life, you’ll want to leverage your typographic expertise and design consideration when picking fonts.

Figure 4

Figure 5

If you want to add more or change your Web fonts simply add additional fonts to your project and change the fonts assigned to your selectors. Save the project again and you’re done.

We look forward to your feedback on our service. I believe this is just the beginning of a small revolution. Today the first Web sites are using Web fonts. Tomorrow, we expect to see this technology in consumer electronic devices and beyond.

Great type makes sites stand out