meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Unitless line-heights

I’d like to share something that will be old news to readers of CSS: The Definitive Guide and all of my other books, but nonetheless needs to be said out loud, in public, for everyone to hear.

The property line-height can accept unitless number values.  You can also give line-height united values, though generally you shouldn’t.  But unitless numbers are just fine for this property.

So what’s the difference?  When you define a united value, like 1em, you’re setting things up to pass along the computed result to any descendants.  For example, suppose the following CSS is applied to a document containing the following markup fragment:

ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px;}
small {font-size: 80%;}

<ul>
  <li>I'm a list item with <small>small text</small>.</li>
</ul>

The ul element has its line-height computed to be 15px because for line-height, em-based values are calculated using the computed font-size of the element itself.  I declared the font-size directly, so we know its computed size in pixels.

(Yes, yes, I know, pixel-sized text is evil and wrong, but it makes explaining how all this works a lot simpler.)

So that computed value of 15px is what’s passed on to the descendent elements.  The li and small elements will inherit a line-height value of 15px.  End of story.  They don’t change it based on their own font sizes; in fact, they don’t change it at all.  They just take that 15px and use it, exactly the same as if I’d said:

ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px; line-height: 15px;}
small {font-size: 80%; line-height: 15px;}

Okay, now suppose I take the em off that line-height value, so that the styles now read:

ul {font-size: 15px; line-height: 1;}
li {font-size: 10px;}
small {font-size: 80%;}

Now what’s passed on is that raw number, which is used by descendent elements as a scaling factor—a multiplier, if you will–and not the computed result.

Thus every element that inherits that value of 1 will take that value and multiply it with their computed font-sizes.  The list item, with its declared font-size: 10px, will have a computed line-height of 10px.  Then it will pass that 1 on to the small element, which will multiply it with its computed font-size.  That’s 8 pixels; therefore, its line-height will also be 8 pixels.

The end result is exactly the same as if I’d written:

ul {font-size: 15px; line-height: 1;}
li {font-size: 10px; line-height: 10px;}
small {font-size: 80%; line-height: 8px;}

That’s a pretty major difference.  This is why it’s always strongly recommended that you use unitless numbers if you’re going to set a line-height on something like the html or body elements, or indeed on any element that is going to have descendant elements.

