The masochism of implementing CSS baseline

29 Mar 2012 by Gordon
12 Comments
CSS Baseline

Beware the addictive masochism of baseline

I have a confession to make: ten months ago I had no idea what a typographical baseline was. I also didn’t care. It was an alien concept to me, one that I was blissfully ignorant of. Why on Earth would text need to align to a baseline? What difference would it even make? Now though, I’m addicted to it’s precision, spending countless hours making sure everything aligns and sits oh right just, hooked on the perfection and the numerous extra hours of pain and suffering that implementing a baseline entails. I guess I must be a masochist at heart.

Baseline: what it is and why you need it

For those of you unfamiliar with the concept (like I was), a baseline is a line upon which all typography and, in most cases, other elements sit, ensuring that everything lines up correctly and is always spaced apart evenly. It’s a fundamental component of print design and exists to provide a consistency across material, making sure that text in columns all line up and start at the same place. In a magazine, this might mean the text on one page lining up exactly with the text on the page opposite whilst on the web it might mean the text in a sidebar lining up precisely with text in a main content area.

Although it’s been a mainstay in the print industry for a long time, the concept of baseline has never really made the transition across to web, slightly ironic considering there’s even a CSS baseline property (which doesn’t actually seem to do very much). Part of this reason is likely because a lot of web designers don’t come from print backgrounds and are simply unaware of the concept and partly because it’s incredibly tricky to get it working right. Unlike in InDesign, there is no easy way to set up a site wide baseline on a web site that automatically forces text to snap and flow with it.

No doubt another big reason that baselines are rarely implemented on the web is because it’s not really deemed necessary or worthwhile. Not to be flippant but it’s a pretty good point. I mean, does having the content on your site on a baseline add any value to it? Does it enhance the user experience? Does it make the site easier to read and engage with? We think so.

The main arguments toward using baselines are that they provide a vertical rhythm to your content, setting a nice, standard pace for your eye to browse over and your sub-conscious to absorb. If text isn’t on a baseline and starts and stops at mismatching intervals across columns and areas of pages, then a disjointed zig-zag effect is created that makes the content less pleasant to read and harder for your eyes to skim across. Simply put, a baseline adds a sense of uniformity to your site, providing a rhythm and balance that improves overall readability.

Wow look, I almost sounded like a designer there. Espen would be proud.

Implementing a CSS baseline

So, assuming you’re sold on the idea of implement a CSS baseline on your site (and, after reading the above, you surely are right?), how would you go about it? Unfortunately, it’s all a bit fiddly and tricky to say the least and, after much experimentation, we’ve yet to find a perfect or super-simple solution. Still, with a bit of effort and enthusiasm (not to mention slight masochistic tendencies), it can be done.

Although tools like Baseline CSS exist, we’ve actually found that there’s no substitution for manually creating – and tweaking – your own styles in order to get them to align to your chosen baseline. As mentioned, whilst a bit fiddly, time consuming and ultimately somewhat annoying, it’s not all that hard in practice, especially if you’re using Sass. The real trick is to ensure that every style, such as your headers and paragraphs etc, adds up to a multiple of your baseline. So, if you’re baseline is 24px, then every element should be at least 24px in calculated height and scale accordingly i.e. 48px, 72px, 96px etc.

To make sure that your text fits exactly on the baseline, you’ll also want to give each of your elements a line height that is an increment of it. For example, paragraphs on a 24px baseline would have a 24px line height whilst larger styles, like a h1, might have a 48px line height. It’s also worth noting that you probably want to use pixel sizes for everything you do here because, due to the rounding on ems, it’s very hard to get everything set accurately otherwise.

Font sizes on your styles can be anything, really, as long as your line height is set correctly, because you’ll want to position them using padding and margin so they sit nicely on the baseline. We have a technique of creating base styles for elements as Sass variables and then adding appropriate padding and margin to them in a corresponding style, a simple case of going through everything and adding padding to the top to force the text down onto the baseline (by default CSS places text in the middle of its own imaginary baseline opposed to directly on it) and then margin beneath it to ensure the next element starts on the baseline as well.

