I have seen the shadow of the moon

I'm excited. In the first week of my summer internship at Cooper, I couldn't wait to get my hands on a test project for a PDA system. And when starting on my first team project for a new piece of software, my Cooper mentor, Nick Myers, had to warn others that he was about "to let the lion out of his cage."

To a young graphic designer, the world of screen-based, interactive work is mouth-watering. The relatively new, ever-expanding and extremely relevant world of web, touch screen and software design allows for seemingly limitless visual exploration. Like early nautical explorers (viz., the title of this post), graphic designers must confront various barriers as they reckon with the unknown.

Uncharted Territory

Books, branding and posters have a long and celebrated history in graphic design. But designing for screen-based, interactive products is relatively uncharted territory.

meggs.gif For example, the latest edition of Meggs' History of Graphic Design, considered the authoritative source of graphic design history, doesn't mention "The Digital Revolution" until page 488. (The book ends on page 530).

Say I was designing a book and considering a subtle element: page numbers. Over the past few hundred years, page numbers have seen thousands of different visual treatments. Among these, there are likely a few hundred brilliantly effective ways of guiding a reader through a book.

Now, say I was designing software and considering an important element: buttons. On-screen buttons have been designed since the early days of GUI development, but the degree in which the important element has been explored is miniscule in comparison to the variation of subtle elements of, say, publication design. As a result, only a few combinations of button size, shape and shading are currently used to usher users through the seemingly infinite digital interfaces that exist on the web and elsewhere. Hundreds of solutions that would create a better user experience likely remain undiscovered.

buttons.jpg From top to bottom, a set of companies with very different user goals, but nearly identical solutions: the Nintendo Wii, Apple Leopard OS and Windows Vista. Like fashion, certain styles are going to be dominant, but perhaps, among other things, these buttons could better inform users of what might happen upon clicking them rather than just be generic visual solutions. Better solutions certainly await to be discovered.

Good branding firms sometimes assign clients a set of attributes to guide their visual goals. These adjectives are usually traits like friendly, dependable or knowledgeable (see: enthusiastic and diverse or speed and precision). It's a good process that allows the designer and client to remain on the same page.

Nothing is new about this practice. It's been done for so long that designers are challenged with making unique solutions for the same visual problems that others have faced before. Current fashion, new typefaces, special types of paper and new printing techniques are tools sometimes used to make new solutions to old problems.

fourseasons.jpg Branding firm Siegal+Gale found that at the Four Seasons the golden rule is to "build relationships" and that "guests are not merely attended to; they are cared for and understood." Hence, they designed the luxury hotel's materials with forms and colors that express caring and understanding. (PDF: Siegal+Gale case study)

In creating interactive products, the same experience attribute process is sometimes used by design firms to maintain a client's branding (see: approachable and fun icons). Like in the print world, certain shapes, colors and forms have long been associated with certain experiences.

However, interactive products give graphic designers a new playground. Hover states, links, selected states and other, similar actions are new grounds for discovery. What happens in a knowledgeable hover state? What's a dependable link? We're only just beginning to explore good answers to these relatively uncharted visual problems.

A New World of Typography

Due to its relatively recent inception, screen-based interface design hasn't been explored as extensively as other, older forms of graphic design. Despite the ubiquity of the internet, even screen-specific typefaces like the one this essay is set in are in their infancy.

For hundreds of years typographers have designed type for a wide range of things, including signage, newspapers, magazines and books, but rarely for screen. Relatively few professional attempts, the most well-known being Matthew Carter's Verdana and Georgia in the mid-1990s, have been made to tackle screen-based typography. And new high resolution, small screens on smart phones have opened up even more doors for new discovery.

To have international consistency between online and print materials, one company, IKEA, has even taken the extreme step of switching all its materials to a screen-based typeface, Verdana. IKEA's decision is strange because Verdana was designed for the screen, but the idea of having consistent branding is not. Type families containing separate styles for screen and print uses seem like an inevitable yet rarely explored next step.

In 2010, expanded families for Verdana and Georgia are expected to be released. Although still intended for the screen, the new families reportedly will consider some print use, which will certainly ease some criticism surrounding IKEA's decision to use Verdana. The release will also include more styles, expanding each family from their current four styles (regular, italic, bold and bold italic) to 20 styles (variations of light, regular, semibold, bold and black). While many type families designed for print have long offered a variety of styles, that same choice has not existed in screen-based typography. Multiple weights for Verdana or Georgia may set precedent for a new world of screen-based typography that breaks designers free from the currently rigid set of four styles: regular, bold, italic and bold italic.

