Adobe

decor

Web Platform Team Blog

Making the web awesome

Baseline Grids for the Web

Visual design often has a vertical rhythm, laying out text and graphics at regular vertical intervals. This makes side-by-side content line up nicely. In printing this allows lines of text occupy the same vertical position on either side of the page, to prevent your eye from noticing any ink showing through thin paper.

A vertical rhythm is accomplished by using a baseline grid, either implicitly or explicitly. In traditional publishing, you can implicitly use a baseline grid by using consistent leading and fiddling with any exceptions that arise. Or there are tools that help you set up an explicit baseline grid. On the web, fiddling with exceptions isn’t something you can (or should) do. So the implicit option just doesn’t work. And the web has so far lacked an explicit baseline grid.

Here’s an example of why you might want to use a baseline grid. This site has three side-by-side article summaries. Headings and body text have slightly different line heights, and different screen sizes will produce different numbers of lines for the headings. So the body text from each summary does not line up with the others.

1.1.without-grid

It’s a bit easier to see what I mean if I add some lines to the picture. If all of the body text aligned its baselines to the green lines, the side-by-side content would share a vertical rhythm and look less sloppy.

2.1.grid-overlay

You can (usually) achieve a consistent vertical rhythm today by forcing all line heights to be strict multiples of the body line height. The site I pulled this example from actually does try this. The heading and body text in their summaries use exactly the same line height. So the headlines are a little too tightly spaced and the body text is a bit too loose. And unfortunately, other elements on the page mess with this consistency, so the body text doesn’t line up anyway.

3.1.align-everything

It’s generally better to specify slightly larger line height for larger text, but then you can’t have everything line up to the baseline grid, or you get something like the result above. So in order to use an explicit baseline grid, you need to be able to say that some parts of the design snap to the grid, and other parts ignore the grid. If you only align the body text, you get this result, which is a bit better than the original.

4.1.align-paras

Then you can start playing with having blocks align to the grid as well as text lines. Each heading can be considered as a block of lines that can interact with the grid as a unit. Perhaps you’d like the first baseline of each heading to align with the grid:

5.1.first-line-block

Or you could have each heading center all of its content in-between two grid lines:

6.1.center-blocks

The differences between the last two are subtle, but aligning the first baseline gives you better side-by-side consistency in the headings, and centering gives you more consistent spacing between the headings and the body text. Which to choose depends on the design you’re trying to express.

I believe that CSS needs an explicit baseline grid feature, and am now working with the CSS Working Group to figure out the best way to define and use a baseline grid in web design.

2 Comments

  1. February 06, 2014 at 3:59 am, Richard Le Poidevin said:

    I prosed something similar to this back in December 2011.

    I didn’t go to the same extent as you of creating a baseline grid. At the time I was looking at the line-height property and how, in CSS, text is centred on a line making it very hard to vertically align different size text without using negative margins.

    http://betleywhitehorne.com/ric-lep/fix-css-line-height/

    http://lists.w3.org/Archives/Public/www-style/2011Dec/0540.html

    Maybe both would be useful? Baseline grids for complex layouts and a more basic line-height-align property for general use?

  2. February 06, 2014 at 8:53 am, Edward O'Connor said:

    Don’t hesitate to chat Hyatt up in #webkit on this. Also please look at -webkit-line-snap et al.; they were based on fantasai’s line grid strawman that I hope your new draft will descend from.