Jason Santa Maria's Blog, page 6

Baseline Grids on the Web

This is a response to a thread on Branch. I’m posting it here because it ended up longer than I thought, and overshot Branch’s character limit for replies.

This is very much my personal take on baseline grids as they apply the web. I’m not trying to convince anyone; these are just the reasons I’m not a fan of them on the web. However, I am very much in support of them in print design (see below).

Some of my problems with baseline grids on the web are merely personal annoyances, others are technical issues. For example:

First off, just as using a grid or layout does not a good design make, so too for baseline grids. Grids are means for organization and improvisation, not a formula for success.

It’s incredibly difficult to maintain a baseline grid in a medium as inconsistent and fluid as a web page. Images, form elements, rendering differences between browsers and platforms: these can all throw a baseline grid out of phase. This only gets worse when you’re setting up a design for someone else to implement or maintain, as we often do in client work. In other words, if you’re not intimately familiar with the intricacies of a given grid system, it’s incredibly easy to mess it up.

Desktop apps like InDesign offer configurable settings, allowing us to force text back into phase as it’s thrown off by different elements. Unfortunately, we don’t have equivalent control on the web. CSS just doesn’t have the affordances for that kind of complexity right now.

The imposed rhythm of a baseline grid is only apparent under certain circumstances. This is due to both the variable viewport size (people might not have their window open very large), and also to what the specific content is being displayed. Baseline grids are most apparent in running text, which may not matter for many sites. While many sites may have articles full of running text, they also have many more elements (navigation bars, logos, forms, etc) interspersed with the text. That’s in stark contrast to the running text found in books or newspapers, where there are few interruptions within the text that are unrelated to the text itself.

Ratios and baselines grids can be too rigid for the inherently flexible nature of the web. Just because something works at one size doesn’t mean the same ratio will be appropriate at larger or smaller sizes. Type is such a finicky beast that it needs to be judged optically first, not by the numbers.

Baseline grids are, ultimately, most useful in print. Print is a fixed medium where rhythm can have a powerful effect: after all, you can see a piece’s full boundaries. But beyond that, the grid’s most useful traits happen on paper. As light shines through paper when you are reading, the paper’s translucency reveals a ghost of the type from the reverse side of the page. Those lines need to adhere to the same baseline grid so that the baselines are in the same spot. If the baselines were misaligned, it would be very distracting to the reading process.

Again, these issues make baseline grids on the web a tough sell for me. If I’m going to use them, I want them to improve the design–but I also want to make sure maintaining them doesn’t create a ton of frustration.

Beautiful Bitmaps

The wonderful folks over at UPPERCASE Magazine invited me to participate in a fun typographic project called “Beautiful Bitmaps” for their latest issue:

For issue 15, we invited 26 typographers, designers and illustrators to make beautiful bitmaps by taking this vestigial part of digital type—the bitmap—and making it into something to be newly appreciated.

Each person was assigned a letter. I was given the letter “b” to reinterpret, and immediately thought of Mr. John Baskerville. Baskerville is responsible for many influential letterforms, but he also pioneered new techniques in printing, paper, and ink-making. He developed inks that were darker and richer than those in use by any of his contemporaries in the mid-18th century. And with that ink, Baskerville’s type came alive.

The idea came together pretty quickly: big ink drops on paper and a quick photo before they all dried. Here’s a photo from the shoot I set up in my kitchen:

And the final result of my letter:

All of the results are really fun, and are available to buy as prints (from very small to very large). A portion of proceeds from Beautiful Bitmaps will go to creating an UPPERCASE scholarship fund to assist a reader in pursuing education in design, illustration, typography or craft. I particulalry love Grant Hutchinson’s and Erik Marinovich’s letters.

If you happen to be around Calgary, all of the pieces will be on exhibition at UPPERCASE starting on October 4.

Off Book, The Art of Web Design

Look ma, I’m on PBS! Or at least the PBS website. A couple weeks back I was asked to be interviewed for a web design themed addition to PBS’ awesome Off Book documentary series.

I’m joined by the wonderful Mr. Jeffrey Zeldman and Miss Whitney Hess where we tackle subjects from the history of web design and user experience to aesthetics and what all those things mean to the web from here on out.

Despite being all hopped up on allergy medicine, I manage to say a couple of smart sounding things. Thanks to the PBS crew for the opportunity!

The Off Book series has produced some really great videos, including one of my favorites on typography. You can find all of them on the Off Book site or YouTube.

Stealing Sheep

When I read this Designer Spotlight on type designer Frederic Goudy it made me remember again just how much I like him. It’s not because he made great type — he did, with well over 100 typefaces to his name including Goudy Old Style. And it’s not because this made him more prolific than most of his contemporaries, and the third most type designer in American history.

Those things are more than enough to make me like the guy, but what made me a Goudy superfan is that he did all this and more after he was 40 years old. Before that he busied himself keeping books for a realtor in Chicago.

