automatically set line-height so that there is no spacing at top and bottom

Question

Text in html has a line-height attribute that determines how much vertical space the characters are given. By default, font size and vertical space do not match. If a span has 50px font size, line-height of 50px will produce a spacing at the bottom and top of the text.

http://jsfiddle.net/7vNpJ/773/

You can fix this by manually adjusting the line-height, such as in this example:

http://jsfiddle.net/7vNpJ/774/

<span>
    BIG TEXT
</span>

span {
    display: inline-block;
    font-size: 50px;
    background-color: green;
    line-height:0.7;
}

Line height of 0.7 only works for this particular font. I am looking for a way to perform this automatically, regardless of the font applied.

So basically I am looking for equation or procedure to set font-size and line-height so that there is zero spacing on top and bottom. What do you recommend that I do? A library that contains a matching line-height for many fonts would also do the trick.

This has been asked several times before, but it looks like there's no automatic way of doing it and it depends on the font. I fear you have to manually adjust the `line-height` setting. See https://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element — Jeremy Thille, Nov 29 '17 at 10:23
Basically, there is no equation to do this as **every typeface is different**. That's not the way typography works. That space is there for a reason and is built into individual typefaces/fonts. — Paulie_D, Nov 29 '17 at 10:23
Check out this article if you want to learn about how it works: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align — Tom Pažourek, Nov 29 '17 at 10:29
How about printing the font on canvas and then find the (vertical) space occupied by colored pixels? If possible, you probably still shouldn't. — René, Nov 29 '17 at 10:43
@René I realized that knowing just line-height isn't enough, because CSS places different spacing on top and bottom for most fonts. Line height after some value start to add spacing on top and bottom. Perhaps some align options could fix this. — sanjihan, Nov 29 '17 at 23:29

score -2 · Answer 1 · edited Dec 15 '17 at 03:29

You can try like this. may be this code helps you:

var fontSize = $('.lineHeightCss').css('font-size').split('px')[0];
var t = fontSize/100*1.42857;
$('.lineHeightCss').css('line-height',t>0?.7:t);

span {
    display: inline-block;
    font-size: 100px;
    background-color: green;
    line-height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="lineHeightCss">
    BIG TEXT
</span>

visit here:https://medium.com/@zkareemz/golden-ratio-62b3b6d4282a

automatically set line-height so that there is no spacing at top and bottom

1 Answers1