What are standard ratios for typography on the web?

In laying out a web design, I often try to make sure that my typography is proportional and consistent. However, I haven’t been able to find any definitive articles or resources on what ratios and sizes should be used. Specifically, what are the recommended or standard practices for:

  • Font-size
  • Line-height
  • Line-width
  • Line-spacing

Please consider both paragraph and header text in your answers. Also, any studies on the effectiveness of various ratios or metrics would be very useful.

Answer

Robert Bringhurst’s Elements of Typographic Style is a thorough and wonderful reference for things like this. It’s long but very valuable.

A lot of designers recommend a standard grid of lines so that a line+padding will always fit within, say, 16 pixels. So anything less than that would have a line height of 16, everything above that would have line height 32.

The ideal length of a line for reading text is held to be 45 characters by some and 55-75 by other sources.

There is some common averages of websites here: Typographic Design Patterns and Best Practices

Attribution
Source : Link , Question Author : Virtuosi Media , Answer Author : JohnB

Leave a Comment