On The Scene

Or, The Magic Number 1.68

One issue in web design coming to the forefront recently is that of typography. Typography is defined by the Oxford English Dictionary as “The action or process of printing; esp. the setting and arrangement of types and printing from them; typographical execution; hence, the arrangement and appearance of printed matter.” We’ll just pretend that computers count as “printed matter”.

Today’s article on typography applies to spacing. To web designers, spacing can mean a lot of things, and proper typographic spacing can mean a lot of work. Well-typed documents often require the designer to obsess over details like vertical rhythm, line heights, header margins, grids, etc. It’s so much work that I’ve saved this post for a good long time until I could get around to typing this blog properly, so that I wouldn’t get complaints about it.

However, I’ve come up with what I consider a good standard for spacing, and as you may have predicted, the ratio 1.68 is central to it.

The Method

The first aspect of this scheme is to set the body font size, which I typically set to 83.5%. This allows ems to be treated as point sizes, such that 1.2em is equal to 12pt text. This is a matter of preference of course, but unless you do it this way your magic number may be different, so bear with me for now.

The total vertical space occupied by an element is the sum of its top and bottom margins and its line-height, as well as its top and bottom padding if applicable. 1.68 represents a good line-height for 12pt (1em) sized text, and a good top-and-bottom margin as well. So the way to start is to do this:

p{
font-size: 1em;
line-height: 1.68;
margin: 1.68em 0px;
}

This ends us up with 10pt paragraph font, and a vertical spacing of 3*1.68, whatever that is. Also note that the margins will collapse on top and bottom.

The next step in the process is to make sure that every block element in your body copy should have 1.68, or some multiple of it, intrinsic to its vertical spacing. This includes h1 through h6, paragraphs, list items, block quotes, and any other sectioned text that you have in your documents. This can be achieved by picking the font size you want, and then setting the line-height to that over 1.68. If you want 1.2em text, make your line-height 1.4. The top- and bottom- margins should be the same, in ems, as this.

Headers are a special case. They can have uneven top and bottom margins, as long as the sum of the top and bottom margins is a multiple of 1.68. The line-height for larger headers can double if they’re getting cut off, such as the headlines in my blog as of this writing.

After all that’s said and done, you will have a page with perfect (adequate) vertical rhythm. What does that look like? It looks like this template I made. Look at the sidebars, and notice that the text lines up with the body. If I had used a smaller font with appropriately larger spacing, such as 0.9 : 1.8666, it would still line up, and be a neat effect to boot. Try it!

I should mention I learned all of this from http://webtypography.net , whose advice is nothing short of exhaustive. If you found this even a little interesting, be sure to check them out.