There's a lot of talk about services like Typekit and Fontdeck that will soon allow web designers to rent typefaces from foundries. But unfortunately, many of today's popular foundries currently design typography almost exclusively for print. On screen, type designed for print tends to lose its visual quality when set smaller than 16-point or rendered in a gray value. Good typography for the screen remains a relatively new world.

as.jpg This illustration from the Ascender Coporation's website shows how characters un-tuned for the screen are muddled and difficult to read while characters that are designed for screens consider pixel legability and are appropriately tuned or hinted.

Barriers to Discovery

This is an exciting time to be a young graphic designer in the interactive world, but certain barriers seem to be inhibiting new discoveries. Among them, teaching methodologies and platforms to showcase interactive products seem to be significant inhibitors to finding better visual solutions.

Walk into a design school typography class and you'll likely hear about conceptual ideas like spacing and the connotative meaning of letterforms. Walk into a web design class, on the other hand, and you'll likely witness the perfunctory execution of programs like Dreamweaver and Flash.

Even an introductory typography course would never be primarily focused on teaching InDesign, and likewise, interactive classes for designers shouldn't primarily focus on teaching software. Knowing InDesign is a necessary skill, but it's understanding typographic theory that makes designers good typographers. Similarly, understanding what makes a good painting, not understanding paintbrushes, makes a great painter. If interactive courses for graphic designers focused on theories, rather than tools, to designing better interactive products, it would greatly enhance future explorations instead of making graduates produce bland, all-too-familiar work as masters of a particular suite of software.

books.jpg While theory-based books like The Elements of Typographic Style are considered staples of type courses, tool-based books are staples of web design courses.

Unexpected barriers are also faced when platforms created to run interactive experiences don't allow for the implementation of basic visual solutions that have been used by graphic designers for generations. Touch screen hardware, operating systems and browsers still often restrict the use of basic design solutions that have sometimes been in use for hundreds of years.

I recently spent an hour chatting with Firefox developers trying to convince them that their browser should properly display the thin space character. The thin space, used by typesetters long before computers, can enhance the readability between words and typographic elements like ampersands or em dashes, or it can be used to improve spacing between words in oddly fitting lines of justified text. Since kerning is not a real option for body text on the web, a thin space has even more importance in web design.

thinspace.jpg When given the HTML entity for a thin space ( ), Firefox 3.0 for Mac not only displays the thin space incorrectly, but also uses a visually worse and unexpected wider space (Firefox 3.0 also uses its own font-smoothing technique that makes the typeface appear bold).

The thin space works on some browsers in some versions, but did not work on my Mac version of Firefox. At the end of our conversation, the developers conceded that my version of Firefox failed to accurately display the thin space, but maintained that this particular age-old typographic detail, well, didn't matter because they couldn't wrap their minds around what it might be used for.

slimspace.jpg An excerpt from The History of Printing, published in 1855, guiding typesetters about the use of a thin space. It's one element of a wide variety of old visual solutions unavailable for implementation in some cases, inhibiting the discovery of better visual design.

Discussing a valid W3C character with developers of a standards-compliant browser seemed like a good idea with a simple fix, but the thin space is only a smaller tool of a larger and more robust typographic toolkit unavailable in browsers. In an A List Apart article posted earlier this year, The Font Bureau's David Berlow commented on the typographic shortcomings of css and web browsers. Berlow, who has been somewhat vocal about typography on the web, said that type at the CSS Zen Garden is not "treated beyond a fourth-grader’s crayoning abilities" and that he hoped platforms for interactive experiences could aim for at least "the initial capabilities of Adobe Illustrator 1.0," software that was released 22 years ago.

Bon Voyage

Barriers aside, there is a community of people trying to better our visual experiences. In fact, this blog post might be used as an excuse to experiment and find better visual solutions for our users. In the infant world of interactive, screen-based design there is much to explore and discover in creating visually great user experiences. Roar!


