The problem I want to address can be referred to as ‘Swiss Interface Syndrome’, and its symptoms extend to the apparently randomly distributed presence of Max Miedinger and Eduard Hoffmann’s 1957 typeface — Helvetica — in the graphical user interface. Helvetica is, without a doubt, the most used and abused typeface in existence. Since its birth, it has grown from a fad, into a ubiquitous beacon of neutrality, and today into an even more omnipresent showcase of classic Swiss typeface design. Unfortunately for us, Max Miedinger did not exactly have computer screens, Aqua source lists and pixel font sizes in mind when designing it. After all, all of those things weren’t even invented. Which is why you can probably see why using Helvetica in something like an application sidebar is such a mortal sin.

Mac OS X comes with, in my opinion, one of the best typefaces of our time that is optimized for the computer screen (also more shortly referred to as a ’screen font’); Lucida Grande, designed by Charles Bigelow and Kris Holmes. If you are using Mac OS X, you won’t have to look far to find it; your top menu bar is completely set in it, your Dock labels are, most of your browser interface is, and even the sidebar of this website is set in it (by my own preference). It’s also obvious why Helvetica and Lucida Grande are so different; one has been designed before any computers existed, and the other was designed in 2000, with pixels in mind. Obviously, Lucida Grande isn’t as neutral or multipurpose as Helvetica; it has the clear appearance of a small-point size typeface that doesn’t work comfortably at large sizes or in print. But that is not an issue if you take into account its design principles. In those tiny text sizes of our interface, Lucida Grande truly shines. It completely gets out of your way and remains extremely legible.

Now you should be able to see why I found myself in a state of utter disarray and bewilderment when the runner-up of last year’s ‘Best Leopard Application’ Apple Design Award had an interface that proved to be more riddled with Helvetica than a keyboard is with buttons. And it set another precedent; applications like Outspring Mail, the recently released $95 mail client for Mac OS X, also joyously frolicked into the crowd of Helvetica-like interface enthusiasts by applying Arial and Helvetica liberally across source lists and list views (I thought this was Helvetica, but John Gruber pointed out it is Arial in the source list). I was at first merely outraged by the usage of Helvetica in the sidebar (I mean, three letters: ‘Why?’), which is bad enough in itself, but it’s not just limited to that; it bleeds into list views, graphs, sheets, and tables, for… well, what really? The reasons are a mystery to me.

Honestly, why? Why bother to change the sidebar and list view font?

While Helvetica fails to bother me on a high-resolution screen like the iPhone in large point sizes, the shadow of its former self known as the ‘hinted’ version, for the tiny pixel sizes it is used in in these applications, is a grim wreckage of the neutral typographic style reduced to a format it’s not comfortable in. Lucida Grande, that towers above these depressing interfaces as the window title (thank the powers they didn’t change that too) stands out like a tiger in a lineup of kittens in glass bottles.

The left numerals of reconciled value and total value are set in Lucida Grande, and the jaggy numerals on the right graph are set in Helvetica. This is a screenshot of an Apple Design Award runner up, which means Apple basically approved this typographic misbehavior.

My biggest problem isn’t actually with the tasteless use of just going with Helvetica, the ‘default font’ of the last 30 years, but so intensely tearing the font out of its comfort zone of small but not minuscule pixel font sizes. Arial, Microsoft’s Helvetica clone, is also shipping on Mac OS X computers for the sole reason that its very different and optimized hinted pixel version is indispensable for correctly displaying a lot of websites. It eludes me why anyone would choose Helvetica over Lucida Grande other than the virtue that it’s different and Apple is using it.

As with most new Mac interface fads, changing a well-established interface font isn’t something that would be done by developers and interface designers without a reassuring precedent. In the last products of Apple, Helvetica has become quite poignantly present. It has expanded into Apple’s product lineup like an oil spill, from the iPhone and iPod Touch interfaces, to the new iLife suite of applications and OS X Leopard (what, you didn’t notice iPhoto, iCal, and Time Machine’s interfaces have been liberally sprinkled with Helvetica?). It is clear Miedinger’s brain child is the true comeback kid.

iPhoto ‘08 using Helvetica in its main content view.

Speaking of iCal, which proudly boasts Helvetica in miniature point sizes on the screen, it has the utterly mind boggling feature that it shows you calendar information on a computer screen with everyone’s favorite 1950 typeface for print, and prints these exact calendars on paper in Lucida Grande, a computer display font from this milennium. ‘Utterly backwards’ might be an apt term for such misfit typography. With these kind of typographic failures, I truly wonder if there are still designers working at Apple with any typographic sense in their Miedinger-tainted brains at all.

