Archive for March, 2012

Respect Thy Typography


  

Good typography shouldn’t have to rely on ornamental crutches to stand tall. Yet despite all the tools and knowledge available to us, we readily embrace a flourishing, decorative typography, with cheap tricks used in a misguided attempt to make it “pop�. This ancient art may rapidly be gaining popularity, but are we paying it the respect it deserves?

Take a snapshot of the visual culture that surrounds you—magazines, movie posters, packaging, websites—how much of it relies on typography? How much of the typography around you is actually well considered? Chances are you’ll find a handful of beautifully crafted typographical designs competing with an avalanche of visually “richâ€�, image-heavy creations. Typography is then relegated to the role of “necessary evilâ€� in order to display text, or ill-considered typographic pieces, where the meaning of MS WordArt has been interpreted a smidgen too literally… Why?

Looking Back

It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile).

But with such power comes great responsibility. And even though modern tools give us the opportunity to do so many things, doing a great deal of these things isn’t always a recipe for beautiful design. Just because we have many options opening up to us doesn’t mean we need to employ every single one of them in the hope of developing a design that stands out—and most likely for all the wrong reasons.

That’s not to say typographic design can’t be ornamental, complex or even illustrative. But centuries of working with movable type has left us with principles on which to base our typography, and it’s our duty as designers to understand them (at least if we’re aiming to break them). A good place to start is to look at what those who came before us have done—even the briefest throwback into the annals of typography and design history will help.

Consider Milton Glaser’s “I love New York� logo from 1977, commissioned as part of a marketing campaign by the New York State Department of Commerce. Glaser, who did the work pro-bono, wisely avoided skylines, figures of people holding hands, or flowery ornaments by using only a simple heart shape to represent the key word of the mark: love. We all know the subsequent success of the logo, as it has been brandished on millions of white t-shirts, inspiring countless knock-offs since its inception.

And if the heart-symbol of Glaser’s work seems too pictorial in this context, how about Robert Indiana’s “Love� sculpture? Originally created for a Museum of Modern Art Christmas card in 1964, this iconic piece of type shuns imagery altogether, relying only on the power of letterforms (arguably based on Clarendon) to ignite our compassion.

I love New York logo and LOVE sculpture
Lovely examples of modern typographic icons.

Glaser's updated version of I love New York more than ever
Milton Glaser’s post-9/11 update of his own masterpiece.

Of course, this kind of admiration for type didn’t just start with 60’s advertising. Typography is a craft going back thousands of years—to the birth of writing, if you wished to go deep enough—and has evolved and developed a great deal since that time. Theories have been postulated and developed as to how to best communicate through letterforms, especially when an idea needs to be transmitted as easily as possible. As Bringhurst explains while introducing the first chapter of his timeless “The Elements of Typographic Style”: Typography exists to honor content.

Beatrice Warde’s well known essay “The Crystal Goblet” beautifully explains the role of the typographer and his or her type, and she reinforced this point during an address given in 1930 to the British Typographers Guild in London. Advocating the idea that type was not there to be admired, or even noticed, that it existed only with the purpose of communicating an idea, she proclaimed; “I have a book at home of which I have no visual recollection whatever as far as its typography goes; when I think of it, all I see is the Three Musketeers and their comrades swaggering up and down the streets of Paris.â€� I wonder how many us have the same consideration for content when we browse through MyFonts or Typekit in search of the perfect typeface.

One of the many great designers who echoed Warde’s ethos was Jan Tschichold. His most well-known work is found in the legacy he created during his time working for Penguin (1947-1949), refining and redesigning the former book covers and creating the rulebook for the Penguin covers that followed him.


Notice the absence of decorative elements in this series of Penguin covers by Tschichold.

