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:
- 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. - 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. - 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
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
Press Team|April 8, 2012
Excellent point, Jerrold! The fact that web fonts can be used in place of image text does a lot to help ensure that no vital text will be unavailable to a screen reading program.
Pingback: TYPO SF & Eye: new guest blogs on typography and design - John Moore Williams