We spent two intensive days consumed in FontLab carefully shifting points and delicate curves, all the while simply trying to train our eyes. Below is one of my favorite fonts created during the workshop (Italian Job by Brandon Wilson).

Coming from a design/advertising world, the experience was pretty mind-blowing. So many of us are use to the go-go-go pace, the tight deadlines, the last minute changes and the instant gratification. Text type design, while absolutely demanding, seems to operate in different realm where perfection is king, not time. After learning first-hand just how much love, labor and time goes into a single font, it makes your head spin. It takes an infinite amount of patience to perfect each glyph, build upon one another and eventually get to a point where you’re developing 20-something different weights, perfect kerning and interesting ligatures. Talk about months of intense focus.

At the end of the two-day workshop, Veronika shared more about the inner workings of TypeTogether and some of the work she and her partner, José Scaglione have created over the years. They done some beautiful work that’s found its way into several international editorials. Below are a few of my favorite TypeTogether typefaces.

Bree – Typodarium (photo courtesy of TypeTogether)

Ronnia – Transatlántico (photo courtesy of TypeTogether)

Athelas – PNCA (photo courtesy of TypeTogether)

A few examples were presented at SXSWi this year and frankly they’re pretty cool. It’s an odd thing to be able to select and highlight text that sits at an angle with a drop shadow. See for yourself. Below are a few examples of sites using these new techniques.

Created by Alex Girón

Not actually sure who created the Beercamp site. Holler if you know.

Created by Trent Walton

Created by Andy Clarke and Brian Suda for tweetCC

Code examples:

Text Shadow
text shadow: 1px 1px 1px #000; (h-offset y-offset blur #shadow color)
Multiple Columns
column-width: 300px
column-gap: 20px
Rotate
transform: rotate (10deg);

The widespread support of font embedding was a major feat, but it definitely raises the bar for us. Those traditional typography principles that we apply in print design are missing in the bare bones CSS of so many sites (and mine is no exception). It’s becoming harder to blame code and browser limitations for mediocre typography with so many new developments. In fact now that we can set a site in a beautiful font like FF Tisa, the lack of some fundamental type principles almost seems glaring.

So for those of you wanting to tighten up your web typography, The Elements of Typographic Style Applied to the Web is an awesome resource. Robert Bringhurst’s “Typography Bible” has been translated to the web, for web type purposes, one principle at a time which is no small endeavor. Currently, the creators have only beefed out one full principle, Rhythm & Proportion, but there’s a wealth of good information in that alone.

Now if I could just find the time to give my own site a lil type kick in the arse…

An example from The Elements of Typographic Style Applied to the Web

Mozilla released Firefox 3.6 this past Thursday, January 21st which includes a significant feature in terms of web typography improvements. This update now supports a new font format called Web Open Font Format or WOFF. Prior to this release, Firefox only supported TrueType and OpenType fonts. According to John Daggett, a Mozilla contributor, WOFF has two major advantages over TrueType and OpenType:

1. WOFF is compressed meaning you’ll see smaller download sizes compared to the other two font formats. I believe this means FOUT (Flash of Unstyled Text) will occur more quickly.

2. WOFF contains information allowing you to see the font’s origin. This particular feature has helped the new format gain the support of several foundries.

So what does this all mean? The adoption of WOFF will eventually encourage the creation of more web-licensed fonts giving designers and developers greater control over their web typography.

If you’re interested in playing with this new feature, go ahead and update your Firefox and check out this CSS @font-face guide by Tim Brown, the new Type Manager at Typekit. Here’s a great source for 10 free fonts if you’re wanting to just experiment. And if you really want to make you life easy, Font Squirrel is a great tool that will automatically generate your @font-face kit complete with the various font formats requested, a CSS stylesheet and a demo. Pretty sweet! One thing to note, Firefox 3.6 is currently the only browser supporting WOFF so be sure to include the other font formats in your markup.

While the browser announcement was great news, there was a major drawback. Get Your Glyph On, my second favorite SXSWi panel of 2009*, was the first time I was exposed to the legality issues of font linking and the headaches that come with it. Virtually anyone with a little computer know-how can access unprotected, linked fonts, and in turn the type designer’s hard labor goes straight out the door.

So while this summer’s browser announcement was great news, it wasn’t until I caught wind of Typekit that I became really interested in the matter.

Typekit has received a great deal of attention from the design community. They’ve teamed up with some of the best type designers and foundries to create an impressively large and high-quality library. Typekit operates as a subscription-based service which seems to have some major advantages. To clarify, you’re not buying the fonts. You’re buying the right to temporarily use them, and Typekit will host the fonts in order to protect them. The subscription plans give you control over how many fonts you want access to, your monthly bandwidth and the number of websites you’re using their fonts on.

On the other hand, individual foundries are offering web-specific font licenses. Typotheque in The Hague, NL is a great example. Through the foundry’s site, you can purchase a font and select the license most suitable for your needs (web, print or both). In this case, it’s a one-time fee. However, if you purchase a font with a web-license rather than a full-license (both print and web), you don’t receive an installable font – it’s simply hosted by the foundry for your web purposes.

So while things are looking rather positive for web typography, there are still significant obstacles along the way such as dealing with FOUT (when you see a flash of unstyled text while a font loads) and the fact that not all fonts support a wide range of languages. And I have to admit, the designer in me is also a little fearful of stumbling across a webpage set in Papyrus. While there will be a lot of impressive web typography popping up, I’m sure there will be some serious eyesores to come too.

No matter what, it’s an exciting time for those of us who have longed to flex our typography muscles in web design.

Here are a few samples of great web typography with some nontraditional fonts:

*Few things can compete with the David Carson vs. crowdSPRING smackdown.