How do you decide the ratio between font-size & line-height?

Many designers will leave applications at their default setting – which is typically 120% of type size (at least for Adobe software).

How or when to alter this is highly dependent upon many things:

• Actual typeface
  • Some typefaces inherently demand more or less line spacing. 120% for some typefaces can cause ascenders/descenders to overlap. While for other typefaces 120% may create large spacing almost equal to an addition line. IT’s all in how the font was encoded.
• Target demographic
  • Younger audiences have far less trouble tracking lines of text. So the older the demographic the more additional line spacing is beneficial.
• Desired aesthetics
  • If their is a desire to make text unpleasant to read, as in disclaimers or legal-ease, tightening line spacing can make text seem less important. Conversely, increasing line spacing can add an air of openness and ease.

Ultimately line spacing is a choice a designer should consciously make, the same as choosing colors or choosing type sizes. You are correct in assuming there’s no canonical answer. Each piece is unique and requires an individual assessment as to what is appropriate.

The goal in most instances is to ensure glyphs do not overlap or would not overlap – i.e. even though a g and a b aren’t right above one another and other glyphs allow these to display without overlap, if they were on top of one another they shouldn’t overlap. Of course, one may consciously choose to overlap glyphs for a specific aesthetic.

In terms of increased line-spacing, the goal for most text is to ensure readers can track one line to the next without losing their place. Rhythm is important and any increase in line-spacing should help to assist rhythm, not hinder it.

Personally, I tend to prefer less than 120% for headlines/sub-headlines – often 100-110%. For basic paragraph text, I generally prefer more than 120% for line-spacing – often 140-150%. But these are merely my personal preferences.

For the web… this all translates to roughly a 1.0 to 1.1 line-height property for headlines and a 1.3 to 1.5 line-height property for body copy.