He didn’t start making type seriously until after he was 40, and despite being a lover of lettering and appreciator of type, was pretty new to the craft of actually making type. As Popular Science put it in this 1942 article:

During the next 36 years, starting almost from scratch at an age when most men are permanently set in their chosen vocations, he cut 113 fonts of type, thereby creating more usable faces than did the seven greatest inventors of type and books, from Gutenberg to Garamond.

Whenever I hear people talking about it being too late to learn a new skill, or when I feel like something might be out of reach for me, I think of what Goudy accomplished “when most men are permanently set in the chosen vocations.” I admire the hell out of that and am constantly inspired by it whenever I’m reminded of him.

There’s a great silent short film from the 1930s called The Creation of a Printing Type from the Design to The Print that shows Goudy doing what it says on the tin. I can’t find it online anymore, but it is included on the DVD of the also excellent Making Faces documentary on Jim Rimmer.

For more on Goudy, Luc Devroye’s biography page or this short piece on process and criticism by Steven Heller are good places to start, or pick up most any book on type history.

Symbolset

Here’s a new take on icon fonts for the web: Symbolset. Symbolsets are semantic symbol fonts that replace words with icons via OpenType ligature support. For instance, a word like “cart” will be replaced by an icon of a shopping cart. The text remains intact under the hood because it’s in your markup, but browsers that support OpenType features will use the icon instead. You can play with a live demo over at the site to see what I mean.

This is a great bit of progressive enhancement to try out that’s not only semantic but inherently accessible. Symbolset is lovingly made by some of our Studiomates at Oak, and they have plans to release new sets in different styles and provide font hosting in the future.

On a side note, these are some really tightly designed icons. I’ve tried lots of vector icon libraries—I find them useful for quick comping or starting points for creating new icons. Many can be a little sloppy, either not optimized for whole number sizing or full of stray vector work. But, Symbolset icons are solidly handcrafted to work at a variety of common sizes.

Right now you can pick up the Standard and Social sets for a steal (complete with web-ready versions for you to use on your site), and I highly recommend them.

Pixar Story Rules

Pixar story artist Emma Coats has tweeted a series of “story basics” over the past month and a half — guidelines that she learned from her more senior colleagues on how to create appealing stories.

The whole list is great, and easily applicable to any kind of creative pursuit, not just storytelling. Though, that’s what most creative pursuits boil down to anyway; telling a story. These ones below really grabbed me because I see them popping up in my own work:

#8: Finish your story, let go even if it’s not perfect. In an ideal world you have both, but move on. Do better next time.

#11: Putting it on paper lets you start fixing it. If it stays in your head, a perfect idea, you’ll never share it with anyone.

#17: No work is ever wasted. If it’s not working, let go and move on - it’ll come back around to be useful later.

Hillman

Hillman Curtis, artist, designer, filmmaker, Brooklynite, bicyclist, friend, and explorer passed away last week at the young age of 51. I put off writing about him because I couldn’t find the words. Everything I would try to write felt so insignificant for such a significant man. Thankfully, as is usually the case, I found my words among friends. The folks over at Happy Cog have collected some thoughts on Hillman and invited a few of us staff alumni to share too. Below is my contribution:

I followed Hillman’s work when I was first getting started in design. He stood out as a voice and style all his own; you could plainly see that this guy was in a whole different class. And after I had read his stunning book, MTIV: Process, Inspiration and Practice for the New Media Designer, I wanted to be just like him. If not for Hillman’s work, I wouldn’t be the designer I am today.

Later when I moved to NY I ended up living in the same neighborhood as Hillman. I’m honored to have counted myself among his friends, and further to have had the opportunity to collaborate on a few of his projects. I always looked forward to running into him on the street and talking at length about bikes and cameras and what we were each obsessed with at that moment. He was generous with his time and endlessly curious about bringing beauty to the world.

His influence will be felt for many years to come. I didn’t get to know him half as much as I wish, but even now I look up to him as a creative force, an inspiration, and as kind-hearted a guy as they come. He will be missed.

More on Hillman

The New York Times has a great piece on Hillman, and many individuals shared stories online too. If you’ve never seen it, or if you haven’t seen it in some time, please do have a look at Hillman’s work. This film is a great place to start.

Design Is a Job, by Mike Monteiro

I’m very excited for our latest release from A Book Apart available today, Mike Monteiro’s Design Is a Job. I’ve been working in design a while now and good handbooks on how to do it right are few and far between.

Years ago, I read Norman Potter’s What Is a Designer, a thin yet surprisingly dense book that attempts to quantify this dear profession. There’s truth to be found there, but the language is terse. Perhaps it’s an effort to dissuade all but the most brave; if you get to the end and you still want to be a designer, you may have earned it. This industry can beat you down and offer little reprieve, and Potter asks that you take it on the chin and ask for more. If I’d read it when I was still in design school, I might have changed my major.