Hey, look on the bright side, at least they’re not mixing Lucida Grande and Helvetica numerals too.

Apple’s receiving some flak here, and it’s for good reason; for Vista and Office, Microsoft commissioned some of the best type designers on this planet to make a set of great new typefaces. Vista now ships with a proper UI font (no more hinted Arial and Verdana like in Windows XP) similar to OS X’s Lucida Grande, and with a typeface assortment that makes OS X pale in comparison. Apple may have had the upper hand in 2002, but as the times have changed, Apple has done absolutely nothing to keep its catalogue of type fresh and to add more and better typefaces to it. This reflects in the world of design around us, seeing that 90% of computer users create things with the system-provided set of typefaces. I find it the worst example possible that a company — that is supposed to be so design-oriented — can make. Please don’t tell me I should just switch to Windows if I like proper typography, because I’d much rather get punched in the face repeatedly than being forced to switch to something else than OS X, where the ‘details’ matter.

Edited note: If you feel like further bringing this to Apple’s attention, consider sending them feedback or digging this.

I’d like to conclude this plea for common sense with the best educated guess I could find on the actual reasons for a Helvetica popularity surge in this day and age. Erik Spiekermann, a great type designer, was asked in the eponymous Helvetica movie;

“Why, 50 years later, is [Helvetica] still so popular?”

Erik stares into space a few seconds, pondering, sighs, then answers:

— “I don’t know… Why is bad taste ubiquitous?”

Here’s an example of toolbar buttons in Tiger:

In Leopard, however, this style has been abandoned, in favor for a more dark, unified and bezeled look;

Whichever one you like better doesn’t matter, but we’re going to make a Leopard button now. You can adorn your Finder with it later on, or do whatever you want. It’s a good idea, however, to start thinking what kind of a button you want to make. Let’s say we want to make a whole new button that, when pressed, opens iCal.

What this means is that you’ll want to find an appropriate glyph. iCal is an easy example; we already have a convention for an ‘iCal’ or calendar glyph in OS X. No, really, check it out;

As you may observe, these buttons resemble Leopard’s quite a bit. They also have that nice bezel. Let’s make a screenshot (take this one, if you want to follow along) or make a new glyph if there is no convention. “But wait, Sebastiaan!”, I hear you say, “why remake a button that’s already there?”

Well, here’s good design lesson number one; imitate to learn. You want to learn how to make buttons like this? A good idea is making an attempt to remake it. Lesson two: Design for the future. Be thoughtful in your designs. Before you kick up your favorite image editor, think what you want to make, but also how long you want to use it. Are there future requirements for the graphic you are making? For normal work, you might consider making things at a high resolution so you can print beautifully, but in this case, Leopard needs some high-res resources for buttons.

And you can even set your working size to be infinite. Yeah. That’s right, you can make your resources as big as you want them if you make them from scratch. With Photoshop? Yup.

Follow along. If at some point you stop getting it, just keep reading and at the end there’s a nice PSD to try it all out for yourself. Let’s start with our calendar glyph screengrab. It’s not too big…

Let’s make it a bit bigger. Select “percent” from the image size dialog.

Then proceed to resize to to 400% it’s original size. Select “Nearest Neighbor” from the resample dropdown.

Okay, now that you’ve got it in the size it should be minimally for Leopard in bitmap, you can start making a vector out of it. Use the Pen Tool in Photoshop to trace its lines. Be sure to select Shape when making it and sample its color.

After a bit of working the lines and tweaking the edges to be exactly 90 degrees, this is the result. Your mileage may vary, depending on your Pen Tool skills, but just keep tweaking with the white and black arrow tools to tweak the shapes. There are plenty of Pen Tool tutorials out there.

If we were to overlay this to it’s original background now, it looks like this;

That’s not too funky; it doesn’t really work this way because it looks like a graphic slapped on a gradient. It’s just too flat, you know? Let’s add a bezel. Although this ‘pixeled’ icon contains only sharp edges, you can apply the same method for round shapes, in vector, to make bezels that actually work (instead of working at the small size with 1 pixel ‘outer bevel’ layer effects, that really get messy).

As you can see, you can, without resorting to layer styles, make a white form behind your existing vector shapes. At this level, you can see it’s a white form. At our classic size, however…

