• Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
  1.5 is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very few websites use anything less than this. And the number of websites that go over 1.48 decreases as you get further from this value.
• Line length (pixels) ÷ line height (pixels) = 27.8
  The average line length is 538.64 pixels (excluding margins and padding), which is pretty large considering that many websites still have body copy that is 12 to 13 pixels in font size.
• Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
  It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of paragraph leading. The reason may be that leading usually includes the space taken up by descenders; and because most characters do not have descenders, additional white space is created under the line.
• Optimal number of characters per line is 55 to 75
  According to classic typographic books, the optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular in practice.

Have any thoughts on what we’ve covered, or know of other useful usability findings? Please leave a comment below.

Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read.

White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.

In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.

Truetype, Font Variants and Antialiasing
A great article on some issues with using Truetype fonts and how they sometimes don’t show up as you had hoped (or planned).

Styling Ordered Lists with CSS
A tutorial for creating a very appealing ordered list with CSS.

Beautiful fonts with @font-face
The basics of using @font-face for inserting truetype fonts within your designs.

Forgotten possibilities of :first-letter in CSS (in Russian)

8 Definitive Web Font Stacks
A collection of eight CSS font stacks that are based on the format of exact font, nearest alternative, platform-wide alternative(s), universal (cross-platform) choice(s), and generic. These are grouped depending on the impression they’re likely to give visitors.

Mike’s Experiments – CSS: Perspective Text
An interesting example of creating text with a perspective effect (so the bottom of a block of text looks closer than the top).

Fonts for web design: a primer
A great guide to typography aimed specifically at web designers that includes an overview of the types of fonts, their appropriate uses, and the use of specialist typefaces for web design.

CSS text-shadow Fun: Realtime Lighting Demo
A really neat example of using the text-shadow property combined with JavaScript to create a lighting demo.

Rendering Quotes With CSS
A guide to using quotation marks in CSS, including how to create standard quotes for different countries.

Six Ways to Style Blockquotes
A tutorial of different methods for styling the blockquote XHTML tag with CSS.

Make OL list start from number different than 1 using CSS
A simple tutorial for starting an ordered list number from any number you want.

Use CSS to Override Default Text Selection Color
Choose any color you want to become the text highlight color on your sites with this method.

CSS Drop Cap Effect
A drop cap can set your site apart, especially if it’s a magazine or book website (or otherwise related to the literary trades). Here’s a CSS method for creating them.

1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both
2. Common choices for headlines are Georgia, Arial and Helvetica
3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande
4. The most popular font size for headings is a range between 18 and 29 pixels
5. The most popular font size for body copy is a range between 12 and 14 pixels
6. Header font size ÷ Body copy font size = 1.96
7. Line height (pixels) ÷ body copy font size (pixels) = 1.48
8. Line length (pixels) ÷ line height (pixels) = 27.8
9. Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
10. The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular
11. Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

Of course these “rules” aren’t set in stone. Rather, they are a set of rough guidelines that you can use as a basis for setting typography. Every website is unique, and you may want to modify your choices at each stage of your design to suit your layout. You can also take a look at the spreadsheet of the study and export its data for further analysis.