Looking at these covers one will see that the focus is unequivocally on the communication of a book’s title and author, and the result is truly magnificent. The covers are not beautiful because of particular ornaments or images, or even the individual shapes of the letters, but for their clarity of message. It’s not by accident that a clarity of (and focus on) typography has stuck with Penguin until the present day, which is beautifully demonstrated by David Pearson’s designs for the “Great Ideas” series from 2004, 2005 and 2008.

Two book typographic book covers by Pearson
Though the style may be different, the focus on typography still embodies the spirit of Tschichold.

Challenging The Rules

The approach advocated by modernist typographers is one of clarity and legibility. Scientific methods (let’s call it early “A/B testing”) were utilized in the quest to find the perfect typeface—not in terms of aesthetic, but rather efficiency for communicating—and rigid systems were developed to achieve ideal reading conditions. In the strictest sense, typographic beauty is not to be gained from the letters or ornaments themselves, but should come as a natural result from an “invisible” type that unselfishly honors the words and content.

However, movements of any kind invariably inspire counter-movements, and the modernist ethos was to be thoroughly challenged towards the end of the last century, most notably by David Carson (b. 1954), Peter Saville (b. 1955) and Neville Brody (b. 1957). While earlier designers sought to communicate the messages they were setting as clearly and cleanly as possible, these young contenders wished to push the boundaries of legibility and normality, so that the emotion and idea wasn’t delivered via what the words represented, but how the words were seen as objects separated from their meaning.

These three designers were to shape the face of contemporary typography with their groundbreaking work spanning magazines, newspapers, film titles (Carson and Brody) and record sleeves (Saville). They helped pioneer experimental typesetting in the 80′s and 90s’, throwing the modernist rulebook out the window, yet retaining the communicative authority for letters and words.

Nowadays it’s easy to argue that their use of type did indeed include a great deal of flourish and extras. But seen in the context of the post-modern era, it’s clear that this was not simply an attempt to “beautifyâ€� their work. On the contrary, the disrespect for clarity and to embrace “grunge” were design statements opposing the impersonal coldness of the modernist designers… they were adding emotion to the words they were communicating, which also reflected the cultural movement of the time.

Jan Tschichold might have turned in his grave at brash expressions such as these, but the power of typography seemed stronger than ever. Their work showed that there is an infinite number of ways that typography can be used to communicate a message.

Various designs from Saville, Carson and Brody
Clockwise from top left: Saville’s cover for Hard-Fi: Once Upon a Time in the West, Carson’s High Priority spread for NY magazine, Nike ad by Neville Brody.

The conscious tenet arising from such examples is an appreciation, by the designer, of how typography can be emotionally valuable. Each of the above examples evoke something—whether heartfelt, or slightly adrenalin pumping, it can be concluded that this is often the role of illustrative typography: to move the heart, and not just yell at the mind.

From Movable Type To Type That Moves

Regardless of the word count, the typographic experience can be as emotional as any pictorial masterpiece. This notion is beautifully exemplified by the “Coming Togetherâ€� campaign for FontAid by The Society of Typographic Aficionados (SOTA) in support of relief efforts following the 2010 disaster in Haiti. The project—a font consisting of hundreds of ampersands designed by contemporary typographers—showed that despite the common saying that “a picture speaks a thousand wordsâ€�, sometimes all you need is a handful of letters… or indeed, just a single character.

Typeface consisting of ampersands only
The “Coming Together” typeface shows us the power of a single character.

Other, less sentimental examples of moving (literal as well as metaphorical) type are masterfully displayed on the blog of Trent Walton, a true magician in terms of utilizing modern technologies to add depth to his typography. When spelling out the title Workspace, a particularly illustrative typographic treatment conjures up images of your very own—or perhaps your dad’s very own—workspace, complete with holes in the wall for hanging up indispensable tools (“I really needed that magnetic stud finderâ€�).

In another example, Unitasking, the “Iâ€� in the headline doubles as an illuminated “1â€� when it is interacted with, emphasizing the message of the article. Granted, neither example can be described as “pure” typography. But note how the extensive use of technology with typographic tricks can be used to illustrate the message, infusing it with added emotion, rather than for decorative purposes.

