8 micro tips for remarkably better typography

Small details that will greatly improve the readability and aesthetics of your website

Part 2 of this series with 8 more micro tips is out and you can read it here.

Typography is so much more than picking a font and deciding what sizes to use for headings and body text. It could be regarded as its own branch of science. And it’s not just science either, it’s a mix between science and art.

But I don’t want to get into that in this blog post. Yes, it takes a lot of time and effort to craft beautiful and original typography, but what if you don’t have the time? What if you want to quickly improve the typography on your website in just a matter of minutes?

Today, I want to show you how you can make your typography remarkable with eight micro tips in less than eight minutes. Let’s go!

1. How lightening your font weights on a dark background can improve aesthetics and readability

Two things have become popular in the design industry lately — dark modes and variable fonts. But most websites make this mistake when they add a dark mode. They keep the font weights intact. If a heading is set in bold on light mode, it’ll have the same weight when the user switches to dark mode.

This is a problem because light text on a dark background looks heavier. It looks unpolished and can even impact the readability of the text (left example in Fig 1). My recommendation is to consider using a variable font and adjusting the font weight in dark mode. Reduce it by 50. So if the font is set to bold in light mode (bold equals 700), reduce it to 650 (right example in Fig 1). Now your text looks refined and it’s easier on the eye, which means it’s easier to read.

Fig 1: A comparison of weight 700 versus 650 on a dark background.

2. Why reducing the line height of headings drastically improves their appearance

Here’s the thing with headings — they’re generally short. Usually one line of text, sometimes…