Get Rhythm in Your Baseline 21 comments
While traveling to Austin, Kauai, and Philadelphia over the last few weeks, I was inspired to redesign the PeepCode website1. I had learned many new CSS, Javascript, and typographical techniques recently so this was a great opportunity to try these ideas out.
I also wanted to rearrange things to use the space more effectively.
Fancy Ampersands
Most typefaces don’t have an interesting ampersand (& vs &), but you can specify a better one in titles. I use a technique made popular by Dan Cederholm where he wraps them in a special span that is styled with an interesting italic ampersand.
A custom Rails helper method does the automatic span wrapping on selected elements.
span.amp {
font-family: "Palatino", serif;
font-size: 110%;
font-style: italic;
}
Consistent Baselines
Graphic designers know that layouts with a consistent baseline will look much better than inconsistent ones.
Even if you are not a graphic designer, this is an easy way to make your text look tidy.
I wrote a Baseline Rhythm Calculator that can be used to generate a basic stylesheet with the proper calculations.
If you click the link in the footer under “Fun and Games,” you’ll see the baselines used to debug the site.
If you want to calculate it yourself, the steps are:
- Choose a base font size (12px for this site). Declare this in the
bodysection of your stylesheet. - Choose a consistent
line-heightfor all the text on the page (18px for this site). Using 1.5× the base font size is a good value to start with: 12/18, 14/21, etc. - Specify all non-
bodyfont-sizes inem’s. - For any elements that use a larger or smaller
font-size, calculate theline-heightand an equalmargin-bottomby using(base line height in pixels / current font size in pixels). This will give you the correspondingline-heightinem’s.
Or, let the Baseline Rhythm Calculator do this for you.
Elements that can stomp on your rhythm:
codeandpreelements often use a different font with a largerline-height. Set theline-heightto90%in order to keep the rhythm steady. This is still throwing my layout off by a few pixels on pages that usepretags.- Images. I’m using the unobtrusive_javascript plugin and my Baseline Rhythm Calculator Javascript to replace relevant images with a properly sized div that uses the image as a centered background. This keeps images inside the proper baselines without distorting them (a technique mentioned by Andy Clarke in Transcending CSS). See the
fitImageToBaselinefunction in the PeepCode application.js. submitbuttons in forms can also throw off the rhythm. Thebuttonelement is more easily styled, but doesn’t work consistently in Internet Explorer (6% of my visitors). I’m tempted to use Unobtrusive Javascript to replace all submit buttons with Javascript-powered buttons instead, but I need to make sure that it works as expected in IE.
Hanging Quotes
It’s a tiny difference, but adds that extra bit of sophistication. I outdent the first line of blockquotes so the quote is in the gutter and the letters are lined up with the rest of the block.
blockquote {
text-indent: -0.5em;
font-style: italic;
}
cite {
text-indent: 0;
display: block;
font-weight: bold;
}
Results
Here are two tiny screenshots of the results since then, thanks to Crazy Egg.
A few interesting elements:
- People love to click on screenshots, pictures, etc. I need to add more to communicate better and make the site more interesting.
- The pink sidebar of screencasts on top is catching attention, as I had hoped.
- No one clicks on the list of screencasts in the footer. People who scroll down that far are looking for something else.
- The footer link that turns on the debugging baselines is the single most frequently clicked link. I thought this would be a minor attraction, but it seems to be popular.
Messenger Bag
Feeling the need for some bling, I ordered a custom messenger bag from Reload Bags. It arrived on Monday and is awesome! They take any design you give them and make a bag out of it. I even requested special dimensions for my 13” MacBook, which fits perfectly.
Resources
- Baseline Rhythm Calculator
- Webtypography
- SXSW Lecture by Richard Rutter and Mark Boulton
- Unobtrusive Javascript
- My lecture at Philly Emerging Tech Conference
1 No, the site was not designed by Amy Hoy as some have guessed. I did it all by myself!
Nuby on Rails
Geoffrey Grosenbach / Ruby / Code / Graphics / Design / Rails / Merb / Javascript / CSS
What a Superfun™ bag of tricks you’ve given me to play with over the weekend. Thanks a bunch! Typographical toys are the best.
You mention setting the font-size in px in your copy here but the Baseline Rhythm Calculator only allows points. Are you planning on adding px functionality or just the pt? Just curious. [My those are long teeth on such a free horse!]
Again, thanks!
I think you mean the labels on the form elements…I’ve updated it to mention px instead of points.
The generator does the calculations and uses em’s for everything except the body font size.
Looks wonderful, great job! I’ve been thinking along the same lines, with regards to redesigning our site. O when will we ever find the time? Truly, the cobbler’s children are always the last to get new shoes.
Nice post. This typography stuff is new and confusing to me, but there’s math in it, so I have a chance of understanding it (as opposed to all the other design stuff I’ve ever read).
That’s awesome. I’ve read something about how to do the baseline thing before.Your method might be keen. Web typography is getting easier these days with Parallels and everything.
Thanks for being too busy to do CrazyEgg and selling me to them. At least I was able to hook you up with a free account ;)
Looks like you know what to do with it :D
Never thought about having a consistent baseline. Thanks for opening my eyes!
And BTW, that messenger bag looks sweet! :)
Great bag.
A question from someone who also carries their MacBook in a ReLoad messenger bag. What do you use to protect your investment in that beautiful, yet thin-lined, bag??
@scott: I have a ZeroShock sleeve that I wrap around it sometimes. ReLoad also sells a protective sleeve that you can use. But honestly, the 13” MacBooks were made to take a beating and I try to fulfill my duty (I’m not sure about the MacBook Pro’s).
My previous iBook died after 3 years and several trips around the world, so I don’t worry about taking too many precautions with the thing (other than making sure it’s backed up regularly).
On a slightly different note, I like the bag’s back pocket which can hold the laptop, too. It makes it easy to go through airport security without needing to open the bag.
Re the form label. I guess so. I didn’t examine it at all. Just saw the points and wondered. Thanks for the info though.
I wrote up how to apply Dan’s ampersand technique to content you can’t sprinkle with span.amp’s, if you’re interested.
I like the effort, but I’m not really sure I agree w/ the concept of having a consistent baselline throughout. I think you actually disrupt the rhythm of the type increasing the leading in smaller body text purely for the sake of maintaining that consistent baseline. Use of the grid, as with many things in design, should be done in moderation. It’s good to understand some of these basic design principles, but once you do you need to know when to break them as well. Breaking grid in key areas helps create a natural flow to your layout and makes it more dynamic.
To each his own I suppose. I think the redesign came out well, but more in spite of the consistent baseline technique, not because of it. There are some other nice thing going on that push the design forward.
Also, on a more technical note… you don’t want to specify your line height as an absolute value. The spacing will break down as you increase or decrease the font size in your browser. To be visually consistent, the leading should be a multiple of the font size. Actually, any spacing in typography should be a proportionate to the font size (kerning, word spacing, space-after, space-before, etc.). You can actually specify the line-height value in CSS w/o the unit, and it will be treated as a multiple of the font size:
body { font-size: 12px; line-height: 1.5; }@Chris: The thing I like about using a baseline is that it makes many sizing decisions automatic.
Need a sidebar? Use a multiple of the baseline and it will fit in. Don’t know how much space is needed around a subheading? Stick to a multiple of the baseline and it will work.
It takes the pain out of adding a few pixels here and there just to see if it looks any better.
Personally, I think smaller text with more leading (proportionally) looks better next to normally set text, but that’s subjective.
I’ll try the unitless global line height. I did test the current system with larger and smaller font sizes throughout and it kept the baseline, generally. The problem as I understand it is that when you use a different font size for a heading, the line-height needs to be described in terms of the new font size, not the global one.
Very interesting stuff, can’t wait to try this for myself.
One question (@Geoffrey and Chris): using a px value for font-size disable the ability for IE users to scale their text, doesn’t it? Or am i missing something …
Have you guys had bad experiences with the 62,5% trick? I just started playing around with that one, after using keywords for a long time.
I actually use keywords for my base font size and percentages for everything else. Em’s for the spacing. However, I would assume that doing things that way would make calculating the baselines in this script much more difficult.
Wow this is awesome its look like very sweet!
I’ve been playing around with some vertical flow myself lately, and I must say that the difference it produces when reading content is great!
Nice to see that someone else had a look at the Web Typography Sucks slides (or maybe you attended to SXSW?) and read the 24ways article on vertical rythm! :)
What do you think is the best way to deal with inputs? In Safari they won’t resize to 18px (my chosen line height) and in Firefox they look a tad small.
Any solution? Or do inputs get no love?
Hey Geoffrey. Nice work on the calculator.
One thing—the value of line-height for your p.small class seems incorrect when the base font size is less than 12px. This results in the p.small text having a larger leading than the rest of the text on the page, and as a result it fails to line up.
Hopefully just a small tweak to your calculations.
@Matthew: Yeah, I observed that, too. I’ll see if I can figure out what’s going on (it works for 12px and larger).
I’m wondering about the dollar signs next to the screencasts. We all know that the peepcode screencasts aren’t free but when I was browsing over I shied away from the area immediately. The dollar signs are the only thing I can figure would cause that visceral reaction.
I’m not sure what a better solution would be but it would be interesting to see if your clicks change if you remove the dollar signs.
Much love
@Chuck: Interesting idea. I’ve been wanting to make a Rails plugin for multivariate analysis that renders randomly from a set of partials and tracks associated clicks. Maybe that would be a good place to start.