Setting typography with minimum effort

Published by bolmaster2

UPDATE: I’ve changed the CSS of the site. So if you inspect it you will see that some things I state in the text is not true anymore 😓.

As I’m slowly improving the look and feel of this site, one of the first and most important things is typography. Not that surprising.

Anyway, I just want my typography to work. I don’t wanna care about it every time I write an article. I write those articles in markdown, and then it’s converted with jekyll into semantic HTML. At least, I hope it’s semantic 😅.

So when I write a <h2> header I just want it to work correctly with the paragraph beneath and when I write a list I want it to look good together with everything else. Out of the box. No special CSS classes that I need to add. Just pure markdown converted into pure HTML. This makes me wonder what’s unpure HTML? I think what I mean with pure is that it’s semantic and that you don’t need to do anything extra than just write plain markdown. So unpure will obviously be something bloated with extra classes and hard to write.

Resources

This is a <h2> with a value of 2.25rem

So the above resources will make you understand:

“Oh, there’s a lot of people that’s already been thinking about this for years”

So I test some of the ratios you can choose from and settle on “the perfect five”, meaning everything will be multiplied by 1.5. So I multiply my headers by that and boom. Done. Not much more to do than that. At least for now. I said minimum effort, didn’t I? 😆.

Basically what I’m saying this is a good basic starting point. And when using rem it’s really simple.

html {
  font-size: 18px;
}

body {
  line-height: 1.5;
}

h1 {
  font-size: 2.25rem; /* 1.5 * 1.5 */
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1rem;
}

pre, code, small {
  font-size: 0.667rem; /* 1 / 1.5 */
}

This is a <h3> with a value of 1rem

That means, the same as the paragraph text. Ok. Some time in the future I promise I will write an article about vertical rhythm 🌸.