Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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.
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.
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.
<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
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.
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.
