@media - Five Steps To Better Typography

Next up was Mark Boulton, who wanted us to work with typography in a better way.

• Be Appropriate & Adaptable
  Typefaces tell stories, and the web is still playing catchup with this power. Comic Sans is appropriate for the menu at a greasy spoon cafe; you wouldn't want an invitation to a Black Tie event done in it though. Similarly, the BBC's use of Gill Sans evokes order and authority. The BBC logo has a twist - by reversing the type and blocking out the shapes of Gill Sans.
  Don't let type and design get in the way of words.
  Be adaptable to requirements, and appropriate for the story.
  
  
• Use Rhythm
  Richard Rutter's Compose To A Vertical Rhythm explains about using the line height and leading of your blocks of text to best advantage. The basic theory goes: 12px font height with 18px between lines, give a line height of 1.5. You can use incremental leading to make 4 lines of text in the main body of a page line up with 5 lines of text in a sidebar.
  [Text in the sidebar bears no relation to the main body copy. It looks messy.]
  The maths gets a bit hairy: 18px x 4 lines = 72px for the main body. 72px ÷ 5 lines = 14.4px for the sidebar
  If you're using 10px height for your sidebar text, 14.4 ÷ 10px = 1.44 line height. You may find the sidebar top-margin property needs a bit of tweaking to get it to line up properly.
  [This looks much better now everything is aligned vertically]
  
  
• Optical Grey
  If you squint at a block of text, you'll see the page has different tonal ranges depending on font, leading, letter spacing etc.
  Verdana has a more open shape, so is paler at smaller sizes.
  Combining serif and sans-serif fonts can be effective, giving different "colours". Minimize dark grey and balance the line height.
  
  
• Use The Right Tools For The Job
  Hyphens "-" are NOT em dashes!! "—". Use an em — or en – where appropriate.
  
  
• Use a Grid System
  Use grids as a tool to help you organise information. How to decide how big the grid unit should be? You can subdivide the units too - you might have a 3em high by 4.5em wide block, which divides nicely into 2x3 squares each of 1.5em width and height.
  Choose gutter sizes carefully, it can depend on the relationship between whitespace and font size.
  Using Alternate Row colours in tables must be done with care - don't use colours which are too strong.
  Set type to your grid, and align everything! The smallest error can really stick out.

In Summary
Typography is all about the details. Tiny increments can make a huge difference. The full slides are available at Mark's website.