Can you fake line height, but close the gap?

[simona6]

We are using a font called Coolvetica.  A wonderful Helvetica like font, but it has an enormous lineheight when the font is large, around 80px+.

On some cases it's fine, and the text will close in over each other, but sometimes, such as with transparency to create a gradient background, you have to increase lineheight to see all the text, with tails, such as p and and g.

Is there a way to fake the line height, but 'close in' the gap it creates?

[Barand]

Hve you tried using the CSS line-height property?

[simona6]

That's the issue.  If I set the line-height, it has to go almost stupid high to fit all the letter in... hence, it also add vast space top and bottom.

The is the problen.

[requinix]

How about a screenshot/image of what "close in" means?

[simona6]

First photo - this is "close in", so it is tighter together, and looks better, but check out the bottom of 'g' in Design.

The second photo is how much line height I have to add, so it doesn't do it - but doesn't look as good.

So I am looking for a way around this.

Doesn't happen quite as much if there is no gradient, but it still can.  Specially on a phone.

 

[requinix]

Not sure what markup you have, but the simplest solution seems to be putting the two lines into their own elements and positioning those as you want.

[simona6]

They are.  But the bottom one, when you bring up the line height, to close it up... the 'g' is cut off as you can see.

[requinix]

If they're separate from each other then why are you altering the line-height?

And is this visible somewhere we can see for ourselves?

[simona6]

Here's a great example.  I changed the 'boundaries' letter to a 'p' instead of a 'd' to show you.

The issue seems to be only even on the final line, as it sort of "cuts it off".  I think it is because I am using the gradient CSS. 

.ripple {
    background: -webkit-linear-gradient(0deg,#7521ff 20%,#33b6f1 50%,#b8ff21 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

If I take that off, and make it white, it all shows.  Any ideas?

[simona6]

Ahh it looks like it might be as simple as bottom padding.... 

[Barand]

Confirmed

[jodunno]

try the magical span 'shroom. It works for me in edge/chrome and ff:

	<style>
.ripple {
    background: -webkit-linear-gradient(0deg,#7521ff 20%,#33b6f1 50%,#b8ff21 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.see { width: 400px; font-family: coolvetica; font-size: 6em; line-height: 0.8em; box-sizing: content-box; }
</style>
<div class="see"><span class="ripple">Big time hosting<wbr> Low cost design</span></div>
<br>
<div>
<div class="see"><span class="ripple">Big time hosting</span></div>
<div class="see"><span class="ripple">Low cost design</span></div>
</div>
	

and you should still be able to adjust the line height

*warning: calculated line-height adjustments may also need to be added to parent elements in certain cases