Nice Web Type

Yours truly, elsewhere:

• Issue six of 8 Faces is available today, and it looks beautiful. I wrote an article about upgrading from free Edge Web Fonts to better Typekit alternatives (like, try JAF Bernini Sans in place of Open Sans).
• The A List Apart blog has been fantastic since its inception earlier this year. Hope I don’t mess that up, but here goes! I wrote about Magic Numbers and Progressive Enhancement. Same kind of thing I post here.
• Narrated a slice of my life at The Pastry Box Project, wherein I set goals and choke down free coffee.

I wrote a short book about combining typefaces, and it’s available to download today from Five Simple Steps. You can buy it for less than a cup of fancy coffee. And if you do buy it, I hope you find it useful. I worked hard to make it worth reading and referencing.

Advice about combining typefaces is hard to give, because success depends on many factors — the text, your design goals, your audience, and reader contexts, as well as the type. It takes scrutiny and empathy and wisdom, and honing those qualities takes time and practice.

So yes, the book dives into details about texture, rhythm, proportion, and shape that contribute to compatibility among typefaces; however, it also outlines a process for efficient practice, points to many relevant resources that are worth checking out, and provides a series of brief critiques to help you make sense of the many conditions that make for successful type combinations.

“Pocket Guide” is a great name for this kind of short book.

Thanks to the folks at Five Simple Steps for offering me this opportunity, and for working hard to turn my manuscript into a finished product. Thanks to Stephen Coles for his editing contributions. Thanks to Mandy Brown and Bryan Mason for their advice. And finally, thanks to my wife, Eileen, for her support.

This is my first writing for sale — my first anything for sale. It’s exciting, but also terrifying, to put a price (even a small price) on my efforts. But if folks seem to like it, maybe I’ll do more.

Billy Whited for Typekit:

In user interfaces, it’s common to encounter screens that are nothing more, typographically speaking, than a collection of singular words displayed in isolation from one another. Examples of this abound: web forms, navigation menus, control panels, etc. This is a key difference between primarily content-driven web sites and task-oriented web applications. So, why does it matter?

Fascinating.

Patric King:

I actually don’t think makers of design tools have considered that there are web-native designers now who literally cannot use traditional (read: Adobe) tools to make their design work in ways that they’ve always been taught. There’s a different mindset for designing objects on the web that should influence how they’re created for print, but can’t — because there just aren’t any tools bridging the two media.

Trent Walton with some great advice about getting started with responsive web design. I’m glad Trent included this part about content-based breakpoints:

It’s good to plan, design, and test with all sorts of devices in mind, but it’s become standard to let media queried breakpoints be defined by content/layout rather than any specific device. Whenever things don’t fit or hierarchy breaks, add a media query.

See also: ‘There is no breakpoint’.

Viljami Salminen:

About a year ago I wrote Responsive Workflow article describing my responsive design process. [… Now,] I’m going to open the curtain and explain a new phase which I would today add to my year old workflow drawing. I think it might just be the most important phase in the whole design process. I call it the “Typography Prototyping Phase.”

Whether or not it’s the most important part of the process is a matter of personal opinion, of course, but one thing is certain: typesetting should be recognized as a critical and distinct part of successful responsive design workflows. Viljami gets it.

Ben Callahan:

I tried once to really dig into a site’s analytics as a guide for what breakpoints I should use. Of course, that didn’t work. The numbers I determined based on analytics didn’t line up with the layouts where my content and design weren’t working well together, so I ditched that idea and just started putting breakpoints where the design and content dictated.

Ben goes on to champion the use of chunk-specific media queries, rather than layout-wide “breakpoints”:

By placing our media queries inline, immediately following the smallest styles, we can group styles by the components they impact and not worry about following a specific set of breakpoints.

My new talk about fonts, the web, typesetting, layout, the tools we use, the information we gather, and the value of graphic design. Watch the video from Ready to Inspire, and let’s chat at your favorite conference.

Dean Allen for A List Apart, way back in 2001:

Designers will benefit from [approaching] their work now and again as being written rather than assembled.

Later in the article, he recounts a typography class he taught:

To the students, text had been handled as a graphic element, to be shifted within grids, manipulated and filtered like a photo, to be squinted at and scrutinized upon critique but never apparently to be read. “But editors take care of text, we just have to design it” was the response when I’d insist that designers learn about editorial style and usage, which always made me laugh.

Reading design helps you make it to measure.

Elliot Jay Stocks, back in 2011:

For far too long, many of us (and I include myself in this group) have been guilty of focusing on decoration: the colours and the shapes and the textures. We’ve been neglecting the details. And I’m not talking about those pixel-perfect buttons with ever-so-subtle gradients and inline strokes; we can all do that. I’m talking about stripping away all the cruft and getting back to good, solid design principles, like well-formed grids and decent measures and incremental leading and appropriately paired typefaces.

See also: The Trend Against Skeuomorphic Textures and Effects in User Interface Design.