Introduction

Creating consistently styled text while not fighting the cascade can be challenge. Today we will look at a common approach to handle that problem, as well as an open source project that uses a variant of the trick to create a consistent and very readable approach to typography.

Common approaches to text sizing

Working with scaleable font sizes takes a bit of planning. The default size for a single em is 16px, and while this is readable, there is some math required to create other font sizes. If you wanted to create a size 12 font, you would do 12/16 = .75em. Here are some common font sizes with the baseline:

  • 8px = .5em
  • 10px = .625em
  • 12px = .75em
  • 16px = 1em
  • 20px = 1.25em
  • 32px = 2em

Luckily, if you don't like dividing by 16 all the time, then there is a common pattern to make this math easy.

Setting the body font size to 62.5% changes the default (1em) font to 10 pixels. This means creating font sizes are all an easy factor of 10. So if you want a size 12 font, its just 1.2em. This approach isn't universally liked, but the biggest complaints are

  1. You have to reset your font sizes for every occurrence.
  2. that 10px is a horrible base font size that you wont actually use

With the current design trends you'll often be changing your font size often, and with good cascading usage then setting the proper base font size on a few container elements isn't too much of a worry.

Another great bonus is this approach works well with the rem unit that we looked at before. The fully baked version of this pattern is:

/* Normalize our font size */
html {
  font-size: 62.5%
}

/* Here we set the default font size, I've chosen 14px */
body {
  font-size: 1.4em;
}

/* We use rem to modify font size throughout the site */
/* As an example, we set our h3 to 20px */
h3 {
  font-size: 2rem;
}

You'll want to be careful with adding this if you are using a lot of third party frameworks, as there may be conflicts if the framework has a typography module.

You can still use this approach and change the the font-size declaration inside of the html directive. Typebase.css is a great Typography base that uses this approach with an effective 22px base font size.

Normalizing Typography

We looked at CSS resets last week, and while they are super helpful in removing browser hiccups, they often leave your rendered pages looking very bland. Base-style systems like Normalize.css are helpful in returning styles to many common elements, but we need another tool for typography.

Enter Typebase.css. It pairs well with Normalize.css, and is built in a clean, extensible way. Its not meant to be loaded from a CDN and forgotten about, but rather become a part of your project and grow with it. The code is clean and simple, so you won't inherit a lot of headaches.

Typebase.css is free from built-in stylistic choices, is well decoupled and easily editable, and provides a great vertical rhythm.

Vertical Rhythm

Vertical rhythm refers to the use of vertical spacing in typography. This makes a substantial impact upon the readability of text on in a browser. Web Typography has a great explanation, if a bit dry. The same article is reference on the Drewish vertical rhythm tool which is a great resource for visually playing with font sizes and line heights before locking them down in code.

A solid approach is to use Normalize.css, Typebase.css, and tweak the font sizes and line heights based upon good looking output from the Drewish tool.

Summary

Today we looked at default font sizing, a common approach to normalize fonts, and some tools for creating good vertical rhythm in your pages. If you want to play with these ideas further, you could take the answer to last week's exercise and try applying Typebase to it, and tweak the font family, size, and line heights. Seeing what makes a page more readable is the best way to intuit some of these more arcane concepts.

Resources