Thankfully, Mike’s book takes a different path. Rather than trying to scare you off, it nudges you forward and says “I’ve got your back.” From the book’s introduction:

So I wrote you a book. It has a spine and by the time you’re done reading so will you.

Our reviewers who’ve read it remarked they wish they’d had this book before starting out. I gladly count myself among them, but its impact is bigger than that. Mike provides solid advice without attempting to chart a mythical single course that works every time. He speaks from experience, but doesn’t preach. He lays out what’s worked and what hasn’t for him and what he’s learned along the way.

If you’re smart, you can see how these lessons apply to doing business on your own or with others, but also how damn easily these things extend themselves to dealing with other humans in general. And it really doesn’t matter whether you’re a designer or not, what’s laid out here is universal.

Books like this are rare, people don’t typically talk about how they do business. When they do, it’s usually a snoozefest or some sort of smarmy business book. This is practical, honest, earnest, and from the gut.

You can preview a chapter from the book over at A List Apart, or see the talk that started it all, Mike Monteiro’s “Fuck You, Pay Me.”

I do wish I had this book when I started out, but hell, I’ve got it now and I’ve got the spine to show for it. Get your spine today.

Comic Books on the iPad

A page from Brian Clevinger and Scott Wegener’s awesome Atomic Robo.

I’ve been reading comic books since I was a kid, and now the new iPad has quickly become my primary means for reading them. Comics are one of the few printed formats whose interaction may have actually improved (or at the least didn’t diminish) when they moved to the iPad.

The de facto standard for digital comics is the app Comixology — whose technology is also licensed by standalone apps from the big publishers. It’s available for the iPhone and iPad (plus Android and Kindle Fire, but I haven’t tried those). Panelfly is another app that’s been around for a while, but the newly teased interface on the site is only available on the Galaxy Tab (the one in the iOS App Store is still the old interface), and they’ve been largely silent about when the release might happen.

Regardless, Comixology seems to have the lionshare of content from all the big publishers, with many titles being released the same day as print (like The Walking Dead).

With the new iPad’s crazy screen, reading a fully zoomed-out page is now comfortable because all of the text is crisp and readable. The interface also provides a smart panel-by-panel zoom that can be great for some books. This view can be fun because you actually get surprised when the story unfolds (rather than seeing something you haven’t read yet out of the corner of your eye).

Moar Better

Comixology may be the best comics app out there, but there’s always room for improvement. Some of the typical interactions I’m used to in other services leave me wanting with Comixology. It has the potential to be even more awesome than it is now, and these are a few of my humble desires from it in the future:

Better relevance: Surfacing relevant titles based on my tastes or purchases would be really helpful for discovery. The current system is highly focused on what’s new, but there are loads of great titles from the past waiting to be discovered.
Better alerts: The current system uses the iOS notifications to alert you (if you opted into alerts for a particular title), but these are easily missed or dismissed by mistake. I’d love to be able to have a location to keep track of these in the app so that I can act on them at my leisure. Also, the ability to opt into alerts for not just titles, but anything new from writers, artists, characters, and more.
Wishlists: Sometimes you see stuff you don’t want to buy right now.
Friends and what they’re reading: Comics have always been a very social thing for me. I read some, talk about them with others, and we share mutual recommendations for other comics.
User lists: I’d love to curate my favorite comics and storylines, or even stories based around themes into lists. And I’d really love to see other users’ lists of the same. Just think, “Best origin stories”, “Best one-shots”, and more.
Lending library: It’s probably really difficult, for both technical and legal reasons, but like I said above, comics can be really social. We started a comics club in the studio for just this purpose where we could lend each other stuff we liked. I’d even pay a monthly subscription fee to offset things.

Most of these things are straightforward patterns we’ve seen in services for years now. I don’t mean to belittle the effort it would take to make them, I just mean we may not need to reinvent the wheel either.

Wither Comic Book Stores?

I hate the idea of taking money away from the local comic shop. But then again, my local comic shop already closed a year ago, while I was still a frequent patron.

If a particular book is important to me, or leaves a lasting impression, I will still buy it in print. If for no other reason than to keep it closer to me for years to come.

But the advent of reading more comics on the iPad is saving my already overloaded bookshelves. I’m buying more than I did when I only bought in print (which isn’t bad for the industry), but now I’m less concerned with figuring out where to keep them.

Paper by FiftyThree

Paper is a new drawing app for the iPad from FiftyThree. Immediately after watching the video, I downloaded it (free download with paid add-ons) and ordered Cosmonaut and Jot styluses to try out.

As a habitual sketcher, I’ve tried lots of drawing apps before, but this is the most promising one yet. The simplicity and lack of chrome for navigation (not unlike what we’ve seen in Clear for the iPhone) really speaks to me. In the short time I’ve played with it, sans stylus, I already love it.