This post comes as a follow-up to the article I wrote some time ago about how you can achieve greater control over typography and how to align it to a vertical rhythm.
I highly suggest you check that one first as it goes into greater depth and you can get more background information about the issue and only then go on with this one.
At PixelGrade, we’ve successfully used the technique described in the above mentioned article in many of our WordPress themes, but, with time, we’ve had mixed feelings about it. The root of the issue is that WordPress, or any other CMS for what matters, separates content from layout, hence you have no control of the vertical rhythm of your page content.
Besides that, the implementation posed a lot of inconveniences like the need to use JavaScript for aligning images to the baseline or having odd line-height values for certain font-sizes, and so on. Things started to get messy.
While George was working on the design of our next theme and exploring typography, he came up with a new idea. Instead of trying to align everything to a baseline grid, maybe we should just make sure that the spacing between elements is consistent.
We needed the actual distance between elements (not the CSS margin) to be a multiple of a base unit for consistency and having a proper hierarchy, but we wouldn’t force any weird value on the line-height of any element.
distances. This led us to the conclusion that margins should be independent of the font size and probably defined in rems. Later on, this would turn out to give us a greater level of customisability. Win-win.
With this game plan in mind, we started hacking the old baseline mixin we had and, within a few iterations, we came out with an elegant solution. It may not be perfect as there will always be some edge cases that can mess things up, but it’s pretty solid for me.
The main improvements made were the usage of the calc() function in order to separate relative units, and relying on rems (yes, I know, rems are still relative units but they are relative to the font-size of the html element; so we can consider them as being absolute).
This way we managed to avoid using “magic” px values and give a better chance of understanding the outputted code for whoever is looking at it.
I created another gist with the new version of the mixin and a live demo on codepen for demonstration purposes.
Now back to you. How do you handle typography and what are your thoughts about his approach? Could we make it even better?