This subject matter is far from new, but quality typography on the web is such an important issue that it deserves attention. There many resources and tutorials out there, but I rarely come across a top-level view of all the typography-related techniques. Therefore, I’ve compiled a roundup of the most popular methods for rendering high-quality typography on the screen.

Images

using images for custom typography doesn’t necessarily have a negative impact on a site’s performance and search engine optimization. If file size is carefully considered, and the proper alt text is used, typographic images can be a good solution. Of course, this technique should only be used for short bits of text, like page headings, pull quotes, and drop caps. I will argue that there are better options available today, but at the end of the day, images are a perfectly valid option.

Flash

The value of embedding fonts in your SWF files cannot be overlooked. Although it would be considered bad practice to utilize flash for only this purpose, if Flash is going to be used anyways, one of it’s major benefits is the cross-browser pixel perfection and ability to embed dynamic type.

Web Safe Fonts & the Font Matrix

The list of “web-safe” fonts is very limited. Normally, most web designers don’t stray too far away from Helvetica, Verdana, and Georgia. This list from 24 Ways helps expand that list to fonts that are common across many computers, operating systems, and installed software. Used correctly in font stacks, developers can target most computers that have software like Office and Creative Suite. Check out the list, you might be surprised by how many fonts are available.

sIFR

It’s worth mentioning sIFR here, although many developers have abandoned this technology in favor of Cufon, which I will talk about later. sIFR (which stands for Scalable Inman Flash Replacement) is a flash replacement technology. The philosophy here is creating the ability to bring rich typography to web pages without compromising accessibility or semantics. Additionally, one of the great advantages of sIFR was it’s fallback to plain text if Flash is not supported. Although it’s been criticized as hard to implement and somewhat buggy, this was the first real jump forward for web typography, and is still very popular to this day. sIFR laid the foundation for many great resources for custom web typography.

Cufon

The best way to describe Cufon is a next generation sIFR which is built with Javascript rather than Flash. This method has it’s benefits like not requiring the Flash plugin – good news for Apple devices. It’s also extremely easy to implement, and has very good performance, even for large amounts of text. You upload font files (with the proper licensing) through the Cufon site, and convert’s the file to SVG format. Then, the SVG file is converted to JSON which can be added to your site through simple Javascript. One downside to using Cufon is that many custom font licenses do not permit usage on web pages, so check the license or use a great free or open source typeface. There are many good ones out there.

If you’re looking for some high quality free fonts, Smashing Magazine is a great place to start your search.

Font-Face

This is by far the easiest method to integrate custom typography on the web. Using the @font-face property allows you to access fonts via CSS, and host the files on your web server. Of course, the same licensing issues remain, so make sure to chose a good typeface with no constraints. From there, you can use @font-face to access that font file for use with any CSS property. Add the font name on the top of your font stacks, and that’s it. There are a few hoops to jump through, mainly to accommodate Internet Explorer. IE requires a .eot file (Embed-able Open Type) to render custom fonts. Luckily, there are a few good online converters that will take common font files (.ttf and .oft) and convert the fonts to .eot. On a side note, I wrote a recent blog post about getting @font-face to work correctly in all major browsers.

TypeKit

TypeKit aims to take all of the hassle out of setting up @font-face, and they do a killer job at it. For as little as $25 per year, you can use fully-licensed fonts which are hosted on TypeKit. All of the licensing issues as well as the compatability woes are taken care of, and in turn you get an incredibly easy-to-use and extremely large font library at your fingertips. It’s definitely work a second look.

Google Font API & Font Directory (beta)

In the same veins as TypeKit, Google recently introduced their font API and font directory. Google hosts fonts that are licensed and ready to go, you just have to target these fonts on your site, and Google will do the rest. Their library is currently very conservative, but hopefully this will grow in the near future.

Here at BKWLD we like to keep things such as our everyday work flow and culture as transparent as possible. I thought it would be a fun idea for everyone whom wanted to take part to list their top 5 or so most used apps.

Some of the apps listed are pretty standard and some not so much. We are always interested in exploring new apps so, please recommend away!

Jeff Toll – Creative Director

Photoshop - “Open and running every day, all day.”
TextEdit – “I get grief for using this but it’s lightweight and simple, simple, simple. I’ll start using a more robust text editor sometime soon. I use it for writing quick storyboards and concept explanation etc. ʻPagesʼ is upon the horizon…”
xScope- “Covers my ass for screen resolution guides at the very least.”
iChat- “Communicating with our Seattle office and random jackasses.”
iCal -“I’ve been getting better and better with my organization.

