Aligning type to baseline grid with CSS variables

Maintaining a baseline grid on the web is a chore

— Various Authors

&

then something along these lines would follow - Just keep the vertical rhythm, forget about the baseline. This is the key takeaway from most online articles, forum threads, etc. where baseline grids and web are used in the same sentence.

This sentiment was even stronger in times before CSS preprocessors took off. In recent years various mixins and libraries eased the process by doing the math and calculations. Today we can ease the process even more, all courtesy of custom properties aka CSS variables and calc function.

Throwing fluid images in the mix adds a layer of complexity, and from what I know JavaScript is still the best option if you want them to play nicely with your baseline. But that is a story for another day, this one is about aligning type to baseline grid with vanilla CSS.

This is basically just a rewrite of the most common technique to align type to baseline, just without preprocessors. We only need to know the cap height of each particular typeface. This one is easy since there are a lot of online tools to help with that if you don't have access to font's metrics. The links in red are related to baseline grids in general and explanations of the technique used.