Designers love baseline.
I actually found this sentence amongst my notes the other day. It sounded true from the start yet still got me thinking. Yes, designers love baseline. It helps so much, doesn’t it? It keeps copy organized, especially with multicolumn layouts.
There are probably countless examples of great grids where baseline plays important role and numerous books featuring great examples of them. I bet your library is full of those books.
When it comes to the web the situation is somewhat, well, … strange.
You can clearly see the lack of baseline on many websites. And since they are generally multicolumn it is even more noticeable.
I asked few of my graphic designer friends would they use baseline on their web projects and their replies were quite surprising. Most of them didn’t realize that you can use baseline on the web. They thought it was one of those print design features that you can not recreate online.
It sounded as if it a baseline on the web was a myth. But it isn’t. You can easily base your next web project on it.
Have a look at our own site with baseline on.
So, how do you do it?
On a design level, the same way as with print. Set your baseline and base your design on it.
When it comes to coding there are few techniques that can help you with setting your type to baseline. I compiled 3+ great tutorials on how to do it.
1. Setting Web type to a baseline grid – Dev.Opera
2. Setting Web type to a baseline grid – AList Apart
3. Improve your web typography with baseline shift – For a beautiful web
Do you have any examples of your sites with baseline? Post them up in comments.
John from Holidays in Liverpool