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:
Also worth adding to the mix is Eric Meyer’s Unitless line-heights.
Andrew Rickmann wrote:
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.
Nate Klaiber wrote:
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.
jhon wrote:
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.
Jeen wrote:
Nice site and blog.
Andrew Rickmann wrote:
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.
Patrick Haney wrote:
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!
prestiti personali wrote:
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! ;-)