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

html typography css
βξhrαng picture βξhrαng · Nov 6, 2011 · Viewed 8.5k times · Source

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?

Answer

Xavi Aznar picture Xavi Aznar · Dec 5, 2012

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

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

Related questions

How to combine bold and italic in CSS?

This W3Schools tutorial taught me how to use the CSS font-style property to make text bold (equivalent to <b&g>this</b> in old-fashioned HTML) as well as how to make text italic (equivalent …

Read More
Can CSS override the bold style of an existing <b> bold tag?

I have a script that has a breadcrumb styled outside of my reach (core files), and I want to override all its styling using CSS. The text looks like this: <div class="someclass"> <b>Some Text&…

Read More
90 degrees rotated text, flush to page top-right with CSS

I know how to rotate text 90 degrees using CSS, but I'm trying to align the text to the top-right of the page (or a parent element) as its 90-degree-rotated self. Is this possible? Example:

Read More