Nice Web Type

Karen McGrane:

If you believe that design is important, if you want to provide a great experience across platforms, if you want to provide the ideal experience for whatever platform or device you are creating an experience for, you need a clean, well-structured base of content to work from.

Content is a design problem.

Thank you to all who participated in October’s three Type Set Match events. Combined, the matches saw 55 rebounds, many accompanied by explanations about why specific typefaces were used. All participants carried an attitude of openness and willingness to learn more about typography, and the resulting discussions will continue to bear fruit.

The text used in these matches came from the third issue of Contents Magazine. Designers should pay attention to this publication for many reasons, one of which is that in many cases our influence should go where content goes; as evidenced by these Type Set Match events alone, typesetting can affect the tone and meaning of words. Graphic design is valuable.

I’m happy that so many participants chose, as I did, to compose their volleys with Typecast. Now that Typecast is in public beta, everyone can sign up to compare and combine typefaces, test rendering, and sketch with HTML and CSS — all in the browser.

Dribbble was a wonderful host for our matches. This service continues to foster meaningful connections among designers, a community of camaraderie, and a fun experience from start to finish. Several Type Set Match participants had never used Dribbble before, and were thrilled to try it.

That’s all folks. I enjoyed coordinating these three Type Set Match events, and watching such talented people do, and share, their work and reasoning. Type Set Match has all the potential I thought it would, and more, and I have ideas about how it can be even better. Maybe I’ll do it again some time.

Chris Armstrong for A List Apart:

Designing from the content out means finding a constant in your content – be it the ideal measure of a paragraph or the dimensions of an ad unit – and building your grid out from there to fill the space available.

People sometimes ask me why Modular Scale has an important number field. That’s why. Font size is also a fine constant (and my choice) for building grids.

Fluid layouts are often compared to water, but water isn’t always fluid.

Some solid (heh) analogies here, and Chris backs them up with examples. I like how he uses dashed borders to indicate elements that are in a flexible state, and the finished example in which components flex and respond individually (for instance, body text set in ems scales until it reaches a comfortable maximum size, at which point it is sized with rems and effectively capped).

Follow Chris @Armstrong on Twitter.

Today I started a little project called Type Set Match. Far less ambitious, organized, and sophisticated than Coudal Partners’ Layer Tennis, but in the same vein of create-and-critique-stuff-on-Fridays, players (any Dribbble users who wish to participate) all typeset the same text and share their work.

It’s a fun exercise, a chance to discover designers, a chance to learn something about typography through both practice and critique, a good way to try typefaces that you haven’t tried or don’t always get to use, and a great excuse to read something smart (reading the excerpted article in full often makes your typography more resonant with the words).

• First match: http://drbl.in/fupD
• Second match: http://drbl.in/fxWG
• Third match: http://drbl.in/fBSM
• Thanks for playing! Epilogue.

How to play

1. Copy text from the first volley of each match
2. Typeset the text however you like — as an image, in HTML/CSS, heck, print it out and take a photo
3. Rebound the first volley on Dribbble* and talk about your choices
4. “Like” any shots you like, and talk about why you like them

* If you don’t have a Dribbble account, that’s okay. Typeset something and show it to me. I’ll see what I can do to get you a Dribbble invite.

That’s it!

For a limited time

I will initiate three Type Set Match events, one each on October 5 (today), October 12, and October 19. If folks enjoy it, then we’ll see what happens. In any case, it’ll be a fun experiment for me. I’ve wanted to try something like this for a long time.

Special thanks to Josh Brewer, Sean McBride, and Mandy Brown, who entertained my early ideas about what Type Set Match could be. My chats with these folks are consistently awesome, and I may revisit those specific ideas in the future.

Erik Spiekermann:

I’ve been saying this for years (if not decades) and eventually it’s going to be true: it won’t make any difference whether type is on paper or screens.

The web isn’t a new medium, it’s the evolution of all media.

Ryan Singer:

Jobs may have a beginning, a middle, and an end. This is a useful segmentation. It gives the designer a way to think at the same time about what the user is trying to do and what the interface should look like at each phase of the job. Thus ‘jobs’ as units of design extend in the dimension of the screen as pixels and also extend through the dimension of time as processes. They are more fundamental than both.

