W3C Tech Reports and Readability

I noticed that I always print any W3C TR in order to read it… and I dis­covered one reason: the lack of a (good) typo­graphic style.

Basic­ally the issues are:

  1. the text is too wide (if you shrink the win­dow you have to scroll hori­zont­ally for tables and code samples)
  2. the line spa­cing is too small, and makes dif­fi­cult to fol­low the line, espe­cially on lists which some­times have mixed fonts (usu­ally mono­spaced and serif)
  3. there is no ver­tical rhythm, and this tires your eyes (read brain)

For­tu­nately these issues are addressed for the web in ‘The Ele­ments of Typo­graphic Style Applied to the Web’:

  1. Any­thing from 45 to 75 char­ac­ters is widely regarded as a sat­is­fact­ory length of line for a single-​column page set in a serifed text face in a text size. The 66-​character line (count­ing both let­ters and spaces) is widely regarded as ideal. For mul­tiple column work, a bet­ter aver­age is 40 to 50 char­ac­ters.” http://​webty​po​graphy​.net/​R​h​y​t​h​m​_​a​n​d​_​P​r​o​p​o​r​t​i​o​n​/​H​o​r​i​z​o​n​t​a​l​_​M​o​t​i​o​n​/​2​.​1​.2/
  2. Ver­tical space is metered in a dif­fer­ent way [to hori­zontal space]. You must choose not only the over­all meas­ure — the depth of the column or page — but also a basic rhyth­mical unit. This unit is the lead­ing, which is the dis­tance from one baseline to the next.” http://​webty​po​graphy​.net/​R​h​y​t​h​m​_​a​n​d​_​P​r​o​p​o​r​t​i​o​n​/​V​e​r​t​i​c​a​l​_​M​o​t​i​o​n​/​2​.​2​.1/
  3. Head­ings, sub­heads, block quo­ta­tions, foot­notes, illus­tra­tions, cap­tions and other intru­sions into the text cre­ate syn­co­pa­tions and vari­ations against the base rhythm of reg­u­larly leaded lines. These vari­ations can and should add life to the page, but the main text should also return after each vari­ation pre­cisely on beat and in phase.” http://​webty​po​graphy​.net/​R​h​y​t​h​m​_​a​n​d​_​P​r​o​p​o​r​t​i​o​n​/​V​e​r​t​i​c​a​l​_​M​o​t​i​o​n​/​2​.​2​.2/

So I gen­er­ated with the Geof­frey Grosen­bach’s ‘Baseline Rhythm Cal­cu­lator’ a proper CSS file, tweaked it a bit accord­ing to the above rules and made a book­mark­let to insert it when you need to make a report screen
read­able, drag this link Read­able TR onto your book­mark tool­bar. Enjoy!