Type Talk with Simon Pascal Klein

It’s that time of year again—the time when web developers’ diaries are packed with conferences, BarCamps, and events. Over in Perth, at the edge of the world, the Edge of the Web conference is three days’ worth of presentations, workshops and networking opportunities with some of the Web’s leading lights. I caught up with one of the speakers, Simon Pascal Klein, to chat about his presentation, the state of type on the Web, and some of the work that inspires him.

Edge of the Web is just a few weeks away now. What will we take home from your talk?

A number of things I hope: I want people to feel enthusiastic about web typography—we need to overcome some of the despair that hangs in the air that standards-based web typography is limited, boring, and just plain sucks.

I intend to illustrate that typography is more than just “oh yeah, I’m pickin’ a cool font” by covering some of many standardized and well-supported CSS options available for manipulating text. I also give a rundown on the recent developments in the domain of web fonts that extend the number of typefaces available to us on the Web.

We’re crying out for more available fonts on the Web. We have wider support for @font-face but sometimes it’s no option, given that the fonts we’d like to use are usually licensed in a manner that prevents us from including them that way. What gives?

I honestly am unable to foresee font foundries releasing their business assets for use on the Web in a format that makes it possible to share or download the font with ease. Typekit and the other similar web font hosting and licensing services employ a range of methods that obscure the font data, including splicing up the font so that it’s only pieced together per se in the browser, setting the font data in different formats or encodings, obscuring it with JavaScript, and so on. This is to prevent a savvy web user from viewing the site CSS and accessing the @font-face web font URL to directly download the linked font for use outside the web site.

It’s this copy protection technology that has given rise to web fonts recently, as foundries have had no way previously to make their fonts available on the Web without risking them being downloaded and shared.

I guess that another simple answer in favor of these services is that the range offered by type foundries who’ve created their own web font service, or sublicense them via a system like Typekit, will likely be better than some of the non-professional fonts that you see. Of course, the idea of whether something is better is judged by comparing it to something else—in this case, this is usually the print world.

In print, properties that have defined a quality typeface included good kerning across the entire character set, alternative or extra styles and glyphs, a range of ligatures, and the like. On the Web many of these attributes are less important, or unavailable—for example, advanced OpenType features are unavailable when setting web type. This places professional, print-optimized fonts on a more equal footing with non-professional fonts.

Since we have all these options available to us, it’s fair to say we’ll see an explosion of font use around the Web. How do we avoid being one of those who’s just “pickin’ a cool font?”

I would recommend caution in setting the body of your copy in a web font, regardless of whether it’s a licensed web font from a foundry or a freely licensed font you’ve come across on a font-sharing web site. A good use case for these fonts would be traditionally larger type—so think hero text, headings, call-outs, and the like.

Everyone loves inspiration. Whose work delights you?

The single person that really deserves kudos for placing typography, particularly web typography, back into the limelight is John Boardley of ilovetypography.com. That man merits recognition for reminding many of us that type requires attention.

Here are some of my favorites:

  1. Sushi & Robots, the personal site of Jina Bolton. I love her use of the grid system and am impressed that she’s also applied everything to a common baseline, which is even graphically visible. Use of good grid systems and baselines provide a good sense of rhythm.

  2. Black Estate, the site of Black Estate, a New Zealand-based vineyard. I love how something so beautiful has been created with something so simple: a good, versatile grid and simple font choices (type set in Times New Roman for body text with body headings in the more bulkier Georgia—both web-safe fonts).

  3. Information Architects. The site is simple, clean … above all structured and legible. Again, set predominately in Georgia, which being designed and optimized for screen usage fits snuggly and makes for a good reading experience.

  4. 陳 Jon Tan, Jon Tan’s personal site. With widths set in ems, the page scales perfectly—not to mention his use of various font styles (bold, italic, small capitals) and sturdy grid. Jon’s site is an absolute pleasure to browse.

  5. Subtraction, the site of Khoi Vinh. Khoi’s grid is amazing, and illustrates that with one single, simple font choice (Arial) and a brilliant grid, you can build a beautiful, structured site that’s reminiscent of the Swiss Style. Version 7.x of his site has also been live for a while, but is still definitely worth pointing out, and a reminder of the recognition that grid systems really can translate from the print world to the Web.

Thanks, Pascal!

If you’re visiting Edge of the Web, you’ll catch Pascal’s talk, Beautiful Web Typography, on November 5th. While you’re at it, be sure to check out a presentation from SitePoint’s Kevin Yank, on CSS frameworks, that same morning—it went down a treat at last week’s Web Directions South conference.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.