Typography on the ‘net

As I’ve delved further into the world of CSS, I’ve been constantly amazed with what people are doing typographically via that medium. Honestly, I have thought for a long time that with the advent of the internet, the rules and best-practices of typography would be ignored to a greater and greater extent. En-dashes and em-dashes would have very little distinction; small-caps would lose their place in the world; hyphenation would either be abandoned or used with abandon.
Every now and then I come across a page that shows great care and respect for typography and I wonder whether the person who created the page is an island unto themselves. Are they fighting a losing battle with the internet at large? Do they still create pages that uphold typographic ideals, even though it takes a great deal more effort? Should I write them a thank-you note?
I’m coming to realize, however, that the forces of good typography are more widespread than I originally believed. There are video tutorials that can teach folks about letterspacing and leading (”line-height”– we had to compromise on the terminology, it seems). Sites like A List Apart show exactly what’s possible if a developer has an eye toward design and type best-practices. We see through designers like Jason Santa Maria that creativity is unbounded, even in the realm of system-friendly fonts. But the site that really brought all of this home for me is Webtypography.net– a site sprung from the classic book, “The Elements of Typographic Style.”
The site is wholly devoted to giving typographic advice to designers/developers/coders while simultaneously furnishing them with the code used to achieve the desired effect. It’s a godsend for someone like me who is still learning and hacking together what I think is right in order to attain a look that I know is right. Tough stuff, this web stuff. The website is arranged like a beautifully-composed book and that only serves to strengthen my good opinion regarding its content. Check it out if you have any inclination toward improving your typographic style, and code.
Cooking by Design

Alright, alright, I’ve been remiss. Apologies for the extra-long pause in posts. First work took over, then applications took over, and now, in this new year, I hope to be somewhat more consistent about putting thoughts to page.
During the winter months I tend to turn to cooking as a way to warm up (hot oven!), relax (great smells!), and hang with friends and family (who doesn’t love a home-cooked meal?). Recently I was cooking for a friend and told her, quite naturally, that I cook by color. What I didn’t realize is that this is not the way everyone thinks. Loads of people cook by recipe, and while I think that recipes are fine guidelines and excellent teachers, it’s far more interesting to cook by taste and by look.
Cooking by color, or by design, works best with things like salads where the ingredients are kept fresh. Bright cherry tomatoes, crisp bell peppers (in three colors, swooooon), and creamy-green avocados dance together to make a gorgeous, playful visual. The saddest dish by far, color-wise, has to be cream of mushroom soup. While I love the stuff dearly, it’s next to impossible to forget that depressing gray tone.
One of the best parts about cooking by design is that no one dish needs to be color-perfect– an assembly of parts can make for a visually (and gastronomically) satisfying meal. A well-browned meat, dark leafy green vegetables, light saffron rice, and a cheeky fruit juice or wine is more than enough to make a square meal. Often when I feel that a meal is missing something essential, I look to the colors to show me what’s lacking. And often it’s the green that is falling down on the job.
So when you’re next in the kitchen, think about your meal and how it will look once on your plate. Even if it’s a one-dish concoction, like pasta, make it hearty with tomatoes, zucchini, shrimp, and parmesan to give it some real color. Top it off with a sprig of parsley and you’re ready for anything. Both your eyes and your stomach will be pleased.
Retro Type
I’ve been having a hell of a time finding fonts lately. In particular, I’ve been searching for the perfect font to give off a retro, old-style packaging/signage/poster-type look. It is at home all cut up and broken, it looks good messily silkscreened, but it can also stand up to posing on the headlines and buttons of a clean web interface.
What did I come up with?
Neutraface, for now (from House Industries). I’m pretty much in love with the smallcaps A’s dropped crossbar. For some reason it makes me think of looking at an old sign with a pinup girl on it. For my current purposes, it’s giving me a great combination of playfulness and strength. Here’s hoping that it will wow the client as well.
Business School Applications

I’ve been preparing to apply to business schools (entering Fall ‘10) for some time now, and I’ve been wondering whether b-schools respect design as much as MFA programs. It’s not the most fair comparison but it’s also not as strange as one might think.
Originally I was (let’s make no bones about this) … annoyed. Really? You want me to submit my essays in 12pt, double-spaced format? How 8th grade. I’m willing to bet they’d like me to use Times New Roman, too. But with the advent of the interwebs, all application materials are allowed (in fact, recommended) to be submitted online. Catastrophe: avoided.
This got me to thinking about how b-schools communicate. It’s an informational debacle, trying to get out all these can’t-miss points about the maximum word count of your essay, the method by which you may submit additional information, and the people who are eligible to recommend you (enthusiastically!). If a body of high-strung and potentially high-paying prospectives doesn’t understand the instructions put forth, there’s a whole lot of headache in store for the admissions department.
Currently I’m in the process of orchestrating my recommendations to five schools. In looking at five recommendation request forms, I’m noticing that they are… staid. Conservative. And with not enough leading. However, there is one bright spot in the otherwise dull and mundane ocean of forms: UC Berkeley has taken some well-deserved time to treat their forms with respect and care. I noticed a bold mix of Gill Sans, Franklin Gothic, and Trade Gothic all being used to convey a strong message: “Here’s how you do this. Here is what’s important.” Simple, but highly effective when well-executed.
So here I sit, getting distracted by the rivers in Stanford’s note to the recommender. Couldn’t they have used a sans-serif? Would it kill them to let out the leading just a bit? Why, oh why did they horizontally squeeze all the type in the assessment grid? I’ve thought about ignoring these distractions, but instead I think that keeping these things in mind may help in the long run. After all, the applications are about showing what you’re made of. If I’m made of a nervous, design-related twitch, I want the admissions committee to know about it.
Zip-up headphones