Robert Reinhard- CTO & Partner

Pages - “I haven’t touched MS Word in over 2 years and haven’t looked back. I love how it handles styles, it’s like easy CSS in a word processor.”
OmniOutliner - “For taking notes on conference calls.”
MAMP Pro - “Powers My LAMP dev environment. Makes it easy to setup additional testing vhosts (test dev rather than local host).”
TextMate – “When is 2.0 gonna come out?! I’ve been flirting with switching to Coda, but I miss some of the hotkeys.”
Socialite -“Aggregates feeds from Facebook, Twitter, Google Reader, and Digg all in one place, plus allows me to post comments/tweets.”

Scott Thiessen – Flash Developer

Safari -“The Activity Window and Web Inspector alone are enough to make me feel like the king of the Internet.”
TextMate - “Lots of power for so little toolbar.”
Sequel Pro – “This is phpMyAdmin’s gorgeous, sophisticated sister. Unbelievable that this app is free!”
Spot Color + Developer Color Picker - “Slick way to grab colors from the screen, tweak them in your favorite gamut, and spit out hexadecimals.”
Quick Look - “Not really a stand-alone app, but I’ve definitely forgotten what it’s like to use a computer without it.”

Matt Aebersold – Flash Developer

Flash + AS3 - “Although thereʼs a steep learning curve, learning object-oriented AS3 has opened up so many doors, and is such an intricate and expansive programming language. Itʼs allowed me to create some kick-ass web designs.”
Coda – “Once a site project is completely set up, the complete integration is incredible, and so intuitive. Once I made the switch I’ve never looked back.”
MAMP - “Helped me do PHP dev on my local machine. Extremely helpful in every way.”
Things - “Awesome to-do app. Easy to set up and manage. So simple, and It’s what’s not included that makes it great. plus syncing over dropbox has make this invaluable. That said…”
DropBox – “Awesome cloud storage. If I point my apps there, than they sync on all my computers (iTunes, Things, etc…). Plus online file recovery is very easy.”

Sean Monahan – Flex Developer

Eclipse w/Flash Builder 4 Plugin - “Paraphrasing a Josh Reddin-ism, ʻItʼs a text editor for fully grown men.ʼ Upgraded from Flex Builder 3 stand alone and my opinion of Eclipse has greatly increased. Eclipse also has plugins for PHP dev, Unfuddle (our ticket tracking software) and Ant (for oneclick builds)- all this allows for a one-step development environment for Elastic.
Calculator -  “Boring, I know, but good for doing quick math. I use this a lot when programming Uls. Bonus: it has a “programmer” view for doing fancy binary math.”
Last.fm – “I like its music picks better than Pandora and the artist bios and photo streams are freaking sweet.”
Photoshop – “What doesnʼt it do?”
Adium - “A slick IM client that supports just about every IM service in existence.”

Aaron Egaas – Web Applications Lead

Chromium - “Browser of choice, nightly version of web inspector is as good as firebug without the performance hit.”
TextMate - “Code keeps me paid, and TextMate keeps me sane.”
iChat - “Remote communication, PM requests.”
MailPlane - “Multiple Gmail accounts? Like to keep ‘em separate? Notifications? Native web app feel with label and everything? Gets me into GCal, too.”
Terminal - “I gotta ssh into servers to push code, so I use some sweet aliases to keep it all organized.”

Dave Brown – Senior Interactive Producer

Adium
OmniOutliner - “Great for taking notes.”
FontLab Studio - “Converting fonts.”
Justinmind Prototyper - “Havenʼt really used this yet, but Iʼve heard great things.”
Adobe Media Player - “Checking/watching native flv.”

George Plendl – Front End Developer

Linkinus - “Best IRC client for a mac. irc.freenode.net, #jquery is a great place to learn and ask questions.”
Alfred - “Quicklaunch application for which aims to save you time in searching your local computer and the web. Replaced ancient Quicksilver app!”
Snippley - “Basic text and organization app.”
Beyond Compare - “Easily compare files, folders, images, anything. Itʼs great!”
TextMate - “The best text editor for Mac and a powerful abbreviation engine for HTML and CSS. Saves hours!”

Shelby White – Design Intern

DropBox - “Best app for managing projects between projects. I also use it for freelance in getting assets.”
Adium/iChat - “Adium manages contacts better but iChat actually sends files.”
Coda - “My favorite app with FTP for html/css.”
Wordpress - “ Where I’ve spent most of my last year and a half.”
TweetDeck - “Nice for managing my tweets…”