Typographic treatment of the word "workspace" with each letter hanging from a nail
Movable, interactive typography with nostalgic undertones.

The word unitasking spelled out twice with the i being illuminated in the second version
Laborious use of CSS trickery adds value to the message.

Stefan Sagmeister is another designer (actually, another legend) fascinated by the concept of emotional typography and how design can touch our fellow human beings, and he’s unafraid to use unconventional means of communication. For a 1999 AIGA lecture poster he literally carved all the copy into his own body using a razor blade (well, his studio mate did the carving) before photographing himself, the result being so disturbingly powerful that it’s difficult to look away.

But it’s not all gore, of course. As part of his “Things I have learnedâ€� series he created a type-only billboard for Experimenta Lisbon, spelling out his message in capital letters: “Complaining is silly. Either act or forgetâ€�. Simple enough, right? Not quite. Using no ink what so ever, Sagmeister and his team created a gigantic stencil and exposed huge sheets of newsprint to the scorching sun over a period of weeks.

The letters (covered by the stencil) would remain white as the newsprint yellowed, and by the time the billboard went up the statement was easily read by onlookers. The subsequent effect was, as you may have deduced by now, that the letters would slowly fade away as the previously non-exposed newsprint would yellow to the same color as the background. Thus the message to “act or forget� was emotionally strengthened with every passing day.

Stefan Sagmeister's naked torso with letters carved into it
Sometimes typography can be effective without trying to be beautiful.

Poster reading "Complaining is silly. Either act or forget."
Using the sun’s ultraviolet rays to slowly fade away the message.

At this point we’ve come a long way from the clear, simple typography of Tschichold. I’m sure many of you are questioning whether the latter examples, in comparison, rely too much on visual tricks to get their messages across. Indeed, I opened this article by challenging the over-use of ornaments and decoration in order to enhance our typography, and yet aren’t Walton’s and Sagmeister’s work examples of just that? Not quite.

Despite heavy use of non-typographic elements, there are no unnecessary flourishes to be found, nor are there any signs of unrelated decoration (though, to be pedantic, Walton’s use of surface textures may be superfluous). In truth, both designers are adding value by choosing techniques and expressions that purposefully match the content and create an emotional frame in which to deliver the message, thus highlighting it’s impact.

Contemporary experimentalists like Walton and Sagmeister might contradict traditional typographic principles, yet they play an important role in the global, ongoing design conversation by constantly discovering new and unconventional means for typographic expression.

Spread The Word. Literally.

In all honesty, type is not just movable, it has the power to move—and it’s up to us to carry this legacy forward and into the digital frontier, that is inevitably our future. By learning from past examples of excellence, we can challenge the status quo of mediocre typography and misplaced stock photography, and start to push things forward. We don’t always need to do too much (well written copy is, after all, your very best friend), and we certainly don’t have to use all the tools in our drawer every time.

But we can continuously look for new ways to add value, as long as we make sure our typography doesn’t communicate anything other than the intended message. Sometimes that means heavy use of CSS, making creative use of sunshine, or experimenting with size and position. Other times—perhaps most times—it means keeping things simple, letting the words do the talking and letting the typography work itself gently into the background.

Remember, despite the plethora of typographical tools we now have at our immediate disposal, we’re the latest chapter of a long history of typographic craftsmanship—typographers painstakingly arranged letters by hand for centuries before the computer (or even phototypesetting) came along. We should honor the hard work that has been put in by those who came before us. We can do this by recognizing typography as an essential part of our work (be it for Web or print), learn about the principles (especially if you’re aiming to break them) and consider all the factors that make for great communication through letterforms.

