Best calculation for leading in web design

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?

Answer

Typography is rather subjective, so I’m not sure if there’s an algorithm for determining a “correct” line-height based on the font-face, font-size, font-weight.

It’s best practice to make all measurements relative to the font size (em) instead of a fixed value since users can change their default font size on their device. This allows the user to change the font size without messing up your layout.

The following would give a default leading of 17.5px:

body {
  font-size: 14px;
}
p {
  line-height: 1.25; /* The same as (14px times 1.25) for a value of 17.5px */
}

It also would automatically give a leading of 15px or 20px if the font were changed to 12px or 16px respectively.

Here are a couple resources on typography and vertical rhythm for web that I’ve found helpful:

Elements of Typographic Style Applied to the Web

Compose to a Vertical Rhythm

Attribution
Source : Link , Question Author : DᴀʀᴛʜVᴀᴅᴇʀ , Answer Author : Scott

Leave a Comment