Embedding webfonts in CSS with @font-face

Recently I heard Thomas Phinney speak at Google regarding webfonts and the capabilities of OpenType fonts. I learned about an awesome Photoshop plugin to help you incorporate webfonts in your design process as well as the amazing things that OpenType can do like create ligatures based on context.

Designing with web fonts is annoying

After I read Fluid Web Typography, I was eager to begin playing with webfonts. I opened up a bunch of different mockups in Photoshop and began the process of finding font files from foundries or catalogs like FontSquirrel by browsing through pages and pages of possible fonts. Then I would download them, and then I would have to install them. Then I would be able to select them in Photoshop. Repeat x1000. This gets so annoying- especially since font selection is oftentimes an immediate reaction: “no” / “yes” / “no” / “YES!”

Many webfonts cost money- so do you really want to pay for them just to test them out in your Photoshop comp?? No. This immediately limited my usage of webfonts in client work, and they became reserved for my own personal projects, when I had time to play around.

Thomas Phinney introduced a Photoshop Webfont plugin that really helps with this problem. It’s essentially a font viewer in Photoshop that has Google web fonts and free fonts from WebINK. By clicking on a font, it will download and install and then be instantly available for you to test in your mockup. It brings a whole copy of the font locally to your machine to use... and it’s free!! The catch is that you’ll need CS5 and older versions of Photoshop won’t work. Also, for the non-open source or free fonts, the liscence is limited to designing in Photoshop with, so you’d still have to buy the font to use on the web.

The exciting possibilities of OpenType thanks to features

The OpenType format was invented by Microsoft and Adobe. I never realized it was more than just a font file format you need to embed in stylesheets to get webfonts working in Internet Explorer.

What makes OpenType stand out is that these fonts can have “features.” Think about them as fonts that are responsive to when glyphs should be drawn differently based on their context. This capability is embedded in the font file itself. A good example of this is ligatures. A ligature is when two separate glyphs are joined together when they appear next to one another, for example “th” and “fi”. Ligatures happen in normal English language writing, whether it be for speed/convenience (think of writing in cursive) or for stylistic reasons. An OpenType font can be smart enough to know that when these sets of glyphs appear next to one another, they should be joined with a ligature. As Thomas pointed out in his talk, ligatures are a nice stylistic bonus when writing in English, but as my friend Alicia the Arabic major can tell you, ligatures are not stylistic in a language like Arabic- they are essential to conveying meaning. Other features of OpenType include adjusting spacing between uppercase glyphs, writing certain combinations of glyphs in small-caps, ex: “AM” or “PM”, or having multiple versions of a single character (a typography term called swash).

The crazier, experimental side of OpenType

Amy Papaelias' OpenType font Shy Slacker in action

As part of his talk, Thomas showed us some OpenType fonts that really show off how powerful OpenType features can be. I was very impressed by the font designs of Amy Papaelias who has created typefaces like “Francophile” and “Cranky Little Kid.”

I volunteered to come up to the podium and type out words using these fonts, and the experience was quite surprising. These fonts use OpenType to fully replace groups of gylyphs, resulting in amusing and humerous sentences. You can actually try this for yourself on Papaelias’ thesis website, which works with Flash and not actual OpenType features, however the effect is the same.

OpenType and the future of web typography

OpenType is really expanding the possibilities of type on the Internet and computers overall, and I’m really excited to see where it takes designers in the coming years. Thomas Phinney mentioned the idea that one day data charts could be composed of the underlying data itself and rendered as a font. It’s definitely the future, but after playing around with some of Amy Papaelias’ fonts which seem to just have a mind of their own, the future seems nearer and nearer.

Helpful links

I've compiled a list of links about OpenType and themes I've talked about in this article. Check these out if you're interested in learning more.

• Ligatures (typography)
• Swashes (typography)
• Resources for web typography from WebINK (very helpful stuff here)
• TypeCon, a conference for people obsessed with typography
• Thomas Phinney’s website
• A cool OpenType font Phinney created, Hypatia
• Amy Papaelias’ website
• Adobe on OpenType
• An Adobe blog post on OpenType coming to the web