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.