Glyphs (the visual representations of a character) are centered
vertically within an inline box. If the line height is larger than the
content height, half the difference is added as space
at the top; the same amount is also added at the bottom.
That's the case for the main, non bold, text in your example.
When set on a non-replaced inline element, it specifies the height
used to calculate the height of the surrounding line box.
So in the bold text, you'll still have 8.5px above the font-size, which causes the issue.
You can prevent it by setting a line-height smaller than the font-size ( check this demo ). As it's an inline element, and there's no overflow:hidden;
it will still be enterely visible, but it won't add any pixel to the rest of the text's line height.
As far as i know, it's not possible to "stretch" the letters, unless you use some CSS3 properties like transform:scale(value)
etc.
Reference
Code:
<p>ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac <b>ac</b>
ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac</p>
CSS:
p {
line-height:17px;
font-size:15px;
width:150px;
}
b {
font-size:25px;
line-height:1px;
}