The fact that the CSS validator has a bug that causes it to generate parse errors on unitless number values for line-height (see report #2307) rather confuses things; we get an occasional jeering e-mail over at A List Apart as a result, since running CSS validation on the site gets an error due to my use of line-height: 1;.  Jeffrey points the correspondents to that bug report, and usually we never hear anything back.

And if anyone reading this feels motivated to fix the validator, please do.  As it says in the bug report, all they really need is a patch for review.  I might do it myself when I have some free time.  That’ll be in, oh, 2009 or so.

Again: the property line-height can accept unitless number values, and they’re a better choice than united values in 99 out of 100 cases anyway.  Okay?  Thank you.

[Addendum 26 Aug 06: Roger Johansson points out a bug in older Gecko browsers relating to unitless line-heights.]

102 Responses»

    • #1
    • Comment
    • Wed 8 Feb 2006
    • 1955
    Dero wrote in to say...

    Actually, it’s well known validator issue – validator itself respects unitless values, but for some reason not those without the point mark.

    So, for valid CSS, if you really need it, you should use line-height: 1.0; instead of line-height: 1; Strange, isn’t it?

    Well, it does not change the fact than validator is wrong, but it’s something…

    • #2
    • Comment
    • Wed 8 Feb 2006
    • 1958
    Eric Meyer wrote in to say...

    Unitless numbers without the point mark are valid CSS, which was part of my point. The validator is just flat wrong about rejecting unitless integer numbers.

    • #3
    • Comment
    • Wed 8 Feb 2006
    • 2002
    Dero wrote in to say...

    Indeed. I just wanted to pick up some solution for those people who don’t know. Of course validator is wrong, and this is not the only case.

    • #4
    • Comment
    • Wed 8 Feb 2006
    • 2029
    Eric TF Bat wrote in to say...

    The question to ask is: how much time do you/Jeffrey/etc spend answering the “occasional jeering email”? Calculate the cost of this email-answering, and compare with the benefits — the feeling of smugness you get from being right, the very slight possibility that you’re educating people, the aerobic exercise you get from the extra typing, etc. If the cost exceeds the benefit, change all the line-heights to 100% instead of 1. Problem solved.

    • #5
    • Comment
    • Wed 8 Feb 2006
    • 2032
    Eric Meyer wrote in to say...

    Sorry, Eric, but 100% is a united value. It does not have the same effect as 1. It does, however, have the same effect as 1em.

    Who said anything about getting a feeling of smugness?

    • #6
    • Pingback
    • Wed 8 Feb 2006
    • 2044
    Received from Pig Pen - Web Standards Compliant Web Design Blog » Blog Archive » Unitless Line Heights

    [...] « Iona Johnson Unitless Line Heights Unitless Line Heights from Eric Meyer – sometimes the validator is wrong (of [...]

    • #7
    • Comment
    • Wed 8 Feb 2006
    • 2219
    Jeff L wrote in to say...

    Good to know, thanks.

    • #8
    • Comment
    • Wed 8 Feb 2006
    • 2231
    Brian LePore wrote in to say...

    Why not include a comment in the CSS file saying “&qout;3C CSS validator gets this wrong&qout;? Some people might look at the file before complaining about it, see the comment and not pop off that e-mail to report the &qout;problem&qout;.

    • #9
    • Comment
    • Thu 9 Feb 2006
    • 0322
    Sébastien Guillon wrote in to say...

    And thank you. Now when asked we can also point to this post.

    • #10
    • Trackback
    • Thu 9 Feb 2006
    • 0527
    Received from atog

    Unitless line-heights.

    “Unitless line-heights”:http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ – OK I get it ;)

    • #11
    • Comment
    • Thu 9 Feb 2006
    • 0710
    Jeff wrote in to say...

    Thanks you Eric. Timely as always. Nice to know. I’ll pass it on.

    • #12
    • Pingback
    • Thu 9 Feb 2006
    • 0922
    Received from » Blog Archive - » Unitless line-heights Alex Jones - I’m not the Alex Jones you think I am.

    [...] ing application of line-height within the cascade, specifically he recommends implementing Unitless line-heights (’1′ instead of ‘1em’ or &#8216 [...]

    • #13
    • Comment
    • Fri 10 Feb 2006
    • 1657
    Nick Toye wrote in to say...

    Eric:

    I specify my font size as a keyword in the body rule, and then use percentages for the headers, paragraphs etc…

    Can I still use the unitless line-heights for keywords and percentages?

    • #14
    • Comment
    • Fri 10 Feb 2006
    • 1938
    Jesse Skinner wrote in to say...

    I just submitted a patch that should fix this. Let’s hope it’s not too long before it gets integrated into the live validator.

    • #15
    • Comment
    • Fri 10 Feb 2006
    • 2232
    Dustin Diaz wrote in to say...

    Didn’t you mention this like a year ago? I swear I’ve heard about the validator choking on this before. And they still haven’t fixed it?

    • #16
    • Comment
    • Sat 11 Feb 2006
    • 0255
    oliver wrote in to say...

    This make so much sense it hurts.

    • #17
    • Comment
    • Tue 14 Feb 2006
    • 1515
    Pat Collins wrote in to say...

    Am I missing something here?

    1.5
    1.5em
    150%

    Aren’t these all the same? They all calculate their leading (line-height, if you must) on the fly.

    • #18
    • Comment
    • Tue 14 Feb 2006
    • 1525
    Anas hashmi wrote in to say...

    I know I read somehwere about this that if you just place a 1.0 instead of 1, it works in validating.

    • #19
    • Pingback
    • Tue 14 Feb 2006
    • 1723
    Received from JD’s Tech Journal :: How to effect unitless line heights :: February :: 2006

    [...] nbsp;  Link 3 How to effect unitless line heights Eric Meyer (who else?) has the answer: The property line-height can accept un [...]

    • #20
    • Comment
    • Tue 14 Feb 2006
    • 1730
    Eric Meyer wrote in to say...

    Jesse: you rule.

    Nick: assuming I’ve understood your question correctly, then yes.

    Pat: yes, you’re missing something there. 1.5em and 150% have the same effect, which is the first example I gave in my article: they pass on the computed value of line-height to any descendant element (in the article, that was 15px).

    The unitless value 1.5 does not have the same effect. It is passed along in the raw, and allows each descendant element to calculate its line-height “on the fly”, as you put it. That was the second example in the article.

    So while 1.5em and 150% are equivalent, 1.5 is not.

    • #21
    • Pingback
    • Tue 14 Feb 2006
    • 2227
    Received from The Dailies » CSS pointers and a starting place

    [...] at this produces more legible, more professional looking copy. I read recently however on Eric Meyer’s site that I hadn’t bee [...]

    • #22
    • Pingback
    • Wed 15 Feb 2006
    • 0207
    Received from betamale » Blog Archive » No units for line-height in css

    [...] « Olympics No units for line-height in css Eric Meyer, you are a very useful human being. Thank You. [...]

    • #23
    • Comment
    • Wed 15 Feb 2006
    • 1216
    Nick Toye wrote in to say...

    Eric, I was referring to a method that Dan Cederholm talks about in his new book. Whereas you specify a keyword and then specify percentages based on this keyword.

    • #24
    • Pingback
    • Wed 15 Feb 2006
    • 2059
    Received from figby.com » Eric’s Archived Thoughts: Unitless line-heights

    [...] ed Thoughts: Unitless line-heights Filed under: Quick Links — 7:58 pm Eric’s Archived Thoughts: Unitless line-heights – For future CSS refe [...]

    • #25
    • Comment
    • Thu 16 Feb 2006
    • 1316
    Leopold Porkstacker wrote in to say...

    “(Yes, yes, I know, pixel-sized text is evil and wrong, but it makes explaining how all this works a lot simpler.)”

    In theory, yes. In practice, yes and no. I have been experiencing some serious flaws designing a particular site to display text propery within the broken IE6 (plays nicely within Safari, Firefox, Nutscrape), and had to revert back to px units for defining text size rather than em units.

    Meanwhile I long for true typographical manipulation on the web. Things such as kerning pair definitions come to mind, just to name one of my wishes.

    -he who stacks pork

    • #26
    • Comment
    • Thu 16 Feb 2006
    • 1331
    Watts wrote in to say...

    This is interesting (and explains a few oddities I wasn’t aware of). Just as a question of principle rather than practice: while I can understand passing the ‘absolute’ value of, say, 1.5em down to all inherited elements, if the parent element had a line-height of 150%, wouldn’t a much more logical implementation have been to pass the percentage down to each inherited element, so the 150% would behave like the unit-less 1.5? The behavior of computing the 150% from the parent element’s font size and then using it as an absolute value for all child elements is counter-intuitive and, I’d think, undesirable. Is that actually what’s intended by the CSS specification?

    • #27
    • Comment
    • Thu 16 Feb 2006
    • 1435
    Eric Meyer wrote in to say...

    Watts: intuitive or otherwise, the behavior of percentages as distinct from unitless numbers is exactly what’s intended by the CSS specification.

    <number>
    The used value of the property is this number multiplied by the element’s font size. Negative values are illegal. The computed value is the same as the specified value.
    <percentage>
    The computed value of the property is this percentage multiplied by the element’s computed font size. Negative values are illegal.

    (http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height)

    Specified values are resolved to computed values during the cascade; for example URIs are made absolute and ‘em’ and ‘ex’ units are computed to pixel or absolute lengths.

    (http://www.w3.org/TR/CSS21/cascade.html#computed-value)

    • #28
    • Comment
    • Fri 17 Feb 2006
    • 0416
    Bertje wrote in to say...

    What I think is interesting is the question is the described passing on a correct implementation of the CSS rule. If I assign a relative value of 1em to the line-height I would expect it to pass on relative as 1em and not as the computer result of say 15px. So to use unitless values like 1 as Eric describes works and might give a desired result. But is this the way you should use the line-height or is it a hack?

    • #29
    • Pingback
    • Fri 17 Feb 2006
    • 0756
    Received from Max Design - standards based web design, development and training » Blog Archive » Some links for light reading (7/2/06)

    [...] ! User Interface Blog Design Pattern Library Yahoo! UI Library Graded Browser Support Unitless line-heights Taking Aim at Target(.com) Staying on Target Nationa [...]

    • #30
    • Comment
    • Fri 17 Feb 2006
    • 1107
    Don wrote in to say...

    Hi Eric, This is great. But one question: does the css spec specify othe r areas where unitless values are allowed or is this an exception?

    • #31
    • Comment
    • Mon 20 Feb 2006
    • 1737
    kevadamson wrote in to say...

    This is possibly a little irrelevant to the article, but I use ems for line-height on ‘paragraphs’ and ‘headings’, but I use pixels on ‘list’ elements, especially when they are styled as vertical buttons. This is because I get a curious “extra pixel” gap in firefox – usually on the third and fifth/sixth list-item. Is this a known bug or conflicts within my own coding, I wonder? …

    • #32
    • Comment
    • Fri 24 Feb 2006
    • 1201
    Denny wrote in to say...

    Bertje: It’s not a hack. It works. What more is there to know? :)

    • #33
    • Pingback
    • Sat 11 Mar 2006
    • 1816
    Received from bunnyhero’s blog » Blog Archive » when x1.5 does not equal 150%

    [...] s not equal 150% i had no idea! this explains a lot though. read this article on unitless line heights to find out what i’m talking about… and i&# [...]

    • #34
    • Pingback
    • Sat 11 Mar 2006
    • 2304
    Received from Unitless line-heights · Style Grind

    [...] Eric explains why in CSS, the property line-height, can accept unitless number values. You can also give line-height united values, though g [...]

    • #35
    • Trackback
    • Fri 24 Mar 2006
    • 1442
    Received from 456 Berea Street

    CSS line-height does not need a unit

    You do not need to use a unit when specifying line-height in CSS. Also be aware that the presence of a unit affects how line-height is calculated.

    • #36
    • Pingback
    • Sat 25 Mar 2006
    • 0908
    Received from Websites Made Simple Blog » Blog Archive » Unitless CSS line-height Property - Sharing simple website design, ideas, practices with Malaysia.

    [...] ntly published article this year from the author of a CSS book, Eric Meyer. Eric’s article explained though how some of us implement a [...]

    • #37
    • Pingback
    • Sun 26 Mar 2006
    • 0146
    Received from 5thirtyone | it’s not wheatgrass » Gnat squashing Eyegruve

    [...] ot necessary for the CSS property line-height. You can read more on unit-less line heights here. As explained on 456 Berea St: to avoid triggering a validation error wh [...]

    • #38
    • Pingback
    • Mon 27 Mar 2006
    • 0351
    • #39
    • Pingback
    • Mon 27 Mar 2006
    • 0417
    Received from Caótico Neutral » Blog Archive » El comportamiento de las unidades en line-height

    [...] eight:1.2) cada uno de los descendientes multiplicará ese valor por su tamaño de fuente? Eric Meyer dixit. O sea div{ font-size: 10px; line-height: 1.2em; } div p{ [...]

    • #40
    • Pingback
    • Wed 12 Apr 2006
    • 0852
    Received from Jeffrey Zeldman Presents : Beneath the law, beyond the validator

    [...] Standards Project 10 February Philly Standards Writeup News.com San Francisco Chronicle Unitless and Somewhat Slightly Dazed Although the W3C validator claims that A [...]

    • #41
    • Trackback
    • Thu 10 Aug 2006
    • 0637
    Received from Pinceladas da Web

    UNIDADES DE MEDIDA EM LINE-HEIGHT

    […] Segundo as especificações das CSS 2.1, na propriedade line-height das CSS não é necessário especificar uma unidade de medida concreta […]

    • #42
    • Comment
    • Sat 2 Sep 2006
    • 1120
    Sami wrote in to say...

    By the way, it’s Roger Johansson, not Johanssen. :)

    • #43
    • Comment
    • Mon 15 Jan 2007
    • 1901
    Jesse Skinner wrote in to say...

    The CSS validator has finally been updated!

    I wrote all about it: Unitless Line Heights Are Finally Valid.

    • #44
    • Pingback
    • Sun 11 Feb 2007
    • 0056
    Received from Inpeck.com » 完整的CSS工具列表

    [...] Meyer, the man with CSS skillz that payz da billz, reveals something I”ve never heard of before: line-height property can use unitless values! The differences between united vs. unitless declarations are well described in his article but I [...]

    • #45
    • Pingback
    • Thu 29 Mar 2007
    • 1416
    Received from ie bockt bei vergr

    [...] angeschnitten. an was k

    • #46
    • Pingback
    • Sun 8 Apr 2007
    • 0917
    Received from CSS-alfabetet: L - bza.no

    [...] Egenskapen line-height definerer høyden på en linje i elementet. Denne verdien kan angis gjennom fellesegenskapen font og skal helst oppgis i enhetsløse verdier. [...]

    • #47
    • Pingback
    • Sat 14 Apr 2007
    • 2127
    Received from links for 2007-04-15

    [...] Eric’s Archived Thoughts: Unitless line-heights The property line-height can accept unitless number values. You can also give line-height united values, though generally you shouldn”t. But unitless numbers are just fine for this property. (tags: web design css) [...]

    • #48
    • Pingback
    • Tue 1 May 2007
    • 1809
    Received from Semplicemente » Archivio del blog » Fogli di stile e accessibilità

    [...] spazio tra le righe del testo) deve essere scalabile. Per questa ragione è preferibile utilizzare valori numerici privi di unità di misura per la proprietà line-height (per esempio 1.5) perché questi valori sono scalabili e risolvono [...]

    • #49
    • Pingback
    • Sat 19 May 2007
    • 0456
    Received from Webtypography: Baselines & vertical Rhytm · Rizm

    [...] Also worth adding to the mix is Eric Meyer”s Unitless line-heights. [...]

    • #50
    • Comment
    • Fri 22 Jun 2007
    • 2118
    Tobie Langel wrote in to say...

    Correct me if I’m wrong, but aren’t the following equivalent ?

    body * { line-height: 1em; }
    body { line-height: 1; }

    • #51
    • Comment
    • Fri 22 Jun 2007
    • 2219
    Tobie Langel wrote in to say...

    Actually, I’ve looked into the above a bit deeper since posting the previous comment.

    Both rules aren’t equal.

    body * { line-height: 1em; } (the reset used by YUI) does not cascade properly.

    For example: span elements contained inside a paragraph would not inherit from the paragraph’s line-height if the latter had been specified.

    So the rule you suggest, Eric, is actually much smarter.

    • #52
    • Comment
    • Wed 25 Jul 2007
    • 0925
    Chris Leeman wrote in to say...

    Great job on the validator fix, Jesse. You just saved Eric a couple hundred more email questions!

    • #53
    • Comment
    • Wed 15 Aug 2007
    • 1620
    scott romack wrote in to say...

    thanks for your article. i have been using px for this very reason. i assume the shorthand version works as well ‘ font: 62.5%/2 ‘lucida grande’, ‘tahoma’, sans-serif;’ ?? can’t bring myself to do longhand unless i have to! thanks, again

    • #54
    • Comment
    • Thu 16 Aug 2007
    • 0425
    Root wrote in to say...

    Thanks Eric. Added to my list of *a million things I learned from Eric Meyer*

    • #55
    • Comment
    • Sat 18 Aug 2007
    • 0419
    المصمم توقيع wrote in to say...

    I don’t know f u r interested but i’ve been using the unitless method for a while know & today i discovered that it doesn’t work in a very spesific case; which is MS Outlook when coding a CSS newsletter & send it 2 an outlook reciepient the unitless value is defaulted to inch which is way bigger than em. When i added em the problem everything was ok.

    • #56
    • Comment
    • Fri 19 Oct 2007
    • 1825
    Jon wrote in to say...

    Actually, the previous poster – المصمم توقيع / TawQee3 ‘s point is well taken: if there’s a bug on this in Outlook (gosh, bugs?), it will no doubt delay implementation of this css standard in emails. Certainly the styled emails we send out aren’t going to be able to have 1 inch line heights! Not with a reader base that’s over 90% outlook. Ugh.

    • #57
    • Pingback
    • Mon 26 Nov 2007
    • 2121
    Received from 城市胡同开发版 » The Complete List of CSS Tools

    [...] the man with CSS skillz that payz da billz, reveals something I’ve never heard of before: line-height property can use unitless values! The differences between united vs. unitless declarations are well described in his article but I [...]

    • #58
    • Pingback
    • Fri 7 Mar 2008
    • 1901
    Received from Tagging the Web Daily 03/07/2008 « PAB Skunkworks Weblog

    [...] Eric’s Archived Thoughts: Unitless line-heights  Annotated [...]

    • #59
    • Pingback
    • Thu 24 Apr 2008
    • 2153
    Received from How to set leading with ems in CSS at maratz.com

    [...] Unitless line-heights [...]

    • #60
    • Pingback
    • Mon 28 Apr 2008
    • 0223
    • #61
    • Pingback
    • Fri 9 May 2008
    • 0407
    Received from line-height und IE - XHTMLforum

    [...] angabe ohne einheit-angabe hat schon seinen sinn. dass ie line-height unter 1 nicht interpretiert, ist mir auch aufgefallen, habe daf

    • #62
    • Pingback
    • Mon 26 May 2008
    • 0551
    Received from » 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs « css4design : des css pour votre design html

    [...] de style, est la présence d’une valeur sans unité de mesure (line-height: 1) qui mérite quelques explications. Pour ceux qui ne sont pas à l’aise avec l’anglais, j’ai repris les exemples [...]

    • #63
    • Pingback
    • Mon 2 Jun 2008
    • 1031
    Received from How to Size Text in CSS | Website Design, UI, CSS, Web 2.0 and XHTML

    [...] case, px) when setting the line-height enables the value to be inherited throughout the page. If a unitless line-height had been specified, the multiplier would have been inherited, resulting in line-heights being [...]

    • #64
    • Pingback
    • Wed 9 Jul 2008
    • 0650
    Received from line-height の値には単位なしが良いとされる理由 | Yes!!WebDesigner

    [...] (number) で指定した方が良いのにとか思ったりする。その理由は Eric’s Archived Thoughts: Unitless line-heights [...]

    • #65
    • Pingback
    • Fri 1 Aug 2008
    • 1632
    Received from Cátia Kitahara » Arquivo » Como dimensionar texto com CSS

    [...] caso, px) ao configurar a altura da linha permite que o valor seja herdado em toda página. Se uma altura de linha sem unidade fosse especificada, o multiplicador seria herdado, resultando em alturas de linha renderizadas [...]

    • #66
    • Pingback
    • Mon 18 Aug 2008
    • 1542
    Received from Unitless line-heights - Wolf’s Little Store

    [...] short google search on the subject led me to the coincidentally same-titled Unitless Line Heights by… Eric Meyer. The web design world is very small, or Meyer has strong Google [...]

    • #67
    • Comment
    • Tue 19 Aug 2008
    • 1203
    Retroist wrote in to say...

    Wish I had seen this post a few years ago – nice and clearly spelled out. Thanks.

    • #68
    • Pingback
    • Wed 24 Sep 2008
    • 1024
    Received from Liste ignoriert CSS eigenschaften? - XHTMLforum

    [...] zeigt das Problem nicht, line-height wird beachtet. Au

    • #69
    • Pingback
    • Tue 27 Jan 2009
    • 2302
    Received from 50 Useful Design Tools For Beautiful Web Typography | CSS, Fonts | Smashing Magazine

    [...] inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height.” Check out the demo [...]

    • #70
    • Pingback
    • Thu 26 Mar 2009
    • 1528
    Received from 15 Surefire Ways to Break Your CSS

    [...] Line heights needn’t have a specific unit. A line height of “1.5″, for example, will simply assume you meant “1.5 times my font size.” For more on this phenomenon, visit Eric Meyer’s article on Unitless Line Heights. [...]

    • #71
    • Pingback
    • Tue 31 Mar 2009
    • 0734
    Received from How to Size Text in CSS « PakPenyo Website Design Blog

    [...] case, px) when setting the line-height enables the value to be inherited throughout the page. If a unitless line-height had been specified, the multiplier would have been inherited, resulting in line-heights being [...]

    • #72
    • Pingback
    • Thu 23 Apr 2009
    • 1546
    Received from CSS Font Styling Shorthand | PMA Media Group

    [...] height is optional.  Note that line height doesn’t have a unit.  Eric Meyer explains [...]

    • #73
    • Pingback
    • Tue 9 Jun 2009
    • 0723
    Received from Colorrage Blog » Blog Archive » 15 Surefire Ways to Break Your CSS

    [...] Line heights needn”t have a specific unit. A line height of “1.5?, for example, will simply assume you meant “1.5 times my font size.” For more on this phenomenon, visit Eric Meyer”s article on Unitless Line Heights. [...]

    • #74
    • Pingback
    • Sun 23 Aug 2009
    • 0432
    Received from CSS line height and Internet Explorer 7 dutchwrestling. the website of marijn tijhuis

    [...] puzzles me, because webdesign guru’s like Eric Meyer and Roger Johanson wrote about it. I couldn’t find any info on IE7 specific and [...]

    • #75
    • Pingback
    • Sun 30 Aug 2009
    • 1036
    Received from 15 Surefire Ways to Break Your CSS « Why Limit Media

    [...] Line heights needn”t have a spe­cific unit. A line height of “1.5″, for exam­ple, will sim­ply assume you meant “1.5 times my font size.” For more on this phe­nom­e­non, visit Eric Meyer”s arti­cle on Unit­less Line Heights. [...]

    • #76
    • Pingback
    • Fri 22 Jan 2010
    • 0933
    Received from Line height.

    [...] of 1em is equal to 24px (ie the same as itself). Otherwise I believe you can use unitless values Eric's Archived Thoughts: Unitless line-heights I am — Harry Roberts | Web Design+ Licenses now available | CSS Wizardry | And now [...]

    • #77
    • Pingback
    • Tue 27 Jul 2010
    • 1510
    Received from Unitless line-heights | Extra Future

    [...] A handy CSS tip and technique that I was previously unaware of. [...]

    • #78
    • Pingback
    • Thu 16 Sep 2010
    • 1502
    Received from The pleasure of working text « Masks of Eris

    [...] 1.8, which is blindingly obvious and cannot be unseen once you see it). Then I’m finding out unitless line heights (i.e. 1.4 and not 1.4em) are a good idea, because otherwise the value that’s inherited by the [...]

    • #79
    • Pingback
    • Sun 10 Jul 2011
    • 1342
    Received from 3 Must-Learn CSS Techniques for Perfect Web Typography | Design Shack

    [...] even know existed until recently: unitless line height. Eric Meyer explains this idea in detail here, but I’ll give you a quick [...]

    • #80
    • Pingback
    • Mon 15 Aug 2011
    • 1729
    Received from line-height: find the height of an element - SitePoint Forums

    [...] more sensible. I am of the opinion that unitless line heights are much more sensible in most cases as does Eric Meyer. __________________ http://www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles Ultimate CSS [...]

    • #81
    • Pingback
    • Mon 29 Aug 2011
    • 0919
    • #82
    • Trackback
    • Mon 26 Sep 2011
    • 2155
    Received from Quora

    The New Quora Comments…

    +1 to whomever just max-height’d the images & set the line-height Note on line-height, though, is that you probably want to use unitless values rather than em’s! Rather than inheriting the value from the line where it was defined, the ratio is inheri…

    • #83
    • Pingback
    • Wed 5 Oct 2011
    • 1605
    Received from Html anchor height issue with unitless line heights | SeekPHP.com

    [...] to conform to unitless line heights I have a problem with overflow: auto and anchor elements. Consider the following simple [...]

    • #84
    • Comment
    • Tue 8 Nov 2011
    • 1256
    Mike Edward Moras (e-sushi™) wrote in to say...

    Interestingly, dropping it breaks vertical rhythm in some browsers. But the idea is tempting. ;)

    • #85
    • Pingback
    • Wed 9 Nov 2011
    • 1316
    Received from Type study: Sizing the legible letter « The Typekit Blog

    [...] kids say, that. What’s more, we don’t actually need to add units to the line-height, as Eric Meyer’s covered so ably before. Instead, we can leave that proportional value in place, sans pixels, percentages, [...]

    • #86
    • Pingback
    • Mon 28 Nov 2011
    • 1601
    Received from Two quick things about (CSS) Typography • Jonathan Warren

    [...] use SASS there is also a mixin available to provide a px fallback for older browsers.And secondly, line-height can be unitless. Who knew? Not me, obviously. By Jonathan Warren Updated: 28th November 2011CSSremsTypographyNo [...]

    • #87
    • Pingback
    • Wed 7 Dec 2011
    • 0811
    Received from Measuring and sizing UIs, 2011-style — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts

    [...] However, even better than using ems, you just set them unitless. Work out the em value, but drop the em from the value, so line-height:1.5em; would just be line-height:1.5;. Eric Meyer explains this nicely over on his site. [...]

    • #88
    • Comment
    • Thu 26 Jan 2012
    • 1615
    Mike wrote in to say...

    Unless you want to keep a consistent vertical grid throughout the layout. In that case, you SHOULD specify your line height with ems in the body, as this will keep all your typography on the same baseline, regardless of its size. This is a classic tenet of typography and gives your document a real nice, clean look. I wouldn’t be so quick to switch to unitless line-heights.

    • #89
    • Pingback
    • Tue 12 Jun 2012
    • 1043
    Received from Polish that Turd: Web Design Rules-of-Thumb for Developers

    [...] sure that you know the difference between a line height of 1.2 and [...]

    • #90
    • Comment
    • Tue 26 Jun 2012
    • 1145
    Ben Hayes wrote in to say...

    I agree with Mike above. In the interests of keeping a vertical rhythm in my type, I don’t generally want my line-height to be a function of the font-size of a particular element, I want it to relate to the global line height. So usually I would set the line-height on the body and let it inherit through. Of course occasionally you will need to break from this, for example if an H1 is too large for the global line height. But smaller text should usually use the global line height and have more gaps (http://www.webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/)

    • #91
    • Comment
    • Sun 26 Aug 2012
    • 1844
    John wrote in to say...

    I was extremely pleased to find this web site. I need to to thank you for ones time due to this wonderful read!! I definitely really liked every little bit of it and I have you bookmarked to look at new information on your website.

    Can I simply just say what a relief to uncover a person that genuinely knows what they are talking about on the net. You definitely realize how to bring an issue to light and make it important. More people should read this and understand this side of your story. I can’t believe you’re not more popular since you most certainly possess the gift.

    Excellent write-up. I absolutely love this site. Stick with it!

    It�s hard to come by well-informed people on this subject, but you seem like you know what you�re talking about! Thanks

    You ought to take part in a contest for one of the most useful blogs online. I am going to highly recommend this blog!

    A fascinating discussion is worth comment. I do believe that you need to publish more about this subject, it may not be a taboo subject but typically folks don’t discuss these subjects. To the next! Many thanks!!

    Hi there! I simply would like to give you a big thumbs up for your great information you’ve got right here on this post. I’ll be returning to your website for more soon.

    When I initially commented I appear to have clicked on the -Notify me when new comments are added- checkbox and now each time a comment is added I get four emails with the same comment. Perhaps there is an easy method you can remove me from that service? Kudos!

    The next time I read a blog, I hope that it doesn’t fail me as much as this one. After all, I know it was my choice to read, nonetheless I actually thought you would probably have something helpful to talk about. All I hear is a bunch of whining about something that you could fix if you weren’t too busy seeking attention.

    Spot on with this write-up, I seriously believe that this web site needs much more attention. I�ll probably be returning to read more, thanks for the info!

    You’re so awesome! I do not believe I’ve read through a single thing like this before. So good to find somebody with some unique thoughts on this subject matter. Really.. thanks for starting this up. This site is one thing that is required on the web, someone with a little originality!

    I love looking through an article that can make men and women think. Also, thanks for allowing for me to comment!

    This is the perfect blog for everyone who wants to understand this topic. You understand a whole lot its almost hard to argue with you (not that I actually will need to�HaHa). You definitely put a fresh spin on a subject that’s been discussed for years. Wonderful stuff, just excellent!

    Aw, this was an exceptionally nice post. Finding the time and actual effort to make a really good article� but what can I say� I procrastinate a whole lot and don’t manage to get nearly anything done.

    I�m amazed, I must say. Rarely do I come across a blog that�s equally educative and amusing, and without a doubt, you have hit the nail on the head. The issue is something that too few folks are speaking intelligently about. I am very happy I found this during my search for something concerning this.

    Oh my goodness! Awesome article dude! Thank you, However I am having troubles with your RSS. I don�t understand why I am unable to subscribe to it. Is there anybody having the same RSS issues? Anyone who knows the solution can you kindly respond? Thanx!!

    An outstanding share! I’ve just forwarded this onto a coworker who had been conducting a little homework on this. And he actually ordered me breakfast simply because I found it for him… lol. So allow me to reword this…. Thanks for the meal!! But yeah, thanks for spending time to talk about this topic here on your internet site.

    After looking at a number of the articles on your website, I really appreciate your way of blogging. I saved as a favorite it to my bookmark webpage list and will be checking back in the near future. Please check out my web site as well and let me know what you think.

    This site definitely has all of the information and facts I needed concerning this subject and didn�t know who to ask.

    There is definately a great deal to know about this subject. I love all the points you’ve made.

    You made some good points there. I looked on the web for additional information about the issue and found most people will go along with your views on this site.

    Nice post. I learn something new and challenging on websites I stumbleupon everyday. It’s always interesting to read through content from other authors and practice something from their web sites.

    I blog quite often and I seriously thank you for your information. Your article has truly peaked my interest. I am going to book mark your website and keep checking for new information about once per week. I opted in for your Feed too.

    Pretty! This has been a really wonderful article. Thanks for supplying these details.

    Greetings! Very useful advice in this particular article! It is the little changes that will make the biggest changes. Many thanks for sharing!

    Hello there! This blog post could not be written much better! Going through this article reminds me of my previous roommate! He constantly kept talking about this. I will send this information to him. Fairly certain he will have a very good read. I appreciate you for sharing!

    Hi, I think your site might be having web browser compatibility issues. Whenever I look at your blog in Safari, it looks fine however, when opening in Internet Explorer, it has some overlapping issues. I just wanted to provide you with a quick heads up! Besides that, wonderful site!

    Having read this I believed it was rather enlightening. I appreciate you finding the time and effort to put this information together. I once again find myself personally spending a significant amount of time both reading and commenting. But so what, it was still worth it!

    Good day! I could have sworn I�ve been to this web site before but after looking at a few of the posts I realized it�s new to me. Regardless, I�m certainly happy I discovered it and I�ll be book-marking it and checking back frequently!

    I wanted to thank you for this fantastic read!! I absolutely enjoyed every bit of it. I’ve got you book marked to check out new stuff you post�

    Hi, I do believe this is an excellent web site. I stumbledupon it ;) I will come back yet again since I book-marked it. Money and freedom is the best way to change, may you be rich and continue to help others.

    Your style is very unique compared to other people I’ve read stuff from. Thanks for posting when you’ve got the opportunity, Guess I’ll just book mark this site.

    I used to be able to find good information from your blog posts.

    Excellent article! We are linking to this great content on our site. Keep up the great writing.

    This is a very good tip particularly to those fresh to the blogosphere. Short but very accurate info� Appreciate your sharing this one. A must read article!

    I could not refrain from commenting. Exceptionally well written!

    bookmarked!!, I really like your web site!

    Good post. I’m dealing with many of these issues as well..

    Way cool! Some extremely valid points! I appreciate you penning this post and the rest of the website is really good.

    Great web site you have got here.. It�s difficult to find high-quality writing like yours nowadays. I truly appreciate people like you! Take care!!

    This is a topic that’s near to my heart… Take care! Where are your contact details though?

    I seriously love your site.. Pleasant colors & theme. Did you create this web site yourself? Please reply back as I�m trying to create my own personal site and want to find out where you got this from or exactly what the theme is named. Cheers!

    Everyone loves it when individuals come together and share ideas. Great site, continue the good work!

    Very good info. Lucky me I ran across your website by accident (stumbleupon). I have book marked it for later!

    This site was… how do I say it? Relevant!! Finally I have found something that helped me. Cheers!

    Everything is very open with a really clear explanation of the issues. It was definitely informative. Your site is very useful. Many thanks for sharing!

    I would like to thank you for the efforts you have put in writing this website. I am hoping to see the same high-grade content from you later on as well. In truth, your creative writing abilities has inspired me to get my own website now ;)

    • #92
    • Comment
    • Tue 4 Sep 2012
    • 1701
    Greg wrote in to say...

    Just wow on the spambot….

    • #93
    • Comment
    • Tue 4 Sep 2012
    • 1734
    Chris Frees wrote in to say...

    That’s the worst spambot I’ve ever seen lol!

    • #94
    • Comment
    • Thu 20 Sep 2012
    • 0040
    Mike Edward Moras (e-sushi™) wrote in to say...

    “That’ll be in, oh, 2009 or so.”

    I’ll be looking forward backward to it. ;)

    Oh, and ECHO on the weirdness of that spambot comment. I mean, WTF?

    • #95
    • Pingback
    • Wed 31 Oct 2012
    • 1641
    Received from Web Typography Using The Golden Ratio and REM’s

    [...] going to be using “Unitless line heights” as explained by Eric Meyer, so we can avoid unexpected results. What’s so awesome [...]

    • #96
    • Pingback
    • Thu 28 Mar 2013
    • 2050
    Received from Design Is An Art – Mark Cyrus

    [...] try to setup my styles as efficiently as possible.  I started defining the base line-height using unitless values, which seemingly allows me to go without assigning a line-height to any other element on the [...]

    • #97
    • Pingback
    • Sun 19 May 2013
    • 0903
    Received from Using The Golden Ratio and REM's | Greg Rickaby

    [...] going to be using “Unitless line heights” as explained by Eric Meyer, so we can avoid unexpected results. What’s so awesome [...]

    • #98
    • Pingback
    • Wed 29 May 2013
    • 1140
    Received from Taking Ems Even Further | Webdesigntuts+

    [...] you’re interested in reading more on the topic Eric Meyer covered it solidly way back in 2006, plus Harry Roberts has a great overview of measurement units from a couple of [...]

    • #99
    • Pingback
    • Sat 6 Jul 2013
    • 1527
    Received from “Just wow on the spambot….” - Clemens Westrup

    [...] to laugh my ass off reading a comment on an article by A List Apart‘s author Eric Meyer. The article is actually pretty insightful itself, explaining the difference between the use of united values [...]

    • #100
    • Comment
    • Tue 3 Sep 2013
    • 1118
    Jason Rundell wrote in to say...

    How about just using consistent units?

    • #101
    • Pingback
    • Sat 18 Jan 2014
    • 2116
    Received from CSS Sizing Advice: %, REMS, and EMs

    […] Use unit-less values for line-height. […]

    • #102
    • Pingback
    • Tue 18 Feb 2014
    • 0157
    Received from betoan.info – Flexer Official Blog CSS Coding standard » betoan.info - Flexer Official Blog

    […] Line height should also be unit-less, unless necessary to be defined as a specific pixel value. This is more than just a style convention, but is worth mentioning here. More information:http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ […]

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


February 2006
SMTWTFS
January March
 1234
567891011
12131415161718
19202122232425
262728  

Sidestep

Feeds

Extras