If right now you are thinking “but my boss will never let me do what Sagmeister does!”—don’t sweat it, most projects don’t allow for typographic experimentation. But that doesn’t mean you can’t hone your skills—there’s plenty to be gained from taking pride in the small things, and making sure you get the details right. If your brief dictates uninspiring imagery, put your effort and pride into perfecting the accompanying typography. Is the line-length appropriate? What about font-size, line-height, and hierarchical contrast? Does the typeface echo the sentiments of the message? Maybe if you get all the small things right, the bigger things will come easier once that suitable project comes your way.

So roll up those sleeves, consider the meaning of the words you’re setting, and pay some respect to the centuries of evolution behind the typeface you’re using today, and just as importantly, the craft of typography as a means of expression. By all means use images, but just remember that you don’t always have to—typography can be just as meaningful by itself, even without the alluring magic of word-art.

(jvb) (il)

A Thank You to our fabulous Typography editor, Alexander Charchar, for preparing this article.


© Espen Brunborg for Smashing Magazine, 2012.


The Best Browser is the One You Have with You

The web as we know and build it has primarily been accessed from the desktop. That is about to change. The ITU predicts that in the next 18–24 months, mobile devices will overtake PCs as the most popular way to access the web. If these predictions come true, very soon the web—and its users—will be mostly mobile. Even designers who embrace this change can find it confusing. One problem is that we still consider the mobile web a separate thing. Stephanie Rieger of futurefriend.ly and the W3C presents principles to understand and design for a new normal, in which users are channel agnostic, devices are plentiful, standards are fleeting, mobile use doesn’t necessarily mean “hide the desktop version,” and every byte counts.

For a Future-Friendly Web

It is time to move toward a future-friendly web. Our current device landscape is a plethora of desktops, laptops, netbooks, tablets, feature phones, smartphones, and more, but this is just the beginning. The rapid pace of technological change is accelerating, and our current processes, standards, and infrastructure are quickly reaching their breaking points. How can we deal with increasing device diversity and decreasing attention spans? Brad Frost of futurefriend.ly explains how, while this era of ubiquitous connectivity creates new challenges, it also creates tremendous opportunities to reach people wherever they may be.

Beyond the Building Blocks: Collection of Architectural Photography


  

Our lives are passively impacted architecturally on a daily basis. To the point where we are virtually desensitized and often do not even take notice of these magnificent architectural structures. We drift in and out of these buildings, pass by them as we move to our destinations, and yet the buildings seem to be blocked from our view. We do not often take time to examine and appreciate the artistry of them.

Both inside and out, so many of the buildings around us possess an uncanny ability to inspire us if we let them in. When we begin to look beyond just the building blocks and metal frames that tend to bring these structures to life, we can see them in entirely new ways. Luckily there are many talented photographers who are more than adept at not only viewing architectural structures this way, but in capturing them so that we, the viewers, can see this in them as well.

Below is a collection of all manners of architectural photography that is sure to inspire anyone who comes across it. Perhaps you will even leave with a deeper appreciation of the buildings in your daily life.

Beyond the Building Blocks

Souls jail by zardo

Piran – The St. George Cathedral by pingallery

Old Warehouse District by IndianRain

first guest by ildiko-neer

New York City Lion by Metal-Bender

There were no passengers… by Hermetic-Wings

…St. Jakup Church…Prague by erhansasmaz

Memories of Dalmatia VIII by Brunilde

Dresden II by ruthsantcortis

Venedig ein Touristentraum by Bildmalerin

Ljubljana – Church of St. Michael by pingallery

RA is watching us by ateist-kleranty

When it’s slipping time down south by Itineraires

PIESKOWA SKALA CASTLE by calyptratus78

Westminster by mcDarius

Descent by Chris Armistead

Grand Central Station 2 by Metal-Bender

MKR in HDR by digitaldao

Lines, curves and angles by YannosGATO

Rivington Pike Tower by Cluke111

late afternoon in Venice II by Kaarmen

on curve by piotruss33

Alamo Square San Francisco by dax000ah

