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);

Last month I outlined five SXSWi sessions that looked rather promising. And with the conference now just one month away, I’ve highlighted another five for you to add to your schedule. We’re in countdown mode!

1. Is Wordpress Killing Web Design? / Dan Oliver, .net Magazine

Oliver and the panel will debate whether or not CMS tools are hindering creativity in web design. I’m a bit confused by this session’s description because the tool, Wordpress in this case, has little effect on my personal creation process. The work my studio and I produce looks far from template-like. This confusion can be partly attributed to the fact that we focus solely on design rather than design and development saving us from execution fears (up to a certain point). Perhaps in this case ignorance IS bliss. All in all, it should prove to be a great show thanks to an interesting subject matter and a solid line up of panel members.

2. Where the Sidewalk Ends / Iain Coyle

I’m afraid this session might be the equivalent of hanging out in your bookstore’s Self Help section, but it sounds great so who cares. Coyle’s panel has a solid line up as well including designer/illustrator Frank Chimero and Thinking For a Living’s creator, Duane King. The panel will discuss the importance of personal projects – how they help one become a stronger creative and positively influence one’s client work. So if you’re needing a little kick in the pants to remind you of your original passion, the one you had before your clients stomped on it, this panel might motivate you to find it again.

3. Re-Inventing the Wheel: Sketching your own IA Process /
Chris Fahey, Behavior Design

We’ve all been there. You sit down with the research and tools ready to design and feel as though you don’t know where to start. It reminds me of Sidney Harris’s cartoon (below) which reads, “And then a miracle occurs.” So what exactly happens in that “miracle”? And what can we do to insure a “miracle” happens every time? Fahey’s session will shed some light on that process and hopefully help us all avoid those initial moments of panic.

4. Beyond the Desktop / Peter Murholz, Adaptive Path

The public at large quickly familiarized itself with the iPhone and Wii interfaces. So what’s next? Murholz will show us where things are heading with new, unfamiliar interfaces. I’m sure the iPad will make an appearance here and I look forward to hearing Murholz’s perspective on what this means for future products and user interaction.

5. Web Accessibility Gone Wild / Jared Smith, WebAIM

Good intentions, bad results. Smith will shed some light on the accessibility mistakes we’re making, how they’re hurting users, and how to correctly go about web accessibility. He’ll explain what appropriate alternative text looks like, how to make complex images such as graphs accessible, and how to apply accessibility practices to web apps.

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.

One of the best things about living in Austin is having SXSW in your backyard. This city turns into one giant party for a good week with a steady flow of geeks, film buffs, hipsters and free booze. If you fall into the geek crowd like myself, you might be interested in these interactive sessions below which will take place March 12-16. With two months still ahead, SXSW has posted a preliminary list of confirmed panels. I already have a comically long list of ones I’d like to attend, but here are five recommendations to start with:

1. Interactive Infographics / Casey Caplowe, GOOD

The designer in me is drawn to this session – serious eye-candy. GOOD consistently displays beautiful infographics both in their magazine and website. I assume Caplowe will walk us through examples such as these Transparency graphics. Yum. Read the full description.

---

2. Revealing Design Treasures from the Amazon / Jared Spool, User Interface Engineering

If you’re like me and dread holiday shopping, Amazon was probably your one-stop-shop last month. So much for keeping it local. Anyway, Spool will uncover some of the great and not-so-great aspects of this monolithic e-commerce site. It should be an interesting dissection to watch. Read the full description.

---

3. Designing the First Fifteen Minutes / Rob Goodlatte, Facebook

Goodlatte will share some insights in creating a user experience that keeps the user from immediately jumping ship. I’m especially interested in this one due to the SwapYourShop online community I’m collaborating on. Read the full description.

---

4. Fluid Web Typography: Many Types, Many Faces / Jason Cranford Teague, consultant

I was banking on a Get Your Glyph On sequel* but have yet to see it listed. If it doesn’t surface, I won’t be totally and utterly heartbroken thanks to Fluid Web Typography. I’m hoping it touches on new legal solutions for font downloading as I discussed in this post. Read the full description.

---

5. Long Distance UX / Lisa Kamm, Google

Our SwapYourShop team is always interested in learning more about collaboration among global teams, and what better way to learn than from Google? Kamm will share tips and tools on creating a smooth and effective long distance collaboration experience. Read the full description.

*I’m confused by this one. It appears as though Get Your Glyph On 2 is happening due to the web page but perhaps it hasn’t been confirmed because it’s not listed here.

Here are my top three 2009 publications:

1. Designers Don’t Read by Austin Howe

It was the title that first grabbed my attention because admittedly I think it’s somewhat true. Designers are often more stimulated by visuals and less by written words – more eye-candy, less black and white. But if you’re offended, don’t be. Throughout this book, Austin Howe gives designers, specifically smart, strategic designers, a huge pat on the back. Actually, more like a hug. He loves ‘em.

For someone that’s only worked in the design industry, I really appreciate Howe’s unique perspective. He has a great deal of experience in both the advertising and design worlds which affords him a special “bird’s-eye view.” His essays deliver bite-size inspiration and challenges for creative professionals, and by “bite-size” I’m referring to the fact that the beginning of each essay is labeled with how long it will take the average reader to complete it (ex. 2.0 min), kind of brilliant and amusing. His essays touch on a variety of topics ranging from redefining the term “graphic design” to the decline of the advertising art director to criticizing the “decorator” status some designers are boiled down to. It’s a great, easy read and that neon orange is f-ing awesome.

Designers Don’t Read is available here >

2. HTML and CSS Web Standards Solutions – A Web Standardistas’ Approach by Christopher Murphy and Nicklas Persson

For all the interactive designers out there who don’t actually practice XHTML and CSS, this book is meant for you. It’s absolutely wonderful. Calling A Web Standardistas’ Approach a “how to” book seems to undervalue it a bit, but that’s probably the best description – it guides you through each step in setting up a website from start to finish. It’s written in an easy-to-understand style that consistently circles back to earlier, fundamental lessons so you’re never lost as your progress, and each chapter ends with a practical assignment so you can put your new knowledge in action.

More importantly, the book does a fantastic job explaining the importance of web standards (hence the name), accessibility and cross-browser compatibility. Even if you don’t plan on coding much in the future, you’ll be a more informed designer such as understanding Plain Old Semantic HTML (POSH), considering CSS language when fine tuning your web typography and more.

A Web Standardistas’ Approach is available here >

3. The Satorialist by Scott Schuman

This third one is a bit of a wild card but definitely another winner. Whether or not you’re already a fan of Scott Schuman’s blog TheSatorialist.com, I would recommend his book to anyone. Schuman is a highly influential fashion photographer that selectively shoots people he encounters on the streets around the world. His work has been chronicled on the blog since 2005 and now a collection of his photos are available in this book.

In all fairness, I’m naturally drawn to this particular publication because it’s eye-candy, it’s visually beautiful, but more importantly I think it’s a gem in terms of inspiration. In the design industry, it’s easy to get tunnel vision and not consider what’s going on in the broader creative community, but there’s so much more to discover in the other fields (architecture, fashion, music, industrial design, etc.) than there is in opening up last year’s design annual. The Satorialist’s book design is also sporting neon orange. Win.

The Satorialist is available here >

Happy New Year!

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.