Bring back the baseline
Here is an explained technique we use at Strobe to bring the baseline to web typography.
Situation #
An awkward invisible fence that surrounds our elements, stunting vertical rhythm.
The web’s box model doesn’t support baselines for vertical measurement between other objects.
When inspecting an element, you’ll notice a certain amount of dead space that we can’t control. (See the space around the text in the blue highlighted area above.) This is caused by a combination of cap height, descender height and line-height artefacts. This is an awkward invisible fence that surrounds our elements, stunting vertical rhythm.
In print #
Print designers use baselines to embrace a natural vertical rhythm. After all, it’s the centrepiece of typographic elements. But this is because the option is there, within InDesign for example, to perform this kind of measurement.
Our task #
In a recent project, the fantastic AREA 17, a design agency in New York & Paris, presented a flat visual to Strobe which utilised the baseline heavily. We were tasked to build this. However, the last thing we wanted to do was scatter ‘magic numbers’ all over the place.
Solution #
So we came up with a solution that has the effect of a flowing baseline.
p { font: 1em/1.5 sans-serif; }
p:before, p:after { content: ''; display: block; }
p:before { margin-top: -1.08em; }
p:after { height: 1px; margin-top: -0.41em; }
Utilising pseudo elements, we can essentially push the paragraph element out of its container. This has the following effect on the box model:
Demo #
In this demo, you’ll see how multiple columns work, how we can support lists, and how relative font sizing works.
Note: When working with relative units, it will occasionally round incorrectly, and the baseline will be out by 1 pixel. It seems to be down to the browser, but if anyone can propose a fix for this, awesome!
Conclusion #
We’ve used this on a few projects now, and we’ve started to employ native baseline measurements at design stage. It’s massively exciting, and it feels like the correct way to measure.
It’s not perfect, such as the 1 pixel issue above, but we think it’s worth using it in most cases.
Let us know what you create with your newly found baseline.