md` To celebrate the 100th anniversary of the German design school Bauhaus, we published a [story at The New York Times](https://www.nytimes.com/interactive/2019/04/18/arts/design/bauhaus-100-architecture.html) featuring some of its buildings outside Europe. Designed by [Rebecca Lieberman](https://twitter.com/the_log_lady), [Eden Weingart](https://twitter.com/edenweingart) and [I](https://twitter.com/gianordoli), it featured a small detail for the design-history aficionados: a baseline grid.

Baseline grids are horizontal lines evenly spaced where text should align to. Aligning type based on its bottom, or baseline, was a common practice in movable type. Its founding publication, the Gutenberg Bible, does so in a two-column layout.

Original by Johannes Gutenberg (printer), Scan by Jossi (Public domain)

Aligning text across columns is the most common argument in favor of baseline grids. Handwritten examples of that are present in two-thousand-year-old scrolls.

Temple Scroll, 150 BCE–70 CE. Source: Wikipedia

Baseline grids also prevent text from opposite sides of a sheet from affecting each other. If those lines are not aligned they can end up making the text harder to read. Of course, that only happens in print and with thin paper.

The body copy from The New York Times Magazine is perfectly aligned throught its pages. The photo was taken against a light source.

A more subjective and less print-based argument in favor of grids is vertical rhythm. The idea is that the type on a page should align to regular intervals of space to preserve its “rhythm.” Headers and body copy will demand different spacing, but they would all fall on the same grid. In “The Elements of Typographic Style,” Robert Bringhurst compares this principle with music. The text placement on the grid would be like musical notes played following a regular tempo. > “Time is divisible into any number of increments. So is space. But for working purposes, time in music is divided into a few proportional intervals: halves, quarters, eights, sixteenths and so on. (...) Phrasing and rhythm can come in and out of phase – as they do in the singing of Billie Holiday and the trumpet solos of Miles Davis – but the force of blues phrasing and syncopation vanishes if the beat is actually lost. Space in typography is like time in music. It can be infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities.” The use of baseline grids on the web has always been controversial though. The thin paper issue is nonexistent, and multi-column layouts are not as usual as in print. The main argument against it is that its benefits are not worth its cost. Aligning to a baseline grid is a menu option in publishing software like inDesign. On the web there is no built-in CSS way of doing the same. It requires a painful process of trial-and-error. One of the main reasons is because type on the web behaves in a different manner than on a desktop publishing app. On the latter, leading means the distance from one baseline to the next. On the former, we have line-height instead: a measure of the vertical space occupied by each line of text. Think of it as if the text were aligned to a central axis and the line height grew both up and down.

To make matters worse, pictures and other visual elements on your web page have to align to the grid as well. Otherwise, having your paragraphs on the grid won’t suffice, as images on the same flow might push them out of it. Again, the same won’t happen in a desktop publishing app, where the snap-to-grid feature applies to the text. The solution then is to have fixed sizes for your elements, which, again, is the very basis of print design. Online, that goes against the basic rule of designing for a multitude of screen sizes. Because of all that some argue for a vertical text grid on the web without baseline alignment. That is not so hard to accomplish, requiring only a [modular scale for type size and line height](https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/). On our Bauhaus page, we went for the real “on the baseline” grid.`