This is an area I always dislike when in the design process of a website. That being said I'm trying to be more efficient and I wanted to know when some use a sans serif or serif font how do you identify what the leading would be for each browser and design accordingly? Has anyone used or seen a calculation when using a 14px font height that will determine the leading?
Typography is rather subjective, so I'm not sure if there's an algorithm for determining a "correct"
It's best practice to make all measurements relative to the font size (
The following would give a default leading of
It also would automatically give a leading of
Here are a couple resources on typography and vertical rhythm for web that I've found helpful:
Re. "Has anyone used or seen a calculation...": There won't be a good all-purposes one (see below). Probably the closest is: Adobe applications have a default leading / line height ratio of 1.2 units of leading per 1 unit of font size (16.8 for 14).
That's a generic catch-all that looks okay most places, but looks great nowhere except by chance.
It's probably based on nothing more than some Adobe engineer in the '80s saying "How about 1.2 as a default leading-to-font-size ratio, Bob? Looks okay to me" and Bob saying "Sure, go for it".
As for what to base a calculation on: see Alan G's excellent answer to Optimum line height in relation to font size.
Here's a heavily paraphrased summary of some of the things that influence ideal leading as a list, based on Alan G's answer plus my experiences:
Not that I - or I imagine, any designer - consciously mechanically thinks through any check list like this. These are just observations on what influences the feel of the text. The important thing is that it instinctively feels right and works.
Things like this can be a handy fallback or sanity check for cases where instincts are failing, though.
As thgaskell states, there is no 'formula' other than, in general:
The longer the line length, the more leading/line-spacing you should use.