Keeping Text Rhythm

Web Typography is a powerful tool. The adherence or neglect to its rules respectively enhances or destroys a website. With this in mind, I have chosen one of the many intricacies of typography, text rhythm, as the subject for my class demonstration. The following are the online reference notes from my presentation.

Resources

The Elements of Typographic Style Applied to the Web
Section 2.2.2 & Section 3.1.1
Alistapart | How to Size Text in CSS

Website Examples

The Setup

  • Set the Font Size for the Body Element
    body { font-size: 100%; }

Formulas

  • Points to Pixels
    pt ÷ 0.75 = px
  • Pixels to Ems
    px ÷ 16px* = em
    (* if body font-size is set to 16px or 100%)
  • Calculate Element's Line Height
    (p line-height) px ÷ (h1 line-height) px = em
  • Offset Element's Vertical Position within the Line Height
    (line-height) em ÷ 2 = ½ em
    (line-height) em + ½ em = 1½ em
    (line-height) em - ½ em = ½ em

Offset Example

  • Set the font size, line height, and the top and bottom margins for content h1:
    #content h1 {
   font-size: 2.1875em;
   line-height: 0.6;
   margin-top: 0.6em;
   margin-bottom: 0.6em; }
  • Calculate ½ of the h1 line height to offset its vertical alignment:
    0.6em ÷ 2 = 0.3em
    0.6em + 0.3em = 0.9em
    0.6em - 0.3em = 0.3em
  • Change the h1 top and bottom margins to the new line-height values:
    #content h1 {
   font-size: 2.1875em;
   line-height: 0.6;
   margin-top: 0.9em;
   margin-bottom: 0.3em; }

Legibility Note

"Set text columns to no wider than 365 pixels. With standard text, this yields a line of about fifty characters, averaging about nine to ten words per line."

This will vary depending upon your font and it size. You will have to play with it; somewhere around 350px - 400px is probably a good range to start with.