2

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.

  • Your baselines that you drew are not even. The line height actually is. That one line has descenders and the rest don't is a bit of an optical illusion. – DA01 Jul 18 '15 at 4:26
  • true it's all about optical illusion that's the point.The line height is the same for the entire paragraph. – Sara_ Jul 18 '15 at 4:35
4

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.

3

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

  1. 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.

  2. 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.

  • Thank you for your fast answer, in my case, the text will be the same forever :) it's about a paragraph that will stay there on the page for good. Talking about responsiveness, the page is not for mobile/tablet screens. – Sara_ Jul 17 '15 at 17:43
  • @typo_78 if it's a paragraph, then, no, you can't give each line a separate line-height, as there is no way for you to predict line wrapping. – DA01 Jul 18 '15 at 4:25
  • @DA01 I think he allows wrappers within, meaning each line has it's own element surrounding it. Could be p > span relationships – Zach Saucier Jul 18 '15 at 4:49
  • It will be a short paragraph (a few lines) font-size around 35-40px like we have in the shown example, placed into a column. Every line will be created separately<p> ... </p >having different line-height values. . Line wrapping could occur if the page is resized to small sizes, and the column have a responsive option set right? but it's not my case – Sara_ Jul 18 '15 at 4:51
  • @ZachSaucier technically p tags can't contain block children. But regardless, the issue isn't the markup--it's that one has no real control over the fonts on an end-users browser. System, user, and browser preferences can all change things enough to cause havoc with manual line wrapping. If we're talking a headline, then sure, but if we're talking paragraphs of text, this isn't a practical solution. – DA01 Jul 18 '15 at 5:01
-2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.