Typographic principles count as much on the web as in print

I read something today that perhaps offended me more than it should. Jason Santa Maria shared his thoughts on baseline grids on the web. While I appreciate that these are his own, personal feelings, I can’t help but get frustrated by seeing how this article is spreading like gospel.

Update: So this thing seems to have blown up a bit. Jason Santa Maria really disliked my feedback, or rather the form it took, and called me a troll and blocked me on Twitter. I understand that my harsh tone could have been modified to be a bit more constructive. When I saw more and more people tweeting the link to this blog post I felt a heated desire to say something, and I did. In hindsight I could have been a lot more tactful in my criticism, but I’ll let it stand for the records. I persist that a public statement should be allowed to be met with an opposing statement, but seeing as this seems to have offended the author of the article I responded to, I want to make it clear that I meant no offense what so ever. I just wanted a debate on the topic. Jason, I apologize for making you feel insulted. I’m passionate about typography on the web and I let my emotions take over. Sorry.

The web is a fluid, ever changing content source. We publish like crazy, everywhere, all the time. The content publishers might not have any interest or eye for aesthetics, so it’s up to the designers to provide good visual solutions for them. That’s how it’s been since Gutenberg and that’s how it is now. The fact that the web is “unruly” is no excuse for giving up on good, established typographic principles.

I have worked for a long time on honing my skills towards taming and constricting content on the web to fit inside good guidelines. Paragraph widths never get too long to read and line heights are perfectioned to make your reading as effortless and smooth as possible. Every element is part of an ensemble put together in the exact same way I’d put a printed publication together, up until the variable content. When I’m dealing with content I cannot directly control, I provide tools for my clients to publish the content in a way that adheres to the same principles I follow in my design work.

Doing anything less than this, I’d consider lazy.

Here’s a point for point on what I disagree with in Jason Santa Maria’s article, as a personal reply:

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.

This entire point is fluff. It’s a fluff paragraph meant to defend a non-point. Of course a grid doesn’t make a good design. Nobody ever said it did.

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.

See above. The whole point isn’t to set up an absolutely foolproof sandbox where nothing ever goes wrong, but to make it as easy as possible for the content publisher to not mess up the system. In my system, the client can add a class “baseline” to an image, et voila, it fits smugly into the baseline grid. It’s not incredibly difficult, you just haven’t gone far enough in researching how to do it.

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.

Same as previous answer, plus a quote from one of my own tweets:

JavaScript fixes everything, every time.

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.

Applying a baseline grid is not a strict rule. Everyone is free to break everything, always. But dismissing it because the internet is displayed in various sizes under various conditions is a cheap way out. The internet is full of running text. There’s so much to read on the internet it’s just overwhelming. Printed publications have had to deal with logos, illustrations, forms and other “non-text” elements almost since its very start, and they still found a way to keep a baseline guide. We simply do not have any valid excuse to disregard it just because the size of the screen might vary and we have to adjust our styles. It’s a bit of a pain in the ass, but a lot of things that hurt in the backside turn out to be worth doing.

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.

Same as it always was. A baseline grid that makes text hard to read needs to be adjusted optically. Nothing’s changed from print to web here. Once again, just because you cannot fully control how/where the content is viewed, doesn’t mean you should throw Josef Müller-Brockmann’s life work out the window. I’ll say it again: It’s lazy.

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.

Oh, how easy typography would be if that was the only reason we strive to set up good typographic systems. The problem you’re presenting is a real problem in print publications, and it’s a problem that can be solved with strict baselines. I won’t start quoting the masters of graphic design and typographic development, but I’m sure you know just as well as me that this is a very small part of the reason we use baseline grids.

Dear Jason Santa Maria, I know you’re everyone’s darling and I know you have a powerful body of work behind you. I don’t mean to start some sort of flame war over this, I just feel you should try a bit harder if you really feel such a pillar of typography isn’t worth your time on the web. Or you should push your developers towards figuring this stuff out.

I invite you to press Ctrl-G on any page on this site to see the grids that guide the content. You’ll find that some places the content slips a bit out of the baseline, as is to be expected. But that’s not the point. The grids are there to give a good guide for the content. Some places it slips out, but mostly it works. And that’s what’s important.

Nothing’s impossible on the web.
I’ve seen a live stream of a man jumping from space.
I’m sure we can figure out how to translate good typography from print to web.

Comments? Tweet me!