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.

9 Responses to Paragraph Text: The Last Frontier of Web Typography

  1. I’ve been brows­ing online more than 3 hours today, yet I never found any inter­est­ing arti­cle like yours. It’s pretty worth enough for me. In my view, if all web­mas­ters and blog­gers made good con­tent as you did, the web will be a lot more use­ful than ever before.

  2. I know this if off topic but I’m look­ing into start­ing my own weblog and was curi­ous what all is needed to get set up? I’m assum­ing hav­ing a blog like yours would cost a pretty penny? I’m not very inter­net savvy so I’m not 100% sure. Any tips or advice would be greatly appre­ci­ated. Kudos

  3. I know this web page presents qual­ity based arti­cles and extra data, is there
    any other site which presents these kinds of infor­ma­tion in quality?

  4. Howdy are using Woгdcpreѕs for your blog plat­form?
    I’m new to the blog world but I’m try­ing to get started and set up my own.
    Do you need any html сoding eхpertise to make your own blog?
    Any help would be really appreciated!

  5. Thanks for ask­ing. The only puts Im aware of are the RSS give about this web site, @existing_Patrick on Twit­ter, and a per­son could intend at check out­side the Sher­lock Holmes web­site with WikiAn­swers anchor

  6. Wow that was unusual. I just wrote an really long com­ment
    but after I clicked sub­mit my com­ment didn’t appear. Grrrr…
    well I’m not writ­ing all that over again. Any­ways,
    just wanted to say excel­lent blog!

  7. Excel­lent post. I was check­ing con­tin­u­ously this weblog and I am impressed!
    Extremely use­ful info par­tic­u­larly the clos­ing phase :) I care for such infor­ma­tion much.

    I used to be seek­ing this cer­tain infor­ma­tion for a very long time.
    Thanks and good luck.

  8. What’s up i am kavin, its my first occa­sion to com­ment­ing any­place,
    when i read this piece of writ­ing i thought i could also cre­ate com­ment due
    to this good piece of writing.

  9. I think every­thing com­posed made a ton of sense.
    But, what about this? sup­pose you added a lit­tle con­tent?
    I mean, I don’t want to tell you how to run your web­site, how­ever
    what if you added a post title that makes peo­ple desire more?
    I mean Para­graph Text: The Last Fron­tier of Web Typog­ra­phy
    | George But­ler Web Design — Halifax Dru­pal Web Design is a lit­tle bor­ing.
    You ought to peek at Yahoo’s front page and watch how they cre­ate news
    titles to get peo­ple inter­ested. You might add a video or a related pic or two to grab
    read­ers excited about what you’ve writ­ten. Just my opin­ion, it might bring your
    posts a lit­tle livelier.

Leave a Reply

Web Design Ideas and Resources