Mobile app version of vmapp.org
Login or Join
Radia289

: 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

@Radia289

Posted in: #Css #LineHeight #Typography #WebFonts #WebsiteDesign

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.

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Radia289

3 Comments

Sorted by latest first Latest Oldest Best

 

@Smith574

You could separate each line as its own line then manipulate the lines as you like. This could still cause problems but you can move the lines as you're asking.

10% popularity Vote Up Vote Down


 

@Holmes874

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.

10% popularity Vote Up Vote Down


 

@Murray976

Sure, it's perfectly acceptable. There's no rule saying you can't.

With that being said, the two things you have to consider most are


Responsiveness - If the screen or container size is too small then some text may be pushed to the next line which messes up the whole styling.
Changing text later on - If the text is changed on a later date to something new then the specific styling applied for this set of letters would possibly mess up the way the new text looks like. It could be too close or too far apart, etc.


The question should be: is it worth it? It depends on the situation, but often times in my experience the answer has been no.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme