Baseline Grids. Mastering the Art of Fine Typesetting.

 

Butterick has an excellent online book, Practical Typography: Typography in Ten Minutes.

“The ty­po­graphic qual­ity of your [text heavy] doc­u­ment is de­ter­mined largely by how the body text looks. Why? Be­cause there’s more body text than any­thing else. So start every project by mak­ing the body text look good, then worry about the rest.” The ap­pear­ance of the body text is de­ter­mined pri­mar­ily by these three ty­po­graphic choices (plus typeface choice covered in another post!):

1. point size is the size of the let­ters. In print, a com­fort­able range for body text is approximately 9–12 point in serif and 7.5–10 in sans. Typefaces with larger x-heights may be more easily read at smaller sizes. On the web, the range may be approximately 15–25 pix­els. Not every font ap­pears equally large at a given point size, so be pre­pared to ad­just as necessary.

2. line spac­ing (leading) is the ver­ti­cal dis­tance be­tween lines. It should be 120–145% of the point size. In word proces­sors, use the “Ex­act” line-spac­ing op­tion to achieve this. The de­fault sin­gle-line op­tion is too tight; the 1½-line op­tion is too loose. In CSS, use line-height.

3. line length (measure) is the hor­i­zon­tal width of the text block. Line length may be an av­er­age of 45–90 char­ac­ters per line. 
   
   Robert Bringhurst says: “Anything from 45–75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40–50 characters.” 
   
   
   
    

Here are some pages from our review of grid development. Frank Chimero’s advice on the steps for building a grid for page layout follows:

 

 

Above from Ellen Lupton’s Thinking With Type site

More great references:

Tim Brown - More Perfect Typography from Build on Vimeo.

Tim Brown — Universal Typography (SmashingConf NYC 2014) from Smashing Magazine on Vimeo.

 

Jason Santa Maria - On Web Typography from Build on Vimeo.

 

Through and with our work are seeking to:

— achieve greater harmony in typography
— create more meaningful typography
— using body copy to develop a typographic grid for print and UX
— mastering the art of fine typesetting

Book and site titled, Explorations in Typography / Mastering the Art of Fine Typesetting and the accompanying amazing site. Here are some images from the site.