Photo Credit: Amber Gregory

So, how exactly does a wider range of fonts constitute a renaissance?

There are a host of reasons:

• First, it allows designers to achieve things that were impossible without using images, Flash, or image replacement techniques such as Cufon. That means that a whole new range of possibilities for interacting with, commenting on, and extending the idioms, techniques, and methods of older design traditions, such as print typography, has opened up.
• It allows organizations and businesses to really utilize one of the most valuable of branding elements: brand fonts.
• It creates text that once would have to be an image both selectable, indexable, and searchable, making search engine’s task of finding the content a user wants much easier.
• It’s also easier to edit and update, since the designer doesn’t have to fire up Photoshop to create a text-image.
• It makes available new methods of establishing hierarchy through extended ranges of weights and other tactics.
• And, most importantly, it improves the user’s reading experience.

@font-face basics

Next, Shaun dove right into the @font-face spec. (Pointing out along the way that Internet Explorer, of all the browsers, has supported the spec the longest—ever since version 4 or 5, in fact.)

Most simply expressed, designers implement web fonts by first establishing the parameters of the spec, and then telling the appropriate HTML elements, classes, and IDs to use the font defined with @font-face. It looks something like this:

@font-face {
font-family: 'Your Font';
src: url ('yourfont.woff')
}

h1 {
font-family: 'Your Font';
}

Adding in whatever other style choices you want to. So, designers, companies, and organizations could easily self-host their fonts.

Of course, Sean noted immediately, it’s not quite that easy.

Why use a web hosting service?

Well, web hosting services exist because it’s definitely not as easy as the above suggests. At least three difficulties crop up:

1. Licensing
   Most usage licenses for fonts have been solely for desktop usage, not web usage, so using the font on the web would violate the terms of use. And one reason for that is that it would be possible for people viewing a page to download a self-hosted font straight from your site. Not good for foundries.
2. Formats
   Another issue is that the various browsers require different file formats for web fonts. In fact, four font file types are available and to this day designers have to write their @font-face syntax in order to trick certain browsers (looking at you, Internet Explorer) into serving the right format, and not getting confused by the others.
3. Rendering
   Things get a little more complex here, but to sum it all up: it’s pretty difficult to serve something that consists of a bunch of mathematically generated curves with a bunch of tiny squares and still make it look nice.

So, web font hosting services can be pretty nice since they handle all those problems for you. Convenient.

Sean McBride

Sean is an engineer and product designer working at Adobe on Typekit in San Francisco. He joined Typekit in July 2010, where he has worked on improving browsing for fonts on the site, using fonts with third-party tools, and optimizing the delivery of fonts to browsers. He's happiest looking for opportunities at the intersection between user experience constraints and technical constraints. Before Typekit, Sean worked at Google in Mountain View as a user experience designer and web developer. He built prototypes for the Google Apps control panel, in-product help, Buzz, and finally Google+. He enjoys exploring San Francisco restaurants and cocktails.

Speaker page

What @font-face makes possible (and how to do it)

To close up, Sean showed us a fantastic piece of web typography, and then ran quickly through how he did it. If you want to see how to produce similar results, you can check out the source code here. This post on the Typekit blog offers even more guidance on this type of work.

posted by John Moore Williams