Aligning type to baseline the right way using Sass

Developer Razvan Onofrei:

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.

Really enjoyed reading through the wonky breakdown between cap height, line-height and overall alignment on the web. I expect to play around with his alignment gist at some point.