• Improve Typography In Your Web Designs

  Date: May 21, 2009  |  Categories: Css  |  Written By: Mike Ballan  

Below are two quick and easy things that I hope will help improve your Typography when coming to design your next website.

First up is the good old “length of a line of type” problem, for the best readability you want your “measure” to be between 40-80 characters, including spaces and for a single-column design 65 characters is considered ideal. but there is an easier way of working out what you need by using Robert Bringhurst’s method to calculate the measure by simply multiplying the type size by 30.

So if the type size is 10px, multiplying it by 30 gives you a measure of 300px or around 65 characters per line.

Next up is Leading, which is just the space between the lines of type in a body of copy, now a good rule with leading is to set the leading 2-5pt larger than the type size, so if you set the type at 12pt, a 15pt or 16pt leading should work well on the web.

body    { font-family:Helvetica, sans-serif; font-size:12px; line-height:16px; }