What is the perfect relationship between a line, font size, and paragraph margin?

Question

Over time, I noticed that adjusting the line-height and adding extra space between paragraphs as relative to the selected font-size can have a huge impact on the readability of website content, but so far I have always selected ad-hoc values ​​for these attributes.

Are there any recommendations in the literature of typography, publication, or psychology on how to adjust the values ​​of these properties relative to each other?

Answer 1

I can’t post a detailed answer, I'm afraid, but I would advise you to read Tim Brown's article “ More Significant Printing ”, List Apart , for guidance.

In fact, it seems that the width ("measure") of the text block should be about 50-60 characters, and line-height be 1.5 (without a unit that will be 1.5 times smaller than font-size , regardless of the units used to set font-size ).

The characters themselves seem to be set around the 16px sign, but Tim suggests using a scale, such as the Golden Ratio , to determine the relative font size of headings, body text, captions, etc.

Answer 2

A deep and mathematical answer to your question can be found in the section "Secret Symphony: The Ultimate Guide to Readable Web Printing": http://www.pearsonified.com/2011/12/golden-ratio-typography.php

The article takes into account three dimensions: line height, font height and page width (well, text width), and, fortunately, they also provide a useful calculator: Golden Ratio Typography Calculator (http://www.pearsonified.com/typography/)