Web Typography Quick Wins: Let Your Body Text Breathe
The appearence of a text can have significant impact on our ability to: comprehend, enjoy or even be willing to finish reading the text. Unfortunately, default browser font styles still reflect the needs of devices from a different century, and as such are too dense and small, if we are honest about it.
While web typography is a very large subject, way beyond what can be covered in a short Christmas blog post, there are some quick style tweeks that can bring big wins. The tweaks are CSS rules/values commonly used by web typography enthusiasts that, I believe, greatly improve the reading pleasure when applied to body text.
Following are some sure-fire improvements for body text styling, per yours truly:
- Depending on a font and the UI, use font sizes 16px–22px for body text.
- Make line height at least 1.3334, at most 1.6667 the size of the font.
- Most fonts look better with font-weight: 300 or 200. Those values are slightly less than the default value corresponding to “normal”: 400. The slight reduction can, however, make body text look significantly more airy and pleasant on eyes.
- Some fonts could use slightly increased letter-spacing when used on the web.
- The “straight black” (#000000) is rarely a good font color choice (@see: Ian Storm Taylor’s take on why). A pleasant shade of gray is usually more suitable. Popular, easy-to-remember choices include: #333333 and #555555.
Putting it all together:
body {
font-size: 16px;
font-weight: 300;
line-height: 1.5;
letter-spacing: .04em;
color: #555555;
}
Merry Christmas and Happy Holidays!