The joys and pains of type on screen (II)

A few months ago, in this previous post, I started to explore whether we can bring print design’s high typographic standards to the screen. The boom in mobile devices has changed the way we consume information nowadays — we can read something from our tablet at home while having a nice glass of wine, but also from our mobile phone while being pushed around by a crowd of people on the tube.

After a few years working in web design, I’ve seen many developments in web typography such us the use of web fonts, rendering plug-ins, etc., but one thing that catches my attention is that we don’t really design with baseline grids on the web.

In print, a baseline grid is the invisible line on which the lines of text rest. It is mathematically calculated by the careful typographer, taking into consideration the leading and the font size.

We can use baseline grids to create layout grids, helping us to position other elements on the page, such as images. This results in consistent and harmonious pages.

With the baseline grid we can also typeset neater layouts, ensuring that lines of text align across several columns.

Although it seems geeky, this care and attention to typographic detailing is what we believe elevates everyday text into something special.

But in web typography, the lines of text don’t work in the same way that they do in print. In print the leading is the distance between baselines, while in web, there’s no leading. Instead there’s a css property called line-height. This is how it works:

The way that web works is a lot looser, and makes it harder to control text placement with precision. The challenge is: can we design websites with a baseline grid?

Some people have been looking into that already and the answer is yes — theoretically. If we understand how the line-height property works, we can set up a baseline grid by fiddling with the numbers and the margins of the paragraphs and build a css stylesheet (see this post). Also, there are some baseline grid frameworks that can be downloaded, for example here and here.

Another example is BBC GEL (Global Experience Language) — the BBC’s design framework for applying all the elements that form the brand consistently across screen platforms. A few years ago they created a clever method for applying baseline grids to web design. To overcome the difference between print and web typography, they calculated what they call ‘css offset’ to adjust the position of the typographic elements so they will always align to a baseline grid of 8px. This is how they explained it.

The problem I see with these type of systems is that they only work for one screen size, but what about the rest? We have to realise that the web is not a static canvas anymore. Websites need to be adapted to every device, and we can’t control the whole spectrum of screen sizes our users browse the web on nowadays. That means, we could spend lot of time setting up a perfect baseline grid for a 24'’ display and then is completely useless on an iPad Mini. Not to mention the browser compatibility issues that can screw it up.

Also, does it make sense to align columns of text with each other nowadays, where we follow a mobile-first approach and therefore all the content often needs to be displayed in one column?

But this shouldn’t stop us from getting a good typographic rhythm on the web. Let’s have a look at the new, updated BBC GEL. To update their method for the multi-device era, they moved from a rigid grid to a more flexible and responsive system. They are still using a 8px baseline grid, but now they have four different style sheets for each screen size.

The leading of each style should be divisible by 4 in order to align to the 8px baseline grid, but some don’t follow that rule (e.g.16/22) because I guess it just didn’t feel right to the eye, so this elements should allow enough space underneath in order to align the next element to the baseline grid. This time they don’t mention the css offset they had before.

It is true that in print, the baseline grid is a tool that can save us a lot of time when arranging elements on a page and its correct use makes sure that all pages are consistent, especially in magazines or long books. Also, for all those typography obsessed, the harmony of a page designed like that can be very enjoyable.

However I’d say that a baseline grid is a very rigorous and solid structure that doesn’t really suit the fluidity of how the web works. This doesn’t mean we shouldn’t care about making pages harmonious and considered. Thinking about typographic choices as a coherent system will work across different screen sizes and keep standards high.

Subscribe to our blog if you don’t want to miss more posts like this one!

Raquel Calonge is a designer at GW+Co