Fresh Blurbs

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!

comments powered by Disqus