DesignAday

In the Details: I’s & l’s

Because I do a lot of work for the military, I have two computers at my desk. One is a MacBook Pro, which is my primary machine and connects to the internet. The other is a Mac Mini that is connected to our secure network, which doesn’t touch the internet. I have copies of all of my software tools installed on both machines. Having just upgraded to Adobe CS6, today I took the time to jump through the hoops required to install it on the Mini.

Adobe does provide offline activation for situations just like mine. When you launch an installed application the first time, it tries to connect to the internet. When it can’t, it provides an option for offline activation. It generates a long activation code made up of numbers and both upper and lowercase letters. You must then enter the code into Adobe’s website along with the serial number. Then, the website provides you with a response code of the same length and makeup that must be entered on the disconnected computer. The code is displayed in a sans serif typeface. The capital “I” and the lowercase “l” look exactly the same. I had one of these characters in the first code and two in the second. I literally had to try each potential combination to figure out what the correct characters were.

Codes such as this should not include capital i’s, lowercase L’s, capital O’s or zeros. That’s advice for the programmer implementing the code generator. Here’s advice for the designer specifying the stylesheet. Serif faces will do a much better job distinguishing between these characters.

beRating

Here’s a simple question. Why is the MPAA rating screen shown before every film so poorly designed? White text with a black shadow creates enough contrast on a green background to vibrate. The text is in ALL CAPS, making it more difficult to read. Then there is the small, compressed type shoe-horned into a thick-bordered table without enough padding. Everything is center-aligned, but due to the table layout, some of it is offset. The only positive is that the most important information is bigger and bolder, clearly standing out from the rest.

It’s Away!

There are only a couple days left until the deadline for Interaction 13 submissions. I just got mine in. In addition to my talk, “Working with Developers for Fun and Profit”, I achieved my goal of submitting a workshop. In fact, I submitted two. Hopefully, one or the other will be selected. With my teaching experience, I do believe that conference workshops would be an excellent fit for me.

Introduction to Typography

Typography is one of the foundations of design. It should be part of the fundamental training of a designer, whether pursuing Graphic Design, Interaction Design, Industrial Design, Information Design, or Service Design. Unfortunately, due to the limitations of technology, especially on the web, typography was given short shrift. Designer’s control of type was hamstrung, so the importance of learning the finer points of working with type diminished. A large percentage of Interaction Designers don’t have a visual design background and have not been exposed to typographic training.

Now, with the advent of web fonts and services that provide them, typography on the web is seeing a resurgence. CSS 3 provides fine control of type, making it, once again, a powerful tool in the hands of those that know how to wield it. We are the caretakers of an art that has been under development since 3200 BC (cuneiform)—the very architecture of visual communication. As such, it is our responsibility to become proficient in the use of type as a method of communication, a means of expression, and an element of usability.

Intended primarily for typographic beginners, the goal of this workshop is to:

• Provide a basic vocabulary with which to discuss typography
• Give a historical overview of typographic evolution
• Instill a foundational understanding of how type works in print and on screen
• Demonstrate the implementation of type with contemporary web technology
• Elicit an appreciation of, and passion for, well-executed typography

Sitting in the Driver’s Seat: creating production-ready CSS

CSS 3 has handed the keys back to designers. With a syntax and structure that speaks our language and a fine-grained level of control, it empowers designers to not only prototype in the actual medium, but to contribute production-ready code. The days of pointing at the screen over the developer’s shoulder and trying to explain how something needs to shift three pixels are over. In fact, much of the JavaScript currently employed for simple UI behaviors can be replaced with well-architected styles. Take the driver’s seat, and make the CSS your UI specification document.

This workshop is intended for intermediate designers interested in gaining more control over their team’s final product. As a participant, you will:

• Familiarize yourself with the tools you’ll need to integrate with your development team.
• Learn how Object Oriented CSS (OOCSS) can lead to cleaner, more maintainable code.
• Discover how to replace heavy-handed, inefficient JavaScript with CSS-driven behavior.
• Get started on your own library of CSS components.

Designer’s Toolbelt: Type Connection

I’ve found that one of the trickier typographical concepts to teach is the proper selection of multiple typefaces for use within a design. That’s where Aura Seltzer’s Type Connection comes in.

Type Connection is a game that helps you learn how to pair typefaces.

Start by choosing a typeface to pair. Like a conventional dating website, Type Connection presents you with potential “dates” for each main character—without the misleading profile photos and commitment-phobes. The game features well-known, workhorse typefaces and portrays each as a character searching for love. You are the matchmaker. You decide what kind of match to look for by choosing among several strategies for combining typefaces. Along the way, you explore typographic terminology, type history, and more. By playing Type Connection, you deepen your own connection with type.

Type Connection is Aura’s MFA thesis project. Exquisitely designed and crafted, the site is a great example of education through gaming. And if your are really interested in type, make sure you check out her resources page.

This is great work. I’d say she deserves to graduate.

Designer’s Toolbelt: Font Dragr

