Font Smoothing

If you’re really into icon fonts, which I have recently become, you may have noticed a tiny storm brewing in the suburbs of the internet. It’s about CSS-specified font smoothing. Quite a nichy topic, one you can live a perfectly good life without ever knowing all about. You may in fact sleep better by not reading on.

Still here? Alright, here’s the deal. WebKit — born of Safari, engine of Chrome — allows webdevelopers to specify how the edges of fonts are smoothed. The modern default font smoothing method is called subpixel antialiasing. It smoothes font edges using quite impressive means, and in nearly all cases it drastically improves the rendering of letters. If you look at the text in a magnifying glass, though, you’ll notice a nearly imperceptible blue haze on the left side of each letter, and a red haze on the right side. WebKit provides a means for webdevelopers to pick which type of font smoothing is applied: subpixel-antialiasing, antialiasing, or none. Handy. Right?

The controversy is the fact that a number of people — smart people — feel that this CSS property is damaging to the readability of text on the web. There are very long articles on the topic. In fact quite recently a Google employee removed the CSS property from Chrome, citing the notion that the browser should render text according to the operating system. There’s just one problem: icon fonts.

Icon fonts are custom-made webfonts that contain no letters, only icons. The purpose is to have fast access to a bunch of icons in a very lightweight and easy way in your webdesigns. Other benefits include the fact that the icons are infinitely scalable because they’re vector graphics, and you can easily apply any color, drop-shadow or even a gradient to each icon using plain CSS. Sounds brilliant, doesn’t it?

The only downside is that an icon font is still technically a font, so the computer thinks each icon is actually a letter, and by default will try to subpixel antialias it. While subpixel antialiasing does wonders to letters, it’ll fuzzy up your icons and make them look blurry. Which is why the -webkit-font-smoothing property was so welcome. Here’s an icon font without and with subpixel antialiasing:

spacer

As you can imagine, I’m strongly in favor of not only keeping the font-smoothing property, but in fact expanding it beyond WebKit to both Firefox and Internet Explorer. Icon fonts won’t be a truly viable webdesign technique until every icon looks great on all the platforms.

“But SVG is the future of vector graphics on the web, surely you know that!” — Yes I do. But pragmatically speaking, that future is not here yet. SVG support is still lacklustre, especially when used as CSS backgrounds. More importantly, you can’t easily change the color of an SVG icon using CSS only, or apply a drop-shadow. Yes, drop-shadows are on the road map for SVG, but the way it’ll happen is not pretty. Icon fonts, on the other hand, provide a real-world solution today, which is both flexible and infinitely scalable. So next time you see someone bad-mouthing -webkit-font-smoothing, pat them on the head and mention icon fonts. The more you know.

Tagged icon fonts, webdesign 3 Replies

Lucasfilm

spacer

By now you may have heard that Disney bought Lucasfilm. Incidentally that means they get Star Wars, Indiana Jones and Howard the Duck. It also means they get Lucasarts, the game studio that brought us Monkey Island, X-Wing, Day of the Tentacle and all the other wonderful games from your youth. Oh, and they’re making Star Wars Episode 7, due 2015.

Absorbing the initial brunt of the shock that Lucas would ever sell the darling cow he’s been milking for all these years, this may not all be bad. Sure, Disney’s track record for big franchises is spotty, recently with John Carter, but it may still be a good home for Lucasfilm. After all, the Star Wars movies went downhill by the middle of Episode 6 anyway, so by the time Episode 7 comes, no matter how bad it’ll be, there’s no telling if it would’ve been better off headed by George Lucas himself.

To me, what happens to Star Wars is not the thing I care about the most in todays news. I’ve always thought that what came out of Star Wars other than the movies, was more interesting. Perhaps you didn’t enjoy Episode 1, but it’s hard to fault the music. It’s also possible you cringed your feet in Episode 2, but there’s a good chance you played a Lucasarts Star Wars game and enjoyed it a fair bit. In fact, the stories in the expanded Star Wars universe have always fascinated me more than the movies themselves. How do you build a lightsaber again? Oh, and did I mention the wonderful Ralph McQuarrie and Doug Chiang art?

There’s also Indiana Jones, probably my favorite thing to come out of Lucasfilm. Heck, I even enjoyed the fourth one, and I was certainly looking forward to 5. Unfortunately, that may not be in the cards anymore:

While the Indiana Jones franchise wasn’t mentioned much, Disney did say that though it now owns the rights, there might not be any new films because of potential hurdles with Indiana Jones distributor Paramount.

Even worse news for Lucasarts fans:

Disney CEO Robert Iger briefly discussed Disney’s plans for game development using the intellectual properties acquired in the acquisition, saying, “We’re likely to focus more on social and mobile than we are on console. We’ll look opportunistically at console, most likely in licensing rather than publishing, but we think that given the nature of these characters and how well known they are, and the storytelling, that they lend themselves quite nicely, as they’ve already demonstrated to the other platforms.”

It’s impossible to tell whether George Lucas, had he kept the family business, would’ve seen the light and restored Lucasarts to its former glory, in fact it’s probably unlikely. But there were plans for Indy 5, which I would’ve very much loved to see. So if you’re fans of either of those, it seems todays news wasn’t a new hope.

Tagged disney, indiana-jones, lucasarts, starwars 7 Replies

Did iOS just get interesting again?

Scott Forstall, head of iOS and apparent fan of skeumorphism, has been booted out of Apple. Jony Ive, designer of beautiful hardware and previous critic of Apples software interface design takes over:

Amazingly, it’s said that Forstall’s coworkers were so excited to show him the door that they volunteered to split up his workload — Eddy Cue takes on Siri and Maps while OS X’s Craig Federighi gets iOS. And Ive, who has cemented his reputation as a legendary industrial designer over his two-decade Apple career, gets the opportunity to refresh an iOS user experience that has stagnated over the last several generations.

