Web design is essentially just an evolution of the principles and theories created during the evolution of print. The design industry brought a lot of techniques to the web, but some took longer to master in a virtual environment. Unfortunately, we don't have a single platform for our content to appear on; we have to battle with multiple browsers, operating systems and screen sizes.
As the web has developed, so have the design principles we observe. Grid-based design has rose in recent years, whereby designers can lay out their site according to a columned grid. Grid systems have been a very popular way to organize and align elements, and to add general order to a page, by apply proportion and balance.
Basing our knowledge of using proportion and balance, one can utilize another print design principle: the baseline grid.
What is a Baseline Grid?
The baseline grid is a technique used to better your web-based typography. Essentially, it aligns all your text to a vertical grid where the bottom of each letter is positioned onto the grid, just like writing on lined paper. The end result is a body of text perfectly organized, with a subconscious recognition of balance and congruity.
As I said before, print is a static medium. Designing for a print format allows you to specify what all of your viewers will see. However, because of the alternate platforms your design can be interpreted by on the web, your CSS will inevitably render your line height, and other typographical values, differently for different users. For a lot of designers, this turns out to just be guesswork and predicting what the end user will see.
Baseline Grids in Print
Many print designers use baseline grids in conjunction with their design suite, be it InDesign or other. Grids in print have been traced back to the early 1200s and are not constricted just to web design. In fact, everything from grids to the golden ratio (ie, most math-based theories) are shared in other aspects of life, most notably architecture.
The grid makes it possible to bring all the elements of design — type characters, photography, drawing and color — into a formal relationship to each other; that is to say, the grid system is a means to introducing order into a design. A deliberately composed design has a clearer, more neatly arranged and more successful effect than an advertisement put together at random. -- Josef Müller Brockmann
Creating a Baseline Grid
Now, let's take a look at how we actually create our baseline grid.
Firstly, we have to define a line-height for the baseline grid based on a ratio with our font size; for this example, 1:1.5 is a nice amount that offers us a generous 50% leading. If we had a text size of 12px, the line height (using this 1:1.5 ratio) would be 18px. 150% is a nice amount that offers us a design that will be easily read , but this value can be different. However, you should try to stick to approximately a range of 130%-160% when considering line height.
Before we go any further, you should know exactly how the CSS line-height property actually works. The line-height is the overall, collective height of the line of text, not the text itself. It works by adding padding above and below the text to space it out. If we actually take some text and put it on a ruled background, we'll see the text positioned in between the lines, not necessarily on them.
Into the CSS
To make things simple, let's assume our text has a base size of 10px. By sticking to our rough ratio, that means our line height will be 15px, although we could vary this. (To make a side note, 10px is pretty small and I wouldn't necessarily recommend it in most cases, but I'm using it here purely to make it easier in the math department). In order to make various elements fit into our baseline grid system, we need set them up in our CSS.
Before we continue, though, these examples assume you are using some sort of CSS reset. If you aren't, then default margins might interfere with the work we do today.
Paragraphs
To kick things off, once we've setup the line-height, we need to fit a consistent margin beneath each heading and paragraph. Since we are working with a 15px grid here, we kick things off by overwriting the standard bottom margin of a paragraph tag (by default, this is 1em which, in this case will be 10px) to be the same as our line height within the text. This creates a proportional empty line beneath each paragraph that is equal to the height if text resided there.
1 |
|
2 |
p { |
3 |
margin-bottom: 15px; |
4 |
}
|
This is the result: a body of text where the margin below a paragraph is equal to the line height.
Headers
Similarily, for headers, we simply need to continue obeying the increments of 15 pixels. By simply tagging on our margin aside the 150% line height, we create a similar, consistent break.
1 |
|
2 |
h1 { |
3 |
font-size: 20px; |
4 |
line-height: 30px; |
5 |
margin-bottom: 15px; |
6 |
}
|
The example on the right has our CSS applied, which makes the margin under our heading comply with our baseline grid. Since our header has a font size double that of our normal text, it takes up two rows in our grid.
Before I go any further, I do want to note that your text might not always actually sit on the line, if you've applied one to your background. Don't worry though, as long as the line height remains the same. If your text floats in the middle of your lines, you can easily play about with your margins, but it's not necessary.
Lists
Next up, how do we handle lists? Firstly, we want to apply our standard margin in the same way we did to our paragraphs. This gives the breaks a level of consistency with the content.
1 |
|
2 |
ul, ol { |
3 |
margin-bottom: 15px; |
4 |
}
|
This is starting to get easy now! If you still have a line-height of 15px defined elsewhere, your lists will fit in nicely with the rest of the content.
Since our line-height was defined in the parent element's CSS, we only have to define the margin to get our lists up and running within our baseline grid system.
Images
Images are where it starts to get a little more difficult. Preferably, we want to have the same consistency in our margins, so the image is treated in the same way as if it were a block of text. It does mean that your images need to be sized in multiples of your line height value which is, in this case, 15.
In my example, I have the image floated to the right so I have a 15px margin applied to the left side and the bottom. Alongside our existing margin beneath the paragraph, this gave us a consistent margin equal to the rest of our baseline grid.
1 |
|
2 |
img.left { |
3 |
float: left; |
4 |
margin: 0 0 15px 15px; |
5 |
}
|
Of course, these aren't the only elements that we need to modify to comply with our new baseline grid. The key is to make sure that you work within a consistent increment, so everything is constricted to the same grid. This can result in the harmony and balance become evident throughout your webpage when used with large bodies of text.
Our Example
Here's our finished example, a simple webpage featuring paragraphs, titles, an image and a list. If you want to get out your ruler, you can, but I can assure you that everything follows the consistent grid that's based from our typography.
We've only just broken the surface of using baseline grids. It can get a lot more difficult when you start trying to apply them to more complex designs, which ends up in few being used on the web. However, it is possible and can result in a balanced, proportional design that can contribute to a better end user experience.
Conclusion
The baseline grid is a great way of adding some balance and proportion to your typography. It's one of those subtle implementations that can add some natural feeling into your designs. In the case of the baseline grid, our typography becomes consistent with standardized spacing giving it that harmonious feel.
Unfortunately, however, we still have to fight off the threat of browser incompatibilities that can make our CSS render differently for different users when they are browsing on alternate browsers, operating systems or devices. This is a task that does not seem like it's on it's way out, although adding a baseline grid does provide other advantages. For example, this type of grid system can help tremendously when scaling and, therefore, forcing a browser to re-render it's CSS. Baseline grids offer a little more flexibility and encouragement for the browser to do things properly.
This has been a shorter article than usual, but that's because baseline grids don't really have that much to explain about or show how to use. The real magic comes when the designer tweaks and tests in order to make sure his baseline grid works, and, above all else, makes the design visually appealing (somewhat more). For an alternative spin on things, read A List Apart's article on this very subject. Until next time, happy designing!