Font Dragr is a nifty little web utility that allows you to test fonts for use on the web. As described on their website:

font dragr allows you to easily test custom fonts, through the @font-face at-rule, without the need for any CSS coding or knowledge of CSS coding. All you need to do is drag and drop.

It alleviates the cumbersome nature of testing custom fonts and allows you to quickly and easily load in a font, play around with it and see if it’s the right one for you.

You can literally drag a font file (ttf, otf, or woff) right into the browser window. The site adds the font to a list on the page and changes the text on the page to display using that font—slick as a whistle.

Even better, they provide a bookmarklet that will add the capability to any page you visit, so you can test fonts against your own site design with live content. It even allows you to target specific elements.

Unfortunately, it doesn’t seem to work in Safari. I used it in Firefox, and it claims to work in Chrome.

That’s My Daughter

My wife attended a meeting this evening and had my youngest daughter, Genevieve, with her. Her iPhone’s battery was running rather low, so Genevieve couldn’t play with it. All she had was a sheet of paper that was handed out at the meeting and a pencil. She proceeded to occupy herself during the meeting by designing a font inspired by the exit sign over the door. As she later explained to her mother, she wanted to make an alphabet with blocky letters. “See? They kind of look like the exit sign.”

I’m so proud.

Typekit Tribulations

One of my weekend accomplishments was my first implementation using Typekit. It was easy enough to do, and overall, I am pleased with the results. However, it is far from perfect. For one, my local working files no longer look exactly like they are rendered from the web server. Typekit will only apply fonts to pages served from the registered domain. I have the same font (Adobe Garamond Pro) I’m using online installed on my machine, but the difference in rendering is significant. I can live with that.

The second issue is that I’m using the free “trial” plan, as I’m building this site for my church. While $25 a year isn’t a bad price, it is unnecessary for a non-profit. Understandably, the trial plan requires the display of a tiny badge. The service injects the code directly into each page, sticking the badge in the bottom-right corner of the page. It’s done with inline styles, so I have no control over it. I can’t move it or change its color to better fit my site design. Of course, if they allowed the customer any control over the badge, I would be able to hide it, so again, that’s completely understandable. I can live with that, too.

What I find most troubling is the differences in font rendering between browsers. This is, as far as I can tell, not the fault of Typekit, but completely due to the different methods browsers use to anti-alias type. The only noticeable difference I’m seeing is with light text on a dark background. The following image compares rendering in five different browsers.

Note that Safari’s rendering actually looked like Firefox and Opera until I added a style to my CSS that changed the way Safari smoothes text. So far, I haven’t found a way to get Firefox or Opera to slim down the text. It looks more like a semi-bold, but note that the letters are not taking up any more horizontal width—there’s just less whitespace between the glyphs. For sake of comparison, the browser names are included using the same font at the same size, rendered by Photoshop.

I suppose I’ll have to live with this issue as well. I guess cross-browser parity truly is a pipe dream.

Designer’s Toolbelt: Explorations in Typography

Carolina de Bartolo and Erik Spiekermann have a new book out titled Explorations in Typography / Mastering the Art of Fine Typesetting. It appears to be a very good book, and given the authors, that’s not surprising. But, I haven’t read the book yet, so I can’t review it. What I want to tell you about is the website for the book, which was designed and developed by Gregory Cadars.

The site is an outstanding study of typography for the web. It provides a sample of Spiekermann’s writing in a grid-based layout that resembles the design of the book. Rather than freely reflowing as the window resizes, the number of columns and column widths adjust to the width of the window based on the fixed grid. In other words, as the width of the window shrinks, the layout changes from two columns spanning 3 grid columns, to two 2-span columns, to one 3-span column, to one 2-span column. On the far right is a UI with which you may change the size, leading, and alignment. You can also turn hyphenation on and off or change it to “mock text”, replacing the lines of text with gray bars. You are able to select from 12 different typefaces that are rendered using Typekit. Finally, you can select 7 different explorations, which are basically presets of the settings I just listed. The explorations are: Indent, Exdent, Extra Leading, Graphic Element, Rule, Initial Capital, and Drop Capital. Each exploration provides annotations displayed by hovering over the indicators within the content. 

Certainly, there is good information here about typographic layout, but perhaps even more useful is inspecting the source to see how Gregory implemented such an elegant and flexible layout.

It’s like nothing I want to see again.

Bose is a company that is known for quality both in the technical aspects of their products and the industrial design. In my experience, they also have very good customer service. I’m even more disappointed than usual, then, that their typography is so bad. This email advertisement is nothing but type. There is no excuse for the designer’s sloppiness.

I’m seeing “dumb” quotes and apostrophes used much more often in professionally produced content than I did even two years ago. I expect it is due in large part to their prevalence on the web where they are not automatically corrected in software. It’s a trend that I’m afraid will continue to get worse unless more computer applications take it upon themselves to address it automatically. People assume primes are okay because that’s what they have become accustomed to seeing.