Mina Christina
Splendid write-up. I love the anticipation of fonts in 2010.
Something interesting I've noticed in my own line of work is that while many companies used to first define their brand in print and then expand it online as an afterthought, today many companies first define their brand online and then expand it out to print material. The process reversal makes some of your points in "Undiscovered Solutions" quite relevant to my own work.
Something interesting I've noticed in my own line of work is that while many companies used to first define their brand in print and then expand it online as an afterthought, today many companies first define their brand online and then expand it out to print material. The process reversal makes some of your points in "Undiscovered Solutions" quite relevant to my own work.
Monika W
ha ha...love the link to the adobe illustrator 1.0 video at the end!
i'm sick of people saying TYPEKIT WILL CHANGE EVERYTHING. so many of their available fonts are horrible. hope to actually see a "new world" of screen typography one day.
@Ben - Coincidentally, last night I saw an interview with Hot Studio founder Maria Giudice who expressed similar thoughts. In the video, made earlier this year, she says that brands are now being defined on the web first because it's "the first point of contact" and "where all brand communications exist." If this is the case, then discovering formally appropriate interactive solutions on screen with buttons, links, hovers, and other elements is very important to the branding world. All the more reason to be excited as young graphic designer designing for screens! However, I certainly don't have the data or experience to make a sweeping statement that much of branding today is considered for the screen first and then in print. I would guess that this might only be true with companies that do a majority of their business on a screen.
We may not see good "hinted" faces because of the level of difficulty involved in making a good font for screens. A good typeface is excruciatingly difficult to make, a good typeface for the screen adds another tedious process. Carter, as talented as he is, didn't hint Verdana or Georgia. Someone else was hired to do it.
Christopher Murphy
Some great comments, not least your point (one that is often overlooked) that good typography for the screen remains a relatively new world. Typekit, Typotheque's Web Font Service and, soon, Fontdeck certainly hold promise, however, that promise will - as you rightly point out - be in part determined by the quality of typefaces offered that work well on screen. I had the pleasure of a lengthy conversation with Jon Tan(gerine), talking typography, whilst at FOWD Bristol recently and I'm excited to see what Fontdeck will be offering. Based on the conversation, and knowing Jon, I feel confident that Fontdeck's service will be one worth watching. In closing, as an educator teaching web design (or more accurately design delivered via the web - there's a subtle difference) I 100% agree with your comments. We teach principles, not software. All too often web design courses focus on the specifics of software and forget the fundamentals. Big mistake and one you quite rightly flag up as one to be wary of. Again, great post.
I too greatly appreciate this post, and agree that such graphic design fundamentals are an indispensable ingredient in any interaction designer's or even font-end programmer's knowledge foundation. Webs and software, having always been a multidisciplinary endeavor/s, are always (still) at risk of taking on the characteristics of its discipline biased proponents. I believe we must all strive for disciplinary integration. Excuse my pedantry: I would only like to warn against over use, or mis-use, of the word "experience/s". That is, it isn't exactly synonymous with response, reaction, or affect, and those are often more accurate words. I'd say "[media] experiences" and "user experience" are terms already so widely and variously used and mis-used as to have lost most if not all widely agreed meaning (specificity), and even any industry cache, at this point. Just suggesting use of the familiar and specific terms where they fit as well or better than the apparently trendy, if abused, "experiences." I hope your journey of discovery is rich with opportunities to improve the works you encounter for those who will use them. You are being well guided there. I think you will find your ability to listen, and patiently support and influence others, is your greatest "technical" skill of all (the "soft skills" are often the hardest).
Doug LeMoine
@Betsy: I agree, sadly. I admire Typekit's efforts, but if Windows can't appropriately render fonts in any browser, what's the point of implementing an elaborate service around it? (Also, I'm not a huge fan of the font selection at this point, either).
@Abbey - You're absolutely correct. There is a definite need for a wide variety of good screen fonts, however, and I think that will fuel the discovery. After careful selection of the perfect typeface that's distinct and meaningful to use on printed materials, it's sad to see so many organizations have to then resort to using the same, generic, web standard fonts as everyone else. I linked to Lucas Fonts' Corpid in one of the paragraphs above because it's the only professionally-made family available for retail purchase I've ever seen that has different styles to handle print and screen use. Luc(as) de Groot, who also designed Calibri, seems to have taken the logical next step. Does anyone know of any other professional families that include styles for print and screen use? @Christopher - A few years ago, I showed Jon Tan(gerine)'s site to a few other student designers to prove that the web can have great typography. Now his webpage looks a bit dated since others have copied his typographic techniques, but his work has certainly opened my eyes to possibilities on screen. I eagerly look forward to hearing more about Fontdeck!
Bill C
As a web developer of over 15 years, I'm quite glad to see the availability of web fonts - despite the fact that I'm sure some of my clients will find an excuse to abuse them. To date I've only used them on two small sites, and I agree that the selection is somewhat limited at present, but it's good to see forward movement and I expect to be using them more and more as time goes on.
nitrocellulose cotton
Nitrocellulose from Hebei Jinwei Chemical Co., Limited With the combination of durability, compatibility and unsurpassed drying speed. nitrocellulose cotton http://www.nitrocellulosejw.com/Nitrocellulose/product_2.html

Post a comment

We’re trying to advance the conversation, and we trust that you will, too. We’d rather not moderate, but we will remove any comments that are blatantly inflammatory or inappropriate. Let it fly, but keep it clean. Thanks.

Post this comment