About the baseline myth and 3+ tutorials on how to use baseline on the web
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.
Consistent baselines really do add a finesse to a website, but are often quite complex to manage. They need to be considered from the very start by being based on a standard unit of measurement, but then you should be fine.
Of course, I’m saying that in the knowledge that I have never managed to do this properly. I inevitably get confused in the middle of seemingly endless ems and %s.