It’s no secret that I’m not a fan of the current iOS design philosophy, but I’m a huge fan of Jony Ives design sensibilities (even if he sometimes takes it too far, like the half-sized arrow keys on the keyboards). Now I’m suddenly excited to see iOS 7.

Tagged interface-design, ios Leave a reply

The Cloths of Heaven

Had I the heavens’ embroidered cloths,
Enwrought with golden and silver light,
The blue and the dim and the dark cloths
Of night and light and the half light,
I would spread the cloths under your feet:
But I, being poor, have only my dreams;
I have spread my dreams under your feet;
Tread softly because you tread on my dreams.

– Yeats

Tagged poetry Leave a reply

Honestly Flat

The authors of LayerVault blog about the flat design era – a move towards simpler UI design with fewer bevels and textures and more flatness. I endorse this movement too much to let this pass me by without comment.

While one side of the mouth yells “good design is how it works,” the other side mumbles that great aesthetics mean realism. It doesn’t need to be this way. Designing honestly means recognizing that things you can do with screens and input devices can’t be done with physical objects — more importantly that we shouldn’t try copying them. It takes too much for granted. Can you imagine your pristine iPhone built into the body of an antique telephone handset? Is that beautiful design?

I really can’t help but agree with these points, but I’m thinking perhaps they’re overthinking it. Having been in this business for over a decade now (yep, I’m old), I feel like I’ve arrived at a couple of simple truths. One of them I arrived at reluctantly, and it took a while to accept it. It’s the notion that there’s no such thing as good UI design, there’s only bad UI design.

To elaborate: when you see a good design, chances are you don’t notice it. Because it’s a good design, it’s already set you on your way to your next destination, offering a clean and simple path on your journey. On the flipside, a bad design has you stumble in your tracks, wondering — where’s the phone number for this restaurant? Whether the UI design is full of linen does not necessarily matter1, what matters is that you found what you were looking for with the least possible friction. The point is: good design is good design, no matter how you arrive at it.

Aside from good design and bad design, there’s also the design that creates an emotional connection within you. Not only does it step in the background when you have a specific goal, but it will reach inside you and shake something when you don’t know where you’re going. I’m not sure textures, bevels, or even glorious flatness does this. In my experience, only tone, can do this. The tone of your wording, phrasing, or even your kooky layout may incite a smile in your viewer, and your large personal photos may tug at a heartstring somewhere. So it’s about being personal, and the best way I know to do this is to let the content shine.

Because of these two lessons — design to help the user on with their journey, and let content shine — my love-affair with gloriously flat UI design is not so much a matter of being honest as it is a matter of getting to that point where you’re feeling the design you’re working on, as fast as possible. Any big design project is borne of agony and a feeling of insufficiency. The more pieces you put in play, the more functionality you sketch out, the faster those feelings subside until at some point they turn into pride.

If I start my process with a canvas of linen, I’ll have already limited my playing field into a very narrow path that’s needlessly hard to find and follow.

For me, keeping things flat for as long as possible is like leaving your body and seeing your project from high above. Suddenly the answer to the question: “should I put a linen texture here?” becomes easy. That answer is that it doesn’t matter. So I usually leave it out.

  1. I hate myself for actually saying that, because the linen texture is the worst  ↑
Tagged flat, webdesign 2 Replies

Reimagining the omnibar

Sean Whipps reimagines Google Chrome’s omnibar. The result is super clean and minimal. I certainly liked it. What I’ve come to learn, however, is that we’re in a state of interface design flux. We’re moving away from the keyboard, and towards touchscreen-friendly huge buttons and voice recognition — both things that should be welcome to sufferers of RSI. That future doesn’t look quite like the keyboard/commandline friendly future Jef Raskin imagined.

Tagged interface-design 2 Replies

Hipster Filters

Instagram. The genesis of the trend of applying fake lomo filters to your photographs. And more. Much much more. You can make your photo brown, you can blow the highlights, you can add a fake photo frame. Basically you can obscure the contents of the actual photo all the while making it look like it came from a camera of yesteryear. It’s so popular that Facebook bought Instagram for one billion dollars.

Filters bug me. It annoys me that they obscure the actual photo. It’s like trying to listen to classical music through a waterfall. Like watching television through a beer bottle. Like playing virtual virtual skeeball.

Why would you do this to your precious photos?

There are plenty of good reasons. Like that it’s not about taking photos, it’s about Instagram being a very intimate and highly enjoyable social network. Fine. On the flipside, these filters are applied at the cost of your memories. Back in the old world, some people used to believe that having a photo taken would steal their soul. In the new world, I posit this: applying a hipster filter to your photo steals the soul of the photo. Ten years from now you’ll regret applying those filters. Trust me.

I understand the attraction, though. The human condition is a bitch. Things don’t always work out like we wanted them to. Life wasn’t supposed to be like this, was it? If coach woulda put me in fourth quarter, we’d have been state champions. No doubt. No doubt in my mind. You better believe things had been different. I’d have gone pro in a heartbeat. I’d be making millions of dollars and living in a big ol’ mansion somewhere, soaking it up in a hot tub with my soul mate. Life should’ve been better.

But this is it. And it’s sometimes bleak and grey and dull and out of focus and sad, and if I just apply this warming filter and lomo effect it improves the memory. All my friends on Facebook who look so happy in their pictures and everything on their timeline is so nice and their lives really worked out for them wow I wish my life was like that but now with this quaint lomo effect they’ll see my pictures and they’ll see THEY’LL SEE how great my own memories are, how much fun I’m having. They’ll see that my life worked out too!

Now where did I put that box of wine?

Tagged diary, instagram 6 Replies