Gridding the 960 using a 20px-based-ruler and a 20px baseline
June 8th, 2007 by sissT
This a follow up of the post “Gridding the 960 using a 16px-based-ruler” about a month ago and is based on the recent discussions about using baselines or a basic leading for typography on websites.
In my last webdesign layouts I tried to establish a baseline not only for the typography, but for the hole page. I have chosen 20px for the basic leading. This may seem quite high, but with a font size of 12px the line height is 1,667em which suits the typeface, text and measure.
“Text on the web almost always benefits from an increase in line height, and figures upwards of 1.3 are common” Quote webtypography.net.
I use 12px/1,667em at the lighthouse keepers` cat too.
Beyond using this rhythms on my text I work with the baseline building up the hole page. My header, my lists, my margins and paddings are all based on 20px. This leads to an simple and harmonic design.
It seems not very sensible to stick to the 16px ruler while using a 20px baseline. I changed my ruler to 20px usually using a 80px or 120px grid for the layout.
I made an update of the background grid image which shows all this quite good. I am happy to share it.
More about using baselines in webdesign:
Choose a basic leading that suits the typeface, text and measure by Richard Rutter aided by Steve Marshall.
Setting Type on the Web to a Baseline Grid by Wilson Miner (a list apart)
Compose to a Vertical Rhythm by Richard Rutter (24 ways)
RSS feed.