At Internet Week New York 2013, Jim Webb presented a class called, "Make the Web Beautiful, One Font at a Time." (We invite you to download the slides or watch the entire presentation below.)
For those of you unable to attend the event, here's a quick recap of the Jim's "Big Ideas."
Big Idea #1 — You Can Use Any Typeface
For the first decade or so of the web, if you wanted to use a particular font on your site, you either had to choose from a handful of default fonts (Arial, Georgia, Tahoma, Times New Roman, Trebuchet MS, and Verdana), cross your fingers and hope the site visitor had your chosen fonts installed on their computer, or actually use screen shots (GIFs) of the desired fonts.
Now, thanks to innovations in CSS (@font-face) and services (such as typekit by Adobe and Google Fonts) that allow you to license or use various fonts at no cost, designers have a far freer hand to use whatever fonts they like.
However, Jim cautioned, you have to pay attention to the licensing requirements of each font or you just might get sued!
Big Idea #2 — Your Comps Are Wrong
His main point here was simple: Photoshop lies. That means, no matter how your comps look in Photoshop, you need to test them in various browsers to see exactly how they will render.
Big Idea #3 — Make Your Type Legible
For your words to be effective, people need to be able to actually discern the individual letters and words. If you use a fancy font (nouvelle vague, for example) and it shows up in a low resolution context, it won't just be hard to read, it will be difficult to see.
Thankfully, as Jim pointed out, screen resolution across devices, while falling far short of the 600-1200 DPI you can achieve on the printed page, is steadily increasing. As a result, designers don't necessarily need to sacrifice legibility when they choose to work with more exotic or especially ornate fonts.
Big Idea #4 — Make Your Type Readable
Jim made the distinction between "legibility," which he equated with "identifying letters," and "readability," which he defined as, "a pleasure to read." As it turns out, in addition to technological changes that have increased legibility, there are also a lot of new and emerging ways to make your type more readable.
As he explained, there are a lot of ways to use CSS to control font size, line height, background colors and so on. In addition, there are a number of soon-to-appear capabilities in CSS that will allow people to work with columns, ligatures and, most intriguingly, automatic optimization for legibility.
Finally, on the readability front, Jim showed how you can use Javascript to control kerning, something that simply was not possible until now.
Big Idea #5 - Make Your Type Beautiful
The final point that Jim made was that, given the levels of control over typography that designers now have at their finger tips, they should take full advantage of these new-found powers and use them for good...or at least to make beautiful websites.
One way to do that is to make thoughtful use of fonts to convey appropriate brand messages. Jim emphasized the importance of taking into consideration the "personality" of various typefaces and the sometimes unconscious meanings they can convey. He also encouraged designers to explore what others are doing with type on the web and, where appropriate, steal (or "be inspired by").
Jim also strongly recommended thinking through the many implications and possibilities of responsive design, including the ability to harness the user's web cam to vary font size and weight based on their proximity to the screen!
See for Yourself
We've only given a brief summary of Jim's presentation. If you would like to see it for yourself, watch the video below. If you like what you see, we encourage you to take Jim's free class, "Coding For Designers," which we will launch next month!