¶ Interest in Web typography has really picked up over the past year. One subject in particular has piqued people’s interest: vertical rhythm and alignment of baselines. Here’s a compilation of tutorials on the subject, in chronological order:
- Add and delete vertical space in measured intervals on The Elements of Typographic Style Applied to the Web
- Compose to a Vertical Rhythm on 24 Ways
- Type that keeps the beat on Signals vs. Noise
- Setting Type on the Web to a Baseline Grid on A List Apart
- Typography: Baseline Rhythm Deciphered on Sitepoint
Also worth adding to the mix is Eric Meyer’s Unitless line-heights.
Comments
1
There are also some tools that help people to implement baseline rhythm.
The baseline rhythm calculator is one – http://topfunky.com/baseline-rhythm-calculator/ – and I have just posted an article on my blog with PHP functions to calculate line heights, padding, margins, and take into account borders, etc.
2
Recently finished reading each of the articles about a week ago. I am very intrigued with both the horizontal and vertical rhythm. Nice concise list.
I find it a little challenging (still) to get everything aligned perfectly, especially in different layout options – and places where images are placed/sized differently. However, when they do line up – it makes for a much more pleasant experience.
3
Just one point I’d like to question, from a best practice, usability position, why are font sizes specified in pixels?
I see Geoffrey’s tool requires font sizes to be specified in pixels, and in the auto-generated CSS is produces code for the font in pixels and the line height in em’s.
4
Nice site and blog.
5
Jhon, If you are referring to my auto generated stylesheets the font sizes are specified in pixels as they are easy to relate to, but the actual output is in EMs so they are all resizeable.
6
I haven’t really had the chance to wrap my head around baseline techniques just yet, but this seems like a good list to start from. I’ve already read Wilson Miner’s article over at A List Apart, but the others are now on my “to read” list as well. Thanks!
7
Very useful set of tutorials… I’m not a professional but I was just looking for something like that… I’m going to try the tool at topfunky.com posted by Andrew. Thanks! ;-)
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.