Joe Leoni – Producer

TweetDeck - “Best way to stay informed of Chad Ochocincoʼs daily workouts or Snoop Doggʼs ʻbreakfast activitiesʼ.”
iChat - “Instant messaging: extreme convenience and extreme inconvenience all wrapped up into one.”
Garageband - “Now anyone can be a MC, and youʼll probably be better than 99% of radio hip-hop.”
Pages - “Iʼd rather be using Word, but close enough.”
Solitaire - “The best way to play with yourself.”

Veronica Skarshaug – Administrative Assistant

Stickies - “Nice way to save on physical sticky pads, and info that I need on a daily basis is easily accessible.”
TaskMate - “Great for keeping my to-do’s in order.”
Numbers - “I like to make spreadsheets, I’m a total nerd.”
Preview - “Makes things easy, easy, lemon squeezy.”
iChat - “Because, duh.”

The Hit List – “Awesome and free GTD app to keep my days/life organized.”
Transmit – “Gorgeous UI and experience to easily upload my files.”
Adium – “My favorite chat client especially when used with the iPhone message style.”
Cicero – “Dashboard widget that fulfills my Lorem Ipsum needs. Used and abused daily.”
Photoshop – “There is a light on under this icon all day. Content aware fill has come in handy on more than 1 occasion.”

There are so many arguments happening now about this technology and that development language. The battle for supremacy has led to some fairly bad blood between some amazing companies. Listening to the recent debates between Adobe and Apple about flash on the iPad and iPhone has got me thinking. It seems like no matter what, there will be a problem and a battle until we as designers and developers get our heads in the right place.

This is because the debate is centered around technologies and programming languages. This strife is very prevalent in all areas of the web design industry. Should you use Flash or Javascript for that slideshow? Should we connect to this MySQL database, or this SQL server over here? .NET or PHP? There are some very opinionated groups, which is too bad because all of these technologies are amazing in their own right.

At the core of every project is an idea, and that is by far the most important thing to consider. Once the creative idea has been set, realizing that idea can happen any number of unique and innovative ways.

When figuring out how to produce the project, it’s all about what technology is best suited for the design. How much interactivity will it have? Of course you’re not going to utilize Flash for a site that is just plain, static text, and you’re not going to link up to a database when your site consists of two pages.

After these things have been sorted out, then pick the technology that you are most comfortable and efficient with. For example, I work really well in Flash and Actionscript. I am very comfortable with the language, and it comes naturally to me. That doesn’t mean that Flash should be used for everything, but in at the end of the day it’s all about the idea being produced, —not what technology was used to make it. If you need a slideshow, it can be written in Javascript, Flash, or hell even Lingo, as long as you end up with a killer slideshow.

It’s also not about the newest technology; it’s it’s about the best technology. My old college instructor is a professional type designer for a 1st-class graphic design agency. She stands by Freehand as the best tool out there for type and letterform design. It’s not a new program by any measure, but it works for her, and she produces some incredible work.

So we need to relax about the technology debates, and focus on making kick- ass designs, and have fun doing it.

SODA's Click 2009 - 10/01/2009

This past thursday (10/1/09) our creative directors, Jeff Toll and Demetre Agres and I had the pleasure of attending the Click 2009 SODA event at the Art Directors Club in NYC.  There we got to hear from amazing boutiques like Unit9 (particularly loved them), Syrup, and Poke, as well as from some of the agency juggernauts like Goodby, CP+B, JWT, and Ogilvy, all introduced and hosted by the after-hearing-him-talk-I-truly-get-why-he’s-such-a-likable-force-in-the-industry Michael Lebowitz (which I am pretty sure I learned is “lEbowitz, not lEEBowitz) from the infamous Big Spaceship.

The topic and discussion points varied from more granular subjects like “Branding with numbers” (which I found surprisingly intriguing) to more general monsters like “What is the future of entertainment”.

First off I have to say what a pleasure it is to hear from such talent in one room, on one day, and in person.  I mean Jason Zada, Lebowitz, and Mike Geiger to name a few…truly a pleasure.

Of all the nuggets of wisdom I can take away from the discussions, what is interesting to me is that despite agency head-counts, annual billings, specific focus, country of origin, or AOR vs. project-based orientation, we are all facing similar issues; digital agencies finding their autonomy from the traditional ones, an ever-changing set of tools, an even more-changing option of techniques and services we have the option to render should we decide to, and a myriad of ways we can manage the whole damn thing.  But here in-lies the beauty, though facing the same obstacles and issues, the lot of us are choosing completely different approaches to the hurdles, and its working.

