Some fun times right there.

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.

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.”

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

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!

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.

This has opened a lot of creative freedom for our creatives, knowing they can use a font and to see it exactly the same from design in comparison to the build. I would have to say this makes Jeff’s and Demetre’s job a lot easier.

The nice thing about Cufón is it’s still SEO friendly as well as very lightweight compared to the flash solution that has been the de-facto method of typography treatment for the web, sIFR.

One downfall of Cufón is you can’t select text, although sometimes you get lucky, it just isn’t supported. You might be thinking, oh no?! But hopefully in later builds this won’t be a problem, and it will be the most “usable” solution. What are your thoughts?

http://www.helveticafilm.com/

Highly highly recommended.

Amazing documentary! It will make any designer feel respected and powerful once again!
It almost felt like I was in a therapy session while watching this.

In a nutshell it’s about the origin of the font, the original font haus and the modernism movement vs. today’s contemporary designers who have a strong use of typography such as D.Carson and the S.Stagmister. Basically typography rules vs. no typography rules.

Vic’s and I were having a discussion the other day about what makes Davis Carson so special and after watching the film I had more respect for him, Raygun and Mario. Stephan Stagmister is also one of those guy’s that was questionable to me before watching this. His big “fuck you” attitude to the modernist movement is very interesting during the film. On a side note, Dan Yomanz (buk freelancer) just recently met him in person at one of his lectures and said he was a really nice and approachable guy. I was waiting for Ben’s idol, Hillman Curtis to appear but no dice, I sorta figured he’d be on this documentry by default.

If I had to choose a side “moderism or contemporary typography” I could be swayed either way. I have always felt there’s a time and place for all uses of typography and if you have the respect and understanding of both, it’s fair game.

Don’t miss this link:
http://www.hillmancurtis.com/hc_web/film_video/source/fof/sagmeister08.php

I’d recommend this book for school projects Vic’s. I love it.
http://www.miltonglaser.com/
http://www.amazon.com/Design-Dissent-Socially-Politically-Graphics/dp/1592533078/ref=pd_sim_b_img_2/104-9065744-0143904