44

I'm calling $("#foobar").css("line-height") and getting back "normal". How do I translate this to a pixel amount? Is "normal" defined in the CSS spec or is it browser specific?

2
  • Which browser/platform were you using? A live demo might help too (jsbin.com and jsfiddle.net are both good). Firefox 3.6.8 and Chrome 6.0.472.51 beta (on Ubuntu 10.04) both return pixel values, as expected. On SO $('div.container').css('line-height'); returns 11.2px (FF). Sep 1, 2010 at 0:59
  • 1
    Chrome on Windows XP returns normal
    – Robert
    Sep 1, 2010 at 1:38

6 Answers 6

19

According to this page, it seems most of recent browsers use the same value for line-height: normal : 1.14, id est the font-size property with a 1.14 coefficient.

Tried with several browsers (on Windows XP) :

  • Chrome 21.0.1180.75
  • Firefox 14.0.1
  • Safari 5.1.7
  • Opera 11.64
  • IE 7
  • IE 8

EDIT

I was wrong, line-height depends of font-family, font-size, your browser, maybe your OS...

More reading on Eric Meyers' website.

3
  • So does this mean "line-height: 1.14em" is the equivalent but explicit statement? Jun 12, 2013 at 14:54
  • I assumed it, but it's not true. line-height depends of font-family, font-size, your browser, maybe your OS... You'll find some reading on Eric Meyers' website
    – zessx
    Jun 12, 2013 at 15:14
  • Still Zeplin thinks it's a useful value to give to developers :S
    – OZZIE
    Oct 3, 2019 at 12:39
8

Normal is actually referred to as abnormal on several instances as there is quite a browser inconsistency.

declaring line-height: normal not only vary from browser to browser, which I had expected—in fact, quantifying those differences was the whole point—but they also vary from one font face to another, and can also vary within a given face.

3
  • 7
    I thought it worth offering a link back to Eric Meyer's site for the source of your quote, for a fascinating read: meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal Sep 1, 2010 at 1:14
  • -1 since this doesn't come close to answering the question. Good info, but should have been a comment. Apr 26, 2012 at 14:02
  • 2
    @MartinJespersen I am not going to delete the answer as, even after reading it now, I still think I answered correctly as normal is browser specific and, therefore, inconsistent across browser and should not be translated to pixels. That said I am very appreciative you took the time to provide feedback about the downvote, thanks! :)
    – Frankie
    Apr 26, 2012 at 19:34
6

normal is a valid setting for line-height so there isn't really a way around that for the browsers that will return that.

Alternatively, you can use .css('height') , as it will count only the interior section of an element, not padding/border/margin. It would take a little creativity if you had a multi-line element, or an element with more than just text in it.

http://jsfiddle.net/xVBfb/

Edit: An example of a work around would be having

<span id='def' style='line-height:inherit;display:none;'>&nbsp;</span>

within the element, then to find the line height you could just use the .height() of #def as it will always be only one line and thus, the line height of the parent element.


Chrome in Windows XP is an example of a browser that returns normal in that jsfiddle unless explicitly specified otherwise. Firefox returns a pixel count. normal is the initial value per w3 spec. http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

1
  • Apparently the workaround you provided seems to be the best option. Thanks for that.
    – inhan
    Oct 29, 2013 at 20:13
1

Exactly calculating normal line-height in pixel is difficult. Though, according to MDN it's roughly 1.2em.

If you've:

body{
  font-size: 16px;
}

So, your website has normal font-size as 16px then the normal line-height would be roughly 24px. This means you can calculate normal font-size pixel value multiplied by 1.5 that is 16px * 1.5 == 24px

Notice: I didn't multiplied by 1.2 because there's difference between px value and em value.

1
  • A small hint: take control of the browser(s) initial values and never use normal. As many remember the old font-size: 101% hack and many other things, one approach as of 2018 is to reset html, and use the rem unit value when wanting "normal" on any other element like html { line-height: 1.15; font-size: 10px; } and then body { line-height: 1.3125; font-size: 1.6rem; } = consistant 16px font size and 21px line-height. Then use line-height: 2.1rem; to normalize elements if you concider 21px as normal. (just devide XX px with 10 to get rem: 1.2rem = 12px, 2.0rem = 20px). Jun 25, 2018 at 13:31
0

However this was written a long time ago but helped me to wrote temporary solution in my task. I'm copying this code than maybe other people can use it.

$('#lineHeightInc')
.click(function() {
    var box = GetSelectedBox();
    var ct = box.data('LineHeight');
    if (isNaN(ct))
        ct = 0;
    ct++;
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px');
    box.data('LineHeight', ct);
});

$('#lineHeightDic')
.click(function () {
    var box = GetSelectedBox();
    var ct = box.data('LineHeight');
    if (isNaN(ct))
        ct = 0;
    ct--;
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px');
    box.data('LineHeight', ct);
});
0

Here's how you can understand and utilize the CSS line-height property:

Syntax for CSS Line-Height:

line-height: normal | number | length | initial | inherit;

As you delve into using CSS line-height values, keep this guide close:

Normal: This is the standard line height and is typically about 1.2 on most desktop browsers, but it can vary depending on the font family used.

Length: Specify an exact line height using units like cm, pt, or px. This measurement will define the height of your line boxes.

Percentage: Set the line height relative to the element's font size. This allows for scalable and responsive design.

Number: Inputting a number will multiply with the current font size to derive the line height. This method is often preferred for its consistency and predictable results.

Initial: Resets the property to its default value, as defined by the CSS specifications.

Inherit: The line height is taken from the parent element, ensuring consistency in inherited styling.

Refer to these definitions as you work with the line-height property to enhance the readability and design of your text elements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.