We have the luxury of working in an industry that is defining itself each day, and that works for me.  After all, what are we if we are not problem solvers?  At the end of the day we are simply choosing what tool we want to solve the problem with.  So I welcome and embrace the luxury of being able to re-define, re-shape, and re-focus. What fun it is after all.

So after a wonderful day with our peers, and a couple others enjoying an amazing city with good colleagues and friends, I am glad our industry is a kid.  It has many options, and oh so much potential.  Im not sure if its the couple cups of coffee, or the Where the Wild Things Are soundtrack I am listening to as I type this, but I love this kid and want what’s best for him too.  So let’s keep talking.

Art Directors Club NYC

Woohoo! Our friends over at CampaignMonitor have featured the latest Bkwld Newsletter in their gallery of well designed email campaigns. Take a look at some of the other inspiring designs or better yet, signup for our newsletter.

I don’t often batch import layered files (PSD, PNG) into Flash or even copy graphics into it.  But what I DO find really handy is copying text between the apps.  This worked in CS3 but it’s gotten better (more accurate) in CS4.  You can copy a whole group in and the font, size, and color are all maintained (or close enough, you usually have to nudge line height).  This saves tons of time when you’re populating a whole FLA from a text heavy design while keeping the text editable for the inevitable copy change.  Notice in this video how I can bring in multiple text boxes at a time.

I love Photoshop. Okay, now that’s out of the way I can tell you about why I think every other web designer should consider checking out Adobe Fireworks for their next project. I realize this may be a touchy subject and that everyone is quite comfortable at the point using Photoshop and sometimes even Illustrator for web layouts. However, Fireworks is truly made for just this.

The first thing you’ll notice about Fireworks vs Photoshop is it’s ability to work with vector objects much better than Photoshop. I find this to be one of the biggest and best differences for me. This is extremely helpful when rapid prototyping projects and putting together wireframes.

I also love how Fireworks handles gradients over Photoshop. Giving you a simple handle to modify the direction and length of your gradients over the Photoshop guess and check method.

Another big deal for me is the Pages and States panels. When working on a large site it’s easy to get lost in Layers and constantly turning things on and off. With Pages you can easily setup a global layer that handles consistent elements like a primary nav, and then have a clean set of layers for each section of the site. I also find this functionality extremely helpful when brainstorming concepts and saving constant iterations through out the design process.

Another one of Fireworks big strengths is that it works very seamless into the Flash production workflow. You can copy a vector object from Fireworks and paste into Flash while retaining the vector object without having to create a bitmap, one of the first thing to wow our developers when introducing them to Fireworks for the first time.

Over the next few weeks I’ll be posting some of the features in Fireworks that I use on a regular basis that improve my workflow and hopefully inspire some people to at least open it up and check it out. I think once you get used to it you’ll find it’s an amazing tool and hopefully integrate it as part of your web production process.

As of lately I’ve really been meaning to explore Photoshop CS4’s 3D tools. After researching the programs new native 3D tools, they seem to be much more powerful than I had initially imagined. I also was really impressed with Adobe’s latest promotional site “Meet Dweezlbug” where artists Genevieve Gauckler and Erick Natzke created a beautiful creature using the suites new tools. The site features a brief breakdown on all the tools and techinques used such as the new native 3D tools, adjustments, 3D layers and also a bunch of new flash tools and techinques.

I love it all!

Enjoy!

Over the years, I’ve tried cataloging some of the inspirational things I find on the web. It’s been a bit of a labor of love since it’s not the most seamless process and takes forever. However, now that’s all changed. I installed Realmac Software’s web page capture software Little Snapper, and with a few key commands I can quickly save entire web pages or just a selection. Once inside the app I have the ability to quickly tag and categorize each snap.  Not only is the process of cataloging inspiration easier, Little Snapper looks amazing and is polished beyond belief. They just released an iPhone version of Little Snapper I have yet to check out but it looks very interesting and has the ability to post your snaps to Twitter.

While busy working away on creative for Gregory’s 2009 product launches, and in desperate need of some seriously great photos, we needed to find someone who shared our vision and could deliver the exact imagery we needed. Enter über talented photographer Tim Kemple. We spent the last week hopping around Northern California with Tim and an incredible group of talent including the amazing climbing machine Joe Kinder. From Grass Lake in Tahoe to Bolinas and the Bay, Tim captured an amazing set of photos we literally cannot wait to unveil.