Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the ideal relationship between line-height, font-size, and paragraph margin?

For a long time I've noticed that adjusting line-height and adding some extra space between paragraphs both relative to the chosen font-size can make a huge impact on the readability of Web site content, but so far I have always selected ad-hoc values for these attributes.

Are there any recommendations in typography, publishing, or psychology literature for how to adjust values for these properties relative to each other?

like image 940
Behrang Avatar asked Nov 06 '11 04:11

Behrang


People also ask

What is ideal paragraph spacing?

Line spacing should be at least a space-and-a-half within paragraphs. So around 150 percent or 1.5 times the font size. Spacing following paragraphs should be at least two times the font size. Spacing between letters should be at least 0.12 times the font size.

What is the ideal line length for best readability?

Ruder concluded that the optimal line length for body text is 50–60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable.

What is the best leading for readability?

The leading, or space between each line of text, can also affect readability. In general, leading that is 2-3 points larger than the typeface enhances readability. Leading that is too much larger or smaller than that, however, can make the type more difficult to read.

What is line height in font?

Line height is the vertical distance between two lines of type, measured from the baseline of one line of type to the baseline of the next. Traditionally, in metal type, this was the combined measurement of the font size and the strips of lead that were inserted between each row (called “leading”) of type.


1 Answers

I can't post a detailed answer, I'm afraid, but I'd suggest that you read Tim Brown's article 'More Meaningful Typography', at A List Apart, for guidance.

In essence, it seems that the width ('measure') of a block of text should be around 50-60 characters, the line-height set at 1.5 (without a unit, which will be 1.5 times the font-size, regardless of the units used to set the font-size).

Characters themselves seem to be set around the 16px mark, but Tim suggests using a scale, such as that represented by the Golden Ratio to define the relative font-sizing of headings, body text, captions and so forth.

like image 159
David Thomas Avatar answered Sep 21 '22 12:09

David Thomas