Aligning type to baseline the right way using SASS
Vertical rhythm is one thing; baseline is another.
Typography is an important part of web design nowadays and free services like Google Web Fonts or Adobe’s Typekit make custom fonts on the web a commodity.
Let’s take it slow and start with a core principle of typography, vertical rhythm. Vertical rhythm is about spacing body text or, more generally, vertical stacked elements, in a consistent manner to give structure and hierarchy to your content.
Some use the body text’s line-height as the measuring unit for the vertical rhythm. But using half of this value is a better choice because it can give you more reliability on automatic calculation of line-height for different font sizes using mixins.
The baseline on the other hand implies that content spread in multiple columns is horizontally aligned.
These two key principles will always ensure your content with structure, hierarchy, and consistency, and make your body text more readable (concepts like optimal line length, modular scale or white-space are not the subject of this article).
Even though vertical rhythm and baseline grids are fundamental in print, the way the web evolved made these concepts unknown or not fully understood by a big part of the web designers/developers out there. If you want to get deeper in understanding these principles you can check out this awesome article on Smashing Magazine (also check the resources at the bottom of the article).
The article on Smashing takes you through each and every step of understanding and implementing a baseline grid in your site. Setting a vertical rhythm shouldn't be very hard. There are many tools out there that can even generate the CSS for setting your vertical rhythm on the scale you choose.
The baseline is the imaginary line upon which a line of text rests.
There is one problem with most of these tools: they bring the baseline concept into discussion without really tackling the problem.
In typography, the baseline is the imaginary line upon which a line of text rests. And it has to be aligned with the grid we use for establishing our vertical rhythm. That’s it.
But here comes the tricky part. We all know how line-height works and that the text will always be vertically aligned to its middle, NOT to the baseline.
We have to find a consistent way of shifting every bit of text the exact amount it needs to get to the baseline, and also not to break the vertical rhythm of the other elements on the page.
You may say “Well… that’s easy!”. You just need to subtract the font size from the line height, divide it by two and move the text downwards by that amount. That may be true but not quite. There is a catch: font size is not the same with the cap height.
In typography, cap height refers to the height of a capital letter above the baseline for a particular typeface.
Now the math wouldn't be that hard. But we can’t really know what the cap height is. That means we have to find that value by trial and error. If you’re lucky you may find info on the em unit and cap height of a specific font on the web. But for most fonts you’ll have to guess or measure it.
So, how do we find out the distance we need to shift the text down with? The cap-height will always be the same relatively to the font-size.
font-size * (line-height - cap-height) / 2
Now that we have that value, we need to move the text downwards. There are two ways of doing it. We can do this by setting position: relative on every element and then set the top property to our amount. By using position: relative we ensure that moving a bit of text downwards doesn't break the vertical rhythm of the other elements on the page. I don’t really like this approach, but if your page is pretty simple, without complicated design elements you can go with this one.
A better way to do it is by using the padding-top. This would break the vertical rhythm for the elements below the one we’re working on, so we need to find a way to avoid that. We could set margin-bottom to the negative value of the padding to compensate it, and use padding-bottom, or border-bottom to put some space between it and the element below.
Harry Roberts wrote an article some time ago on single-direction margins declaration and vertical rhythm that is worth taking a look at. Using his approach you can subtract the amount you need from the margin-bottom, and move it to padding-top.
Let’s imagine a simple scenario to test this out. I’ll define my sizes in pixels, but remember that preferably, the line-height and cap-height will be unit-less values relative to the font-size.
font-size = 16px;
line-height = 24px (1.5);
cap-height = 12px (0.75);
This means that we need to move the text down by 6px. And assuming that all your elements have a declared margin-bottom value of 24px, you need to set padding-top to 6px and overwrite the margin-bottom value to 18px.
These are pretty meticulous calculation and you may not fancy doing them each and every time you need to set font-size to an element. Here’s where SASS comes in to place. Using SASS you can automate this and not have to worry about vertical rhythm or baseline when you’re developing. You still have to find that cap-height to font-size ratio for each font you use, but that’s the easy part.
I've created this Gist with the mixin you can use to set your body text to a baseline grid. You can always add some rem flavor to your declarations (not only for text, but for margins and padding also), and also a way to align your font sizes to a modular scale but that’s up to you.
