The web lacks a baseline grid
Many webpages on the internet can be tiresome to read. This can be attributed to the backlight in digital screens, but I believe the lack of one feature on the web can be held somewhat accountable for this phenomenon. I believe the web is lacking a decent baseline grid.
A baseline grid comes from print design, and helps the designer to get all lines in the design to start on the same height. It is one of the elementary rules for designing text, yet the web does not have this feature. This is pretty peculiar as the web started as a text only medium. On the web, all lines are just floating around in space, giving absolutely no guidance for your eyes. This floating around in combination with the backlight in the screens make reading texts on web pages tiresome.
As you can see on the screen shot above, the typography on the online version of Washington Post is an absolute mess. This has nothing to do with a bad designer (well actually it does a little tiny bit) but mostly with lacking technology. There simply is no decent implementation of a baseline grid for the web.
The same text on a baseline grid
To create a serene design for pages with a lot of text, you want a grid. You want to be able to align all lines of text on the page on one pattern that is defined at a master level. Of course you can mimic the use of baseline grid by using very precisely scripted margins and paddings for your text elements. The problem with this approach is that you have to take the positioning of each element on your page into account and you will most likely get into trouble when floating elements around with javascript.
My ideal solution would be a CSS-baseline instance, something like the Adobe InDesign implementation. For now I can only dream about using
body {
baseline-increment: 14pt;
}
* {
grid-align: all;
}
If you happen to know a decent way to implement a grid in web design, please contact me. You will receive my eternal gratitude. :)
