Advertisement
Design Theory

Setting Web Type to a Baseline Grid

by

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.

p {
	margin-bottom: 15px;
}

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.

h1 {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 15px;
}

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.

ul, ol {
	margin-bottom: 15px;
}

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.

img.left {
	float: left;
	margin: 0 0 15px 15px;
}

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!

Related Posts
  • Web Design
    Interviews
    A Quick Q&A With Jason PamentalJason thumb
    Jason Pamental has been working the web for a long time; so long in fact, he's even used something called "Netscape". This experience, coupled with his passion for responsive design and web typography (amongst many other things) have made him a familiar face on the speaking circuit. I caught up with him, shortly before he heads to London for the Future of Web Design, and fired a few questions his way.Read More…
  • Design & Illustration
    Designing
    Create a Magazine Cover, Inner Spread With Mock-Ups in Adobe InDesignIsometric tut mockupreview
    In the second of our two part tutorial, I'm going to show you how to use our cityscape graphic to create a magazine cover and then two versions of an inner spread in Adobe InDesign. I'll then go on to create a mock up in Photoshop.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    Typography
    How to Establish a Modular Typographic ScaleScale retina
    Possibly the most obvious typographic question in the hands of a designer is "which typefaces should I use?" The second question, one which rarely gets the kind of attention it ought, is "at what sizes should I set my type?" Establishing a modular scale is the best way to determine typographic sizes, in fact, it can help with laying out measurements and proportions across your whole page layout.Read More…
  • Web Design
    Design Theory
    All About Grid SystemsDsfd grid systems retina
    Now you know all about colour, typography and various things you should undertake before you start a design project, it’s time to start getting down and dirty with some of the basics of working with grids in your designs.Read More…
  • Web Design
    Design Theory
    Improving Layout With Vertical RhythmDsfd vertical rhythm retina
    Learning all about the ins and outs of the technical side of typography is good. It will give you a solid grounding when looking for typefaces or fonts and will help you understand a little more about the art of typography itself. You'll soon realise how much hard work it takes to get type right at any time, not just on the web.Read More…