Very cool idea from Yanko Design. Though who’s to say that even the zipped-up headphones wouldn’t get tangled up? At least this minimizes the clutter. A bold, modern, and yet elegant solution to the everyman’s (or everyaudiophile’s) problem.
Alcohol + design

For some reason alcohol has a place of pride in the design world. Maybe it’s the vast amount of money that is sunk into making the image of a brand appealing across all demographics, or perhaps it’s the product that lends itself to the idea of excess by way of outlandish and experimental design. One way or the other, the packaging design industry seems worth its weight in booze because of a constant need for new beer, wine, and hard liquor labels– not to mention the numerous accoutrement associated with mixing, pouring and serving said beverages.
I could extrapolate all this to encompass cigars, sex, etc. But why bother? There’s more than enough to work with in alcohol, and designers are certainly having a field day with the material given. Take this Spanish red I found at Whole Foods. Nothing top-shelf about it, but the design was both eye-catching and persuasive. I’ve been known to pass a bland bottle by because I didn’t feel the design could possibly give way to a great product. I’ve also been hoodwinked by the occasional beautifully-designed but sub-par beverage. In the end, it’s once again very difficult to judge a book by its cover– and in this case, a bottle by its label.
Verstyl
An ex-colleague of mine is setting up his own photography studio and asked me to help with a logo for the burgeoning business. I find it very useful to inspect what others have done when it comes to logos. Often I’m both surprised and impressed with how clever and intelligent the final products can be.
As it turns out, photography logos seem to lean greatly toward graphical representations of shutters, tripods, and lenses. Go figure. When it comes to obvious (some might say “cliché”) solutions to design problems, I used to avoid them at all costs. Now I believe that even the clichés have value if they’re done right.
That said, the identity solution I came up with for Verstyl includes, yes, a shutter– however it also integrates the main letter of the company name and can easily be diced up into its parts and still look both complete and stylish. Looking forward to seeing some good things from Verstyl Photography.
Jewelry branch II

I finally found an adequate branch to fasten to my bedroom wall/use as a jewelry hanger. It’s being held in place by one very stalwart nail. I hope the little guy hangs on, cause otherwise I’ll have a lovely mess of earrings on my floor.
Key/ring
This sort of marriage of form & function should happen more often. Very cool. Via PSFK.
Illusions in Design

When one thinks of optical illusions, I’m willing to bet that crazy moving circles and walls that appear curved come to mind. I studied illusions in undergrad and had a great time researching how the mind can play tricks on the eye. But I quickly learned that regardless of how many garish, in-your-face examples of illusions are out there, there are much more elegant and real-world-applicable examples in one’s own work.
Graphic design is all about perception. If your design for a beverage campaign doesn’t make people thirsty for the product, you haven’t succeeded in achieving your goal, regardless of how good your intentions were. Or, if your poster design does not make your audience want to continue examining the information presented, your design is not effective. Distilling this down to the most basic concept: regardless of your intention, audience perception of your work is paramount.
Applied in the most basic way, visually: if your intention is to make a straight line, if it is not seen as straight by your audience then your goal was not achieved. In the image above, the lefthand example is of a truly straight line cutting a vertical bar. The righthand example is of a ‘visually correct’ straight line cutting the same bar. The intention did not stand up to the perception in this case, and so visual corrections had to be made. This manifests in all sorts of design work and conscientious designers are always aware that they will have to make allowances for their audiences.
One of the clearest real-life examples I can think of is in identity design. At a large scale, an identity may be complex, colorful, with light typefaces and subtle tonal changes. The same logo at a small scale will have to be adjusted: tonal changes are intensified, typefaces are bolder, and the designer may have to leave some of that beautiful complexity behind for the sake of easy viewing and safe reproduction.
It is said that “good design is invisible”– and in this case, it is very true. Allowing an audience to move through a visual design without being jarred by the realization that they are looking at something “designed” in the first place, is the ultimate goal. Addressing these visual fixes certainly isn’t the most exciting part of a designer’s job, but I believe it’s one of the most important parts of being a good maker.


