Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.
By their very nature, designers are creative people. So it should come as no surprise that when faced with font limitations placed upon them by earlier versions of CSS, some pretty inventive workarounds were developed. Understanding these techniques and the reasons for their adoption will provide a better understanding of the current state of online typography. The first thing designers did to make sure they got the font they wanted was to not use fonts at all. They would simply set the type that they wanted in a program like Photoshop, export it out as a web graphic, and use the image tag to place the text in the desired location.
Although for the most part this looked okay visually, well for the most part, this technique has serious problems. Because it relies entirely on images to serve the text, search engines can't index it, which is particularly problematic as this was primarily done to replace headlines. The text is also inaccessible to screen readers and any other means of syndication. If users were browsing with images turned off, as they often did in the early days of the web, the text would never even be seen at all. Definitely not a good solution. In 2004 Shaun Inman, Mike Davidson, and others put the finishing touches on a technique known as sIFR or Scalable Inman Flash Replacement.
As with most text replacement techniques, sIFR is mainly used for headlines in larger passages of text. It just isn't feasible to use it for body copy, plus let's be honest. It's not the easiest thing to set up and use for inexperienced web designers. Following the footsteps of sIFR is Cufon. Cufon allows designers to use a web-based generator to render any font for inclusion on your site. Although similar to sIFR in the regard that it is an image replacement technique, there is a little more going on behind the scenes here that makes Cufon a better overall choice than sIFR.
This makes Cufon a little bit easier to use than sIFR. It's also a good deal faster, renders consistently across browsers, and you can still style your text with CSS. As great as all these things are, it doesn't mean that Cufon isn't without its problems as well. First, your text is not selectable. As it's rendered as VML or within a canvas element, depending upon the rendering engine that you use, as with other replacement techniques, it doesn't work that well with body copy. Now finally, there is still some disagreement as to whether Cufon is allowed within some font licenses, which could be problematic for you as a designer.
Still, if you're dead set on using a replacement technique, Cufon is definitely worth looking into. Finally, I want to mention another less technical image replacement technique. Using CSS, you can hide the contents of an element and then use a background image to replace the contents visually. Although there are variations on this technique it's primarily done by applying a large indent to the text that you want to hide, which moves it visually off the page while still enabling the text for screen readers and other devices.
That's why the adoption of @font-face and the widespread use of web fonts is such an important milestone in the development of the web. Finally, after all these years, we are tantalizingly close to being able to use the fonts we want to use in our sites, all without any tricks, gimmicks, or performance-slowing workarounds like the ones we've seen here.
Find answers to the most frequently asked questions about Web Fonts First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.