Buda Castle by Zouberi

Going Postal by Cobrajml

Mercedes Benz Museum at Night 02 by EvrWccn

Time goes by by Unel–Photography

Zumberk II by UNexperienced

Impression 1668 by SUDOR

Glass City by erene

Altlerchenfelder Kirche by focusgallery

Hogwarts by shiosVIP

Red Couch by taffmeister

aristocracy II by kaminaru

(rb)


A Dad’s Plea To Developers Of iPad Apps For Children


  

I spend a lot of time buying and testing iPad apps for kids. To be more specific, I lovingly do this for a certain two-year-old girl who is currently on a very successful #OccupyiPad mission in my house. Through extensive observational research, I’ve discovered what works and doesn’t work for my daughter, so I’m going to shamelessly generalize my findings to all children and propose four essential guidelines for developers who work on iPad apps for children.

Affordance Is King

Most apps for children show a bunch of different things on the screen that you can touch to make stuff happen. Cows moo, windows open and close, honey pots need to be collected, etc. But most of these apps give no indication of which elements are interactive and which are not. This usually results in a frantic and frustrating game of whack-a-mole to find the elements that actually do something.

The solution is simple: affordance. Give the elements in question a characteristic that indicates they are touchable. The Disney Puzzle Book apps do this really well. For example, in the Winnie the Pooh Puzzle Book app, the honey pots wiggle around to show the user that they need to touch them in order to collect them.

Pagination Is A Primary Action

Pagination is so important to the enjoyment of most children’s apps, but it is often a quagmire. Almost every app does this differently. The most common methods of pagination are touch-based arrows and swipe-based gestures (indicated by a skeuomorphic curled-up page corner). Both of these interactions are valid solutions, but because swipes can be tricky for tiny fingers and the gestures usually require some precision, the arrow approach is much better for kids.

Also, the entire bottom part of the screen is a hot area and needs to be avoided. Kids constantly touch that part of the tablet by accident, which makes accidental pagination inevitable if the controls are placed there. I like how the Old MacDonald app implements pagination: clearly marked forward and backward arrows at the top of the screen.

The Menu Is A Distant Secondary Action

Speaking of the bottom part of the screen: don’t put any interactive elements in the bottom part of the screen — especially menu actions, which are not important anyway once a child gets going with the app. The number of times I’ve had to stop the car to dismiss a random menu brought on by an accidental touch… well, it’s dangerous. The Mickey Mouse Puzzle Book app is a good example of this frustrating practice:

PlayTales has a clever implementation of the menu action in many of its books. First, the menu button is placed in the top-right corner, out of accidental reach (although the top middle would be better, in keeping with the top-left and top-right pagination mentioned in the previous point).

More importantly, it uses a two-touch method to bring up the menu. The menu icon is semi-transparent in its normal state. One tap removes the transparency, and a second tap brings up the menu. Although not foolproof, it’s an excellent way to avoid accidental taps.

If You Try To Trick My Kid Into Buying Stuff, You’re Dead To Me

I’m looking at you, Talking Tom Cat. A lot of apps do this, but Talking Tom Cat is the absolute worst. The screen is a landmine of carefully placed icons that lead to accidental purchases — not to mention the random animated banner ads that are designed to draw attention away from the app itself. GoDaddy’s dark patterns that try to trick users into buying more domains are one thing, but if you try to use persuasive design on my young daughter, all bets are off. Your app will be deleted, and we’ll never do business again.

Conclusion

Designing apps for children is extremely hard. Not only is quality, age-appropriate content hard to create, but designing the flow and interaction of these apps is made more difficult because designers must refrain from implementing advanced gestures, which would only confuse and frustrate kids (and, by extension, their parents). Yet all apps can and should adhere to certain basics. Hopefully, the four guidelines discussed here can become fixtures of all children’s apps.

(al)


© Rian van der Merwe for Smashing Magazine, 2012.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress