Paragraph Text: The Last Frontier of Web Typography

In my last arti­cle, “The Past and Present of Web Typog­ra­phy”, I’ve dis­cussed alter­na­tives to browser core fonts. Since font replace­ment for para­graphs is unre­al­is­tic, for the time being we have to make do with core fonts. If we’re forced to use these sys­tem fonts what sort of con­trol do we have over set­ting them?

Web Type­set­ting Now

• Font Size (%, pix­els, ems, pts)
• Lim­ited Track­ing (± 1 pixel)
• Lead­ing (line height)
• Word Spac­ing

Web Type­set­ting of the Future

• @font-face (non-system fonts)
• Full jus­tify w/ flex­i­ble spacing
• Accu­rate Track­ing (to the dec­i­mal point)
• Con­sis­tent Lead­ing (Base­line Grids)
• Lig­a­tures (ex. Th, fi. fl, ff, ft, fh)
• Hyphen­ation and spe­cial characters *
• Frac­tions, super/subscript *

Print is dead. Did type­set­ting die with it?

For those migrat­ing from the print world, you demand more con­trol over typog­ra­phy. Progress in the web world is glac­ier slow much like get­ting a bil­lion peo­ple to march in the same direc­tion. It takes some major cajol­ing when even the best of us resist change. You may be sur­prised what tools are already avail­able to the web typographer.

Track­ing is “letter-spacing”

Track­ing adjusts over­all let­ter spac­ing. Letter-spacing may not be nec­es­sary in para­graphs. It’s often used in jus­ti­fied columns to even out spac­ing. Sin­gle pixel adjust­ments are the only way for cross browser support.

p {
  letter-spacing: 1px;
}

Lead­ing is “line-height”

Lead­ing (space between the lines) in CSS is called “line-height”. Small incre­ments (.05) are accepted. Of course, the math is eas­ier with round num­bers. Tra­di­tion­ally, line height is set in ems.

p {
  line-height: 1.35em
}

CSS Font Stacks Explained

Think of the font stack as build­ing in a fall­back plan. Lets say you want to use Gara­mond on your web­site, but you know Gara­mond is installed on very few com­put­ers. If it doesn’t exist on your sys­tem, the runner-up takes its place, and so on. If no fonts are found, the browser default (serif, sans-serif, mono­space) is called. As shown below, Geor­gia will be used if nei­ther Gara­mond or “Times New Roman” is found. Note that fonts with mul­ti­ple word names need to be enclosed in quotes.

p {
  font-family: Garamond, Georgia, "Times New Roman", serif;
}

Full Para­graph Style in CSS

p {
  font-family: Garamond, Georgia, "Times New Roman", serif;
  font-size: 100%;
  line-height: 1.3em;
}

Full Para­graph Style in CSS (Shorthand)

p {
  font: 100%/1.3 Garamond, Georgia, "Times New Roman", serif;
}

*php-typography (Also avail­able in a word­press plu­gin) enables more advanced type­set­ting options. Some of which include auto­matic hyphen­ation, spe­cial char­ac­ters (…), em dashes(—), en dashes(1900–2000), frac­tions (½), super­script (3²) and many more.

How do you get the most out of para­graph text? Have any tips/tricks? Com­ment below.