As for the background of the button, some people insist on fussy practices of sampling colors. In this case, take a 1 pixel wide selection to rapidly ‘prototype’ the button background without having to create a whole gradient;

Take this selection, copy it to a separate layer and scale it about 20 times wider. Once you are happy with your glyph, you can take the shape of the button, make a vector and apply the proper gradient on it.

As you can see from the PSD, you can export this as a ‘regular’ size (as the button was before, thus, 25% of our current image) and as 4x to comply with the Resolution Independent guidelines laid down in the now public session at WWDC ‘06. You can also, as the buttons we see here are easy to make in the new Interface Builder under Leopard, export them as PDF’s. Be sure to fit the path in an ‘image’ of appropriate pixels, though, or your shape might be placed quite oddly in the NSButton.

Now that you know the basics of putting together these kind of buttons, go make an alternative set to Safari’s! Or perhaps some new toolbar buttons for Mail? Preview? Let’s see what you can come up with in some spare time!

If you enjoyed this tutorial, you can take some time to comment, share with delicious, or digg it. Kind words over email are also appreciated ;).

http://blog.cocoia.com/?p=60 Wohoo, even more purdy images. I just had to show this one. It’s purrrrdy.
Dear iSight Expert and Praetorian Beta testers, there are some good things in the pipeline! I think I’ll do some updates tomorrow or in the next few days, perhaps release a definitive roadmap to releases.

My humble apologies for the extremely salt-less post I did yesterday, I really didn’t want to offend anyone with taste. It’s there for the stay. No more words on that.

Here is some homework I literally ‘let do’ in my sleep. Like I said to a classmate over IM; “it’s like a tiny Chinese fellow in a black box with Maya 6 and a keyboard shortcut for matrix extrude on fast-forward”. I’m taking suggestions to name this thing, I can’t seem to come up with anything better than the ‘Purdy-Image-O-Matic™”.

Without further ado, the poster;

It’s great to have the results of as little knowledge of these almighty tools we, as young coders of the ‘lazy’ generation, have — at least, I am just beginning. I haven’t ever used an Apple II. I didn’t write assembly on my 286. I did a lot of work with old stuff to compensate, longing for having been born in that age. It didn’t work out that way, so these days, I am just up in learning everything I think is great for expressing myself or making stuff work the way I want it to work.

Oh, before I forget, that’s a font I had to make for modular typography class. “Acreola”. I’m so carried away in this whole rant that I forgot all about that. What should I do with it? Burn it? Eat it? Give it with every odd copy of my software?

]]> http://blog.cocoia.com/2007/04/15/nailed-that-poster/feed/ http://blog.cocoia.com/2007/04/13/heart-eating-experiment-continued/ http://blog.cocoia.com/2007/04/13/heart-eating-experiment-continued/#comments Fri, 13 Apr 2007 21:41:57 +0000 sebastiaan http://blog.cocoia.com/?p=56 Building further on my experiments with OpenGL.

As you can see, some color modulation and a post-process blur with additive blending does give it an edge. It’s nice, soft, and scenic. It can output a cool 40 images per minute, in it’s current, raw form. I may push it out, once I get things working like ‘true’ 3d scenics with shading.

Because xyz (Nate) asked for some details on this, I’ll happily disclose some. My ’script’ (it used Python first, now most of it is just bare C++ or Objective-C) receives random input from any source (say, you could pipe your chat log into it, or the contents of your favorite MP3) and processes it into various arrays of data. It then randomly selects values to assign to properties of a hard-coded array of 3d objects, e.g. cubes, planes, and lines and their X, Y, Z positions and distortions. Most data, not being really random, create interesting patterns from strange perspectives. It uses basic lighting for every (simplified), depth testing for overlapping shapes, and depth-of-field (limited and simple). Overall, it looks landscape-like, or like it’s some sort of room or space. I think most outputted images are pretty much industry-grade, I made a mock-up of one of the generated images as a book cover.

For now, it’s just an experiment. Some other cool graphic stuff from my classmate, Jelmar. He’s working on ‘Sixty Pounder’, a great characteristic ‘fat face’ for expressive messages. As quoted from Jules & co;

Jelmar, and me, of course, enjoy feedback like Nate’s. Please, let us know what you want to know, or what you want to see! I’ll upload some wallpaper-sized images (any idea on sizes? I already have 1920×1200 written down). Email me!

]]> http://blog.cocoia.com/2007/04/13/heart-eating-experiment-continued/feed/