Recently, I’ve been experimenting with some web typography … not experimenting with fonts, but working with typesetting and layout. My background is in typesetting and book design, and I like bringing some of my practices from that over to my web layouts (even though that’s not always ideal, as we get to later in this post).
So, anyway, I’ve been working on some layout experiments. Nothing too special, but I had one experiment I wanted to jot down the results for. Here’s the output of the experiment:
“The heck?” you say?
What I was trying to do here was to align the baselines of different font sizes.
Most baselines in web browsers aren’t actually real baselines. Even if you direct elements to have a “vertical-align:baseline”, type will still be all over the map. For example, if you just combine a bunch of <h1>s and <h2>s and whatnot, even if you give them all the same “line-height”, and even if you give them a “vertical-align:baseline”, they’ll still come out looking like this:
Booo!
And a closeup …
Note how the text is all over the place, each character roughly centered within the line-height.
Attempts to solve this have been written about before, but even the “solved” versions of it aren’t really solved. For example, the very talented (and nice guy) Wilson Miner wrote an article on A List Apart, Setting Type on the Web to a Baseline Grid. A good article with some good content, to be sure, but check this out:
That doesn’t really do what we want it to. (There’s a sidebar on that example page, by the way, showing the grid and how it aligns the main text with the sidebar baselines. If the body copy just aligned with its own baseline (like I highlighted with the arrows), that wouldn’t be anything special.)
Sidebar: There’s a really good comment on that post, from the wonderful Mandy Brown, noting the original reasoning for baseline grids:
Just wanted to add a bit about why aligning to the baseline grid became the custom in book (i.e., print) design. Most book papers have some amount of transparancy to them, meaning you can see the text from the back of the page through to the side you’re reading. If all the lines of text line up (or “back up”) to each other, then the text on the back of the page doesn’t interfere with your reading. If some lines are off the grid, you would see the text from the back of the page as a darkening of the space between the lines you’re trying to read, reducing legibility.
I think it’s nice that we can do this on the web now; it certainly helps you make decisions about spacing that could otherwise feel arbitrary. But it completely misses the point of why the baseline grid developed in the first place.And there’s absolutely no reason (nor is it a good idea in most cases) to force a sidebar to the same grid, unless it’s the same face and size. Since sidebar type is usually smaller or a different face (or both), it should be set to a leading that is appropriate to it’s size and face, not the size and face of the paragraph it sits next to. (In a really strict grid, you would edit the sidebar copy so that the first and last lines align to the baseline grid of the main text. But that’s neither achievable nor really beneficial on the screen.)
And another commenter (Peter Brown) in that same piece noted “Sidebars shouldn’t really be set on the same line height as body text. They should be set with the same ‘color’, that is their line height should be calculated using the same multiplier as body text. Then the first line of the sidebar should be aligned to the baseline grid with the rest hanging.”
So, okay, okay. Let’s say you aren’t really planning to align your text to a baseline, because those are good points.
But let’s say you’re curious about how you would, hypothetically.
I had that photo up top. Here it is again:
And, why not, a closeup:
You’ll see that the baselines of the different texts line up nicely. How’d we get them to do that?
The trick is two-fold.
First, you’ll need to select the grid you’ll want the elements to align on. Say it’s a 20px baseline. The first trick is that the line-height and margin-bottom would need to add up to some multiple of that value. So, let’s say your baseline is on a 20px-multiple. You can have an h3 with a font-size of, say 25px, and a line-height of 30px, and you’d then have your margin-bottom be 10px. So you’d have a line-height plus margin-bottom of 40px.
Second, you’ll want to have each of the elements have position:relative, and give a “top” value that equals the margin-bottom value for that element.
What do you mean that isn’t clear?
Here’s some code that should show what I’m talking about. All of these have a 40px baseline. This is, actually, the code I used to generate the HTML in my test.
h1, h2, h3, h4, h5, h6{border-bottom:1px solid #000;display:inline-block;font-weight:bold;opacity:.3;padding:0 10px;position:relative;width:100%;}
h1{font-size:35px;line-height:40px;margin-bottom:0;top:0px;border-color:red;}
h2{font-size:30px;line-height:36px;margin-bottom:4px;top:4px;border-color:orange;}
h3{font-size:25px;line-height:32px;margin-bottom:8px;top:8px;border-color:yellow;}
h4{font-size:20px;line-height:28px;margin-bottom:12px;top:12px;border-color:green;}
h5{font-size:15px;line-height:25px;margin-bottom:15px;top:15px;border-color:blue;}
h6{font-size:10px;line-height:21px;margin-bottom:19px;top:19px;border-color:indigo;}
Note how, in each case,
- the total of the line-height and the margin-bottom is 40px, and
- the “top” value is the same as the “margin-bottom” value.
So … if you’re looking to lay out your text on some kind of a baseline, this is how you should do it. If you have any thoughts / feedback / improvements, send me a tweet: @charliepark.
Have fun.