Unfortunately (as we’ve discovered) all of this really needs to be done by eye per element as, unless you use the same typography for every site you build, each font has it’s own nuances which will throw your previous calculations off and screw everything up. But then that’s the price we pay for the miracle that is Typekit.

And if all that sounds confusing and complicated, well yeah, it is a little. This lovely little tool called Baseliner will make your life a lot easier though as it will let you set a graphical overlay on top of the site you’re working on in order to help you align your elements.

Finally, if you’re wondering what’s the best baseline to use, after much dicking about, we’ve discovered that going for something lower (like 11px or 12px) is the best tactic. Whilst this means that most of your elements will be on a double baseline (i.e. normal paragraph body copy might be 16px in font size on a line height of 22px using a baseline of 11px), it gives you more flexibility when determining the margin and spacing of items on your site so you don’t always have to have a large 22px or 24px gap between elements.

Is it all actually worth it?

There’s no doubting that implement a CSS baseline is a fair amount of work, especially when you take into account all of the element positioning required plus issues caused by varying fonts on Typekit, browser compatibility and the differences between font rendering on Macs and PCs. With all that in mind, I can easily see why most people would want to forego it completely. Trying to get your entire site to reside perfectly on a baseline will admittedly take a lot of additional effort so, if you do decide to do it, it would probably be wise to implement the spirit of it as much as possible rather than trying to make it happen on absolutely every element imaginable.

Still, we try to utilise a baseline on every site we build now simply because it provides that little extra degree of perfection which ultimately gives us a huge amount of personal fulfillment and satisfaction. Some people may not appreciate the subtle differences it makes to a web site and the way all of the text aligns perfectly across columns, sidebars and text areas yet for those that do, it’s a nice little bonus and indication of the attention to detail that went into the site’s creation.

Bear in mind that we are self-confessed followers of the long, hard, stupid way though.

Screenshots from Andrew Hamilton & Co

If you liked this article then why not subscribe to our RSS feed.

Author: Gordon McLachlan

Gordon is uncomfortably good looking.

Comments

Showing 12 Comments

Leave a comment
  1. Natalia Ventre 29 Mar 2012 at 11:05 pm

    Way back, I used PageMaker for a while and to design with a baseline you had to do some tricks with the leading, and then came QuarkXPress and it was amazing, because you could just check an option and the text magically stick to the grid. I’m waiting for some easy CSS solution, right now the technique, as Gordon says, it’s too masochist.

    • Gordon 04 Apr 2012 at 6:38 pm

      Indeed it is and, unfortunately, I have the feeling it’s not going to get any easier. The web just isn’t really designed for it.

  2. Pete 03 Apr 2012 at 2:06 pm

    I hate uneven numbers. When a design hands me a comp and it has a font size of 15px I want to punch things… I’ve always tried to keep things “even” but I’ve never tried baselining before. I’ll have to check it out more and try to incorporate it into my boilerplate. Nice post.

    • Gordon 04 Apr 2012 at 6:39 pm

      If you like even numbers for fonts then you’re going to love baseline, Pete :) I get far too carried away making sure everything lines up just exactly…

  3. [...] implementing a CSS baseline from 8 Gram [...]

  4. Peter 26 Apr 2012 at 11:33 am

    I like this little gem to solve that problem : http://baselinealign.mattwilcox.net/

  5. Max 02 May 2012 at 4:14 pm

    Nice tool, Peter! It seems like there’s a jQuery plugin for everything lately. Hm.

  6. [...] If you’re still with me you’re probably either a masochist or have an unhealthy obsession with detail — either way I congratulate you, as your baseline is [...]

  7. [...] If you’re still with me you’re probably either a masochist or have an unhealthy obsession with detail — either way I congratulate you, as your baseline [...]

  8. [...] If you’re still with me you’re probably either a masochist or have an unhealthy obsession with detail — either way I congratulate you, as your baseline [...]

  9. Burrito 28 Aug 2013 at 1:12 pm

    It’s easy with pixels, try em…

  10. [...] If you’re still with me you’re probably either a masochist or have an unhealthy obsession with detail — either way I congratulate you, as your baseline [...]

Leave a Reply