How to solve Line height issue with custom font in HTML? - html

Question

I have an issue while using custom font(poppins-regular.ttf). The issue is when I set background-color for span tag which is wrapper of text.
The words like g,y,.. etc got cut at the bottom. But, If I change the font-family from poppinsRegular to tahoma it looks good.
But the real issue here is i need to maintain same line-height
.passageBody, .passageBody2 {
width: 414px;
padding: 10px 0;
margin: 0px;
font-size: 24px;
line-height: 32px;
font-family: 'Poppins', sans-serif;
}
.passageBody2 {
font-family: tahoma;
}
.highlightPhrase {
background-color: yellow;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div class="passageBody">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
<hr/>
<div class="passageBody2">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
Example jsFiddle link here...

Answer 1

You can either remove the line-height property or try to set it in em units.
line-height: 1.5em;
Edit 1
If you don't want to change line-height, use vertical align with inline display
.highlightPhrase {
background-color: yellow;
display: inline;
vertical-align: text-bottom;
}
Edit 2
The above code might have visually changed the line height. So this example might be an elegant solution to your problem. Just wrap the content in another element and set the position to relative, so that background of each line will not hide the above line.
.highlightPhrase span {
position:relative;
}
or you can use some small image as background and repeat it to highlight entire text.

Answer 2

Problem here is the vertical placement of the glyphs.
Designer decided to set the font glyphs like that.
So, basically designer decided how much space there is below the baseline, and how much space is above the height of uppercase letters. Typically these spaces are equal, but they don't need to be.
I think that only solution for you is to put bigger line-height on the paragraph that is using that font or just choose a different font.

Answer 3

Change:
line-height: 32px; to line-height: auto;

Answer 4

Try this
.highlightPhrase {
padding:5px;
}