How to properly set the css leading

I have a situation trying to figured it out how o properly use and set the css leading when we have something like this:

Even if the line-height is the same, the first 2 lines look pretty far away from eachother. On the other hand, line 2 and 3 look closer. Having said that, is it ok to use different custom line-height values in order to create equal visual space between the lines? thanks.

Answer

There’s different ways to answer this.

Purely from a visual/graphic design standpoint, yes, you can space your text in any way you see fit to make it look good. Often we need to adjust typography optically by hand to make things ‘feel’ right even if mathematically they are off.

Technically, it depends on the context of your markup. If this is one paragraph, then no, there’s no real way to give each line it’s own line height within a paragraph, because there’s no way to predict which text will be contained within one line. Line wrap can vary from system to system/browser to browser/user to user. The reason is that you do not have absolute control over a person’s type within the browser. Think of web design as ‘suggesting’ a layout, but not dictating.

The reason you don’t have absolute control is because there are many versions of fonts, so one person may have one version that has slightly different metrics than another. In addition, operating systems and web browsers all of default settings–including font size–that users can change at their will to suit their own needs.

Given all that, it’s usually going to be quite impractical to do this.

However, there are times when it make work. For instance, if it’s 3 short lines, with plenty of room on each side to expand if need be, then give it a go. At that point, however, since line height applies to an element as a whole, each line of text would have to be wrapped in its own block level element. So at that point, you could use line-height, or padding, or margin, or any combination to tweak your spacing.

Attribution
Source : Link , Question Author : typo_ , Answer Author : DA01

Leave a Comment