Hence, the importance of style guides; their prescription persists in space and time. (Via Allen Tan.)

Just felt like sharing a few links today. These are tools I routinely use. Eventually they’ll make their way into the main list of Resources.

CodeKit

I am nearly ignorant when it comes to CSS preprocessing, but CodeKit is a no-brainer. It lets me dabble in Sass and LESS without needing to touch the terminal, and refreshes my browser window whenever I make changes to my working files. Runs in the menu bar, and I never notice it — it’s just an instant improvement to my workflow.

Adobe Shadow

Mirrors my active browser window onto nearby devices, simultaneously. To design with Shadow running feels like magic. I can’t even remember, anymore, having to type URLs into each device I need to test on and refresh them all individually. This little extension/app is integral to practicing web design.

Little Ipsum

Small menu bar app for generating lorem ipsum, with a delightful interface for choosing from a variety of text lengths.

Divvy

I use Divvy constantly for juxtaposing code and visuals, work and reference, to-do lists and email, you name it. Maybe I’m a nerd about making windows line up, but quickly snapping things into place eases my mind.

xScope

This gem from The Iconfactory is exactly what I need for specific jobs like sizing screenshots (with frames) or snagging colors from a photo (with the loupe). Indispensable, and there are features I haven’t even used yet.

Bartender

I heard about this yesterday while listening to Systematic for the first time, and it’s the reason I decided to share these links today. The tools I mentioned above all live in my Mac’s menu bar (or should — I’m looking at you, Shadow UPDATE: Woo! Shadow does run in the menu bar, as of Labs Release 4), and Bartender is like a folder for menu bar icons. Been using the demo for less than a day, and it’s fantastic.

From a short essay by yours truly, in 8 Faces No. 5:

Looking at adjacent characters in Rooney Regular, like the “up” in “backup sent,” says a lot about the face’s overall handling of white space. The spaces inside these letters are bigger than the space between them, which gives Rooney a youthful, familiar feel and helps us perceive the letters as a word shape. Rooney’s athletic letterforms give its white space energy, as an athlete in motion stirs the air.

The latest issue of 8 Faces is on sale now. Exciting lineup.

In case it wasn’t obvious, I can’t get enough of Allen Tan’s Made to Measure. He does such a great job of articulating ideas I have almost had for months. Remember when I was looking for a name for groups of elements? That’s because I wanted to argue for the primacy of those clusters (or whatever you call them) in web composition — the concept of “a layout” is less important.

Allen writes:

Articles are made of many elements with different visual treatments: headlines, ledes, body text, photos, pull quotes — instead of providing a specific template, designers could supply ranges and options for different elements, along with guidelines on using them.

No templates? Enter, principles:

Design is about establishing a set of relationships between elements. By codifying these relationships as a set of principles instead of a single, stand-alone template, we make it possible for other designers to extend our work (per article) while remaining faithful to its core ideas.

And of course thinking in terms of individual elements (or clusters of elements) is instructive for designing responsively:

Many proponents of responsive web design say that the web should be considered a single platform, not divided into mobile web, tablet web, and desktop web. Unfortunately, many responsive designs use precisely those three breakpoints. I suspect this is partly because it’s easier to manage, and partly because we’re designing for abstract levels of content. I’d much rather see responsive page designs that shift on the needs of individual pieces of content, using media queries as needed when an element’s design breaks.

Now, please excuse me while I tape a @tealtan avatar to my office wall so I can high-five it until the folks over in the next office complain about the noise.

UPDATE: Related, I am very happy that Sara Wachter-Boettcher is guiding us as Editor-in-chief at A List Apart. Because chunks and the whole!

Allen Tan for Contents Magazine:

The popularity of apps like Instapaper, Readability, and Flipboard have shown readers’ hunger for good reading experiences by providing a stripped down, readable view, but that should only be a baseline for design. Because publishers intimately understand their material, they can put out content-specific design that is beautiful in addition to readable, with a number of visual entry points that turn skimmers into immersed readers, and that so accentuate the unique facets of their content that readers will prefer to read on the original websites and not elsewhere.

I’ve said it before, and I’ll say it again: the value of graphic design is being threatened right now. This article of Allen’s provides a brilliant concept (tailoring) that can help us fight for that value, along with very thoughtful guidelines and examples.