2c:null 2d:["$","title",null,{"children":"Baseline Grid | Gabriel Gianordoli | Observable"}] 32:T13f9,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.`33:T519,viewof headerSpacing = { const form = html` `; form.oninput = () => form.value = { gPlaceMarginTop: form.gPlaceMarginTop.valueAsNumber, gPlacePaddingBottom: form.gPlacePaddingBottom.valueAsNumber, gNameMarginTop: form.gNameMarginTop.valueAsNumber, gNamePaddingBottom: form.gNamePaddingBottom.valueAsNumber, gDetailsMarginTop: form.gDetailsMarginTop.valueAsNumber, gDetailsPaddingBottom: form.gDetailsPaddingBottom.valueAsNumber, }; form.oninput(); return form; }34:T49b,md` ## One last note If you inspect the code below you will see that all spacing dimensions are set in pixels. For accessibility purposes though, rem is more recommended. I find writing specs in pixels more intuitive, so I sometimes use a SASS function to convert them to rem. Whatever you decide to do, just make sure your computed values are pixel integers. Browsers behave in different ways when dealing with pixel fractions. Some try to emulate them, others simply round them. In both cases, chances are that your grid will break at some point on the page. ## Conclusion As I mentioned before, there are several other ways of implementing a baseline grid on a web page. What you end up choosing depends on several factors. Do you have full control of your environment or is your page running under some CSS rules not accessible to you? Are you designing a one-off page or a system that need more flexibility? Is there enough text in your page to justify this effort? At last, don’t forget that there is no native CSS baseline grid implementation. No matter what you choose to do, it will still be some sort of hack — and you might as well decide to create your own. `35:T52a,html `

Inline Styles

`36:Te31,html`

Story Styles

`37:[] 30:{"id":"3629dfea1f1ba2be","slug":"baseline-grid","title":"Baseline Grid","thumbnail":"f044b4e62ea62298fc5f2f38173a03c867be53c7591b62f6f0ae1c5dee088651","access_level":"public","create_time":"$D2019-04-30T20:26:01.508Z","update_time":"$D2019-06-18T14:35:19.746Z","view_time":null,"first_public_time":"$D2019-05-01T17:05:47.331Z","fork":false,"stars":99,"starred":false,"owner":{"type":"team","id":"9db89550eb5ae0fc","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":"starter_2024"},"version":840,"publish_version":840,"role":null,"authored":false,"authors":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null}],"members":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":19,"collection":{"id":"936bb5e9815c44d2","slug":"explorables","title":"Explorables","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Baseline Grid","cells":[{"id":0,"value":"md`# Baseline Grid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":773,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":305,"value":"md`\n## The Basics\n\nThere are several approaches for implementing an online baseline grid. Some involve pseudo-selectors (\\`:before\\` and \\`:after\\`) and others use margins and paddings. Also, there are some CSS frameworks ready to [download](http://stephanecurzi.me/baselinecss.2009/) and [use](http://b4d455.fr/basel/about.html).\nThose were not workable for our story as they could affect how elements from the page template show up. Also, we had a pretty limited set of elements that repeat across the page. Creating rules for each of them was laborious but doable.\n\nThe main principles we followed are outlined in [this post](https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b) by Razvan Onofrei. \nIn short, they are:\n* shift elements up or down to align them to the grid;\n* set text line-height according to the grid spacing;\n* add an extra space after to make sure elements leave the flow on the grid.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"md`\n## Getting Started\n\nWe started by setting the grid based on our body copy of 19/28 px, using the \\`line-height\\` as our grid spacing. A common technique is to then subdivide the main space in two to accommodate for smaller type. We did not use that as it would result in too much visual clutter — our grid is visible to the user.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":188,"value":"md`\nNow that our line-height matches the grid, we need to move the paragraph to align its baseline. How much of the text should we shift up or down? The value depends on your font’s cap-height, being different for each font family. Razvan has a formula you can use after measuring the text cap-height: \\`font-size * (line-height - cap-height) / 2\\`. That works great if you’re building a SASS function to speed up your process a bit. We simply tweaked the settings until getting them right instead. You can try it yourself by moving the sliders below the text.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"html`\n

\n While in the country teaching a seminar at the University of Buenos Aires, Marcel Breuer was asked to help design a social club for a beach resort on Argentina’s Atlantic coast.\n

\n Now derelict, the Ariston Club in Mar del Plata, some 250 miles south of Buenos Aires, was once a thriving dance hall. A place for lunch overlooking the sea and fun at night, it once had a revolving dance floor and partiers would throw down talcum powder to get a better grip when barefoot, said Sol Marinucci of Trimarchi, a group that organizes a design festival there.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"viewof bodySpacing = {\n const form = html``;\n form.oninput = () => form.value = {\n gBodyMarginTop: form.gBodyMarginTop.valueAsNumber, \n gBodyPaddingBottom: form.gBodyPaddingBottom.valueAsNumber, \n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":417,"value":"md`*Note: the fonts used in this post are not the same as the ones in the article due to licensing rights. So the spacing values that work here may also be slightly different from the ones we used.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"md`\nNotice that the we need the \\`padding-bottom\\` to keep each paragraph ending on the grid. Also, you might be asking why we are combining margin and padding instead of just using margins. The reason is a CSS behavior called margin collapsing. It means that CSS combines the top and bottom margins of adjacent siblings. This happens in other cases too, like parent and child elements. Take a look into [this page](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n) for further understanding.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":320,"value":"md `\n## Headers\n\nNow that we got the body copy right, putting the rest of the type on the grid is a matter of manual work. Play around with the spacing for our headers and see if you can align them to the grid. As with the body copy, start with the \\`margin-top\\` of the first element, then move on to its \\`padding-bottom\\`. Then repeat that for each following element. \nOne quick note: having a full baseline grid between the first two lines is too much. So this is an exception to the leave-the-flow-on-the-grid rule. In this case it is not a problem as those elements always show up together, so they don’t risk breaking the grid. You could control for this by using [adjacent sibling selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) in your CSS rules.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"html`\n

Mar del Plata, Argentina

The Ariston Club

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":353,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":606,"value":"md`\n## Images\n\nFor images, the easiest approach is to define a fixed height based on the grid unit. But there are many problems with that. First, we often want to define our image size in relation to the width of the other elements or the screen. Second, it is a bit counterintuitive to define heights when doing responsive design. Third, we also had a vertical grid on our page and needed to align the elements to it as well. Because of that, our 3:2 images will only work when both their dimensions fit the grid.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":571,"value":"html`\n

I am a somewhat long caption for this image.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"md`#### Image\n\n${bind(html``, viewof gImageWidth)} \\`width\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":703,"value":"md`As you may have guessed, our responsive design can’t be fluid to stay on the grid. on the final page, we set 3 fixed widths for the large images based on 3 breakpoints.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":746,"value":"md`\n## Small type\n\nOne last detail: the type size of our captions is too small to use a line-height that fits the grid. That would not be a problem if we had subdivided our lines. But, as mentioned before, that would be too much visual clutter.\nWhat is the issue then? Can’t we just add some padding to it keep in the grid? Well, we could if we were sure that it would always have a single line. But on mobile sometimes our captions would break into two lines, breaking the grid.\nOur solution was to add a min-height to prevent that from happening.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":753,"value":"html`\n

I am a somewhat long caption for this image.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":722,"value":"md`#### Caption\n\n${bind(html``, viewof gCaptionMinHeight)} \\`min-height\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":832,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"md`\n---\n## Code\n\nFor the curious ones, you can inspect some of the code running behind this notepad here.\n\n### Variables\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"gridUnit = 28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":614,"value":"viewof gImageWidth = new View(1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":725,"value":"viewof gCaptionMinHeight = new View(1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":471,"value":"allRules = Object.assign({}, bodySpacing, headerSpacing);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"colors = {\n return {\n margin: 'rgba(252, 154, 69, 0.36)',\n padding: 'rgba(63, 186, 152, 0.36)',\n grid: 'rgba(79, 153, 255, 0.48)'\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":522,"value":"linkVarsToStyles = function(selector) {\n const m = `${selectorToCamelCase(selector)}MarginTop`;\n const p = `${selectorToCamelCase(selector)}PaddingBottom`;\n \n return `\n ${selector} {\n margin-top: ${allRules[m]}px;\n padding-bottom: ${allRules[p]}px;\n }\n ` \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"createVisualSpacings = function(selector) {\n const m = `${selectorToCamelCase(selector)}MarginTop`;\n const p = `${selectorToCamelCase(selector)}PaddingBottom`;\n \n return `\n ${selector}:before {\n top: ${-allRules[m]}px;\n height: ${allRules[m]}px;\n background-color: ${colors.margin};\n }\n\n ${selector}:after {\n bottom: 0;\n height: ${allRules[p]}px;\n background-color: ${colors.padding};\n }\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"selectorToCamelCase = function(selector) {\n \n function capitalizeFirstLetter(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n }\n \n let camelCaseSelector = selector.substring(1).split('-');\n return camelCaseSelector[0] + capitalizeFirstLetter(camelCaseSelector[1]); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":641,"value":"ratioToAngle = function(w, h){\n const radians = Math.atan2(h, w);\n return radiansToDegrees(radians);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"radiansToDegrees = function(radians) {\n return radians * (180/Math.PI);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":821,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"function bind(input, view) {\n const value = [\"range\", \"number\"].includes(input.type) ? \"valueAsNumber\" : \"value\";\n const update = () => input[value] = view.value;\n input.oninput = () => view.value = input[value];\n view.addEventListener(\"input\", update);\n disposal(input).then(() => view.removeEventListener(\"input\", update));\n return update(), input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"import {disposal} from \"@mbostock/disposal\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 31:"$30:body"