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.]
61 Responses»
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…
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.
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.
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.
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?
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 […]
Jeff L wrote in to say...
Good to know, thanks.
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;.
Sébastien Guillon wrote in to say...
And thank you. Now when asked we can also point to this post.
Received from atog
Unitless line-heights.
“Unitless line-heights”:http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ - OK I get it ;)
Jeff wrote in to say...
Thanks you Eric. Timely as always. Nice to know. I’ll pass it on.
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 ‘ […]
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?
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.
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?
oliver wrote in to say...
This make so much sense it hurts.
Pat Collins wrote in to say...
Am I missing something here?
1.51.5em
150%
Aren’t these all the same? They all calculate their leading (line-height, if you must) on the fly.
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.
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 […]
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.5emand150%have the same effect, which is the first example I gave in my article: they pass on the computed value ofline-heightto any descendant element (in the article, that was 15px).The unitless value
1.5does not have the same effect. It is passed along in the raw, and allows each descendant element to calculate itsline-height“on the fly”, as you put it. That was the second example in the article.So while
1.5emand150%are equivalent,1.5is not.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 […]
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. […]
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.
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 […]
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
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?
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.
(http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height)
(http://www.w3.org/TR/CSS21/cascade.html#computed-value)
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?
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 […]
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?
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? …
Denny wrote in to say...
Bertje: It’s not a hack. It works. What more is there to know? :)
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&# […]
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 […]
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.
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 […]
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 […]
Received from raki’s lab.net » Blog Archive » CSS + Debugging
[…] rt noch einmal ganz genau das “line-height”-Attribut in seinem Artikel “Unitless line-heights“. Obwohl ich doch schon recht lange und ausgiebig […]
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{ […]
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 […]
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 […]
…
Sami wrote in to say...
By the way, it’s Roger Johansson, not Johanssen. :)
Jesse Skinner wrote in to say...
The CSS validator has finally been updated!
I wrote all about it: Unitless Line Heights Are Finally Valid.
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 […]
Received from ie bockt bei vergrsserung - XHTMLforum
[…] angeschnitten. an was knnte das liegen? Das liegt an der zu geringen line-height. Lies bitte: Eric’s Archived Thoughts: Unitless line-heights Urschlich ist die Angabe in #content_inner. Entferne dort die Einheit und alles wird […]
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. […]
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) […]
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 […]
Received from Webtypography: Baselines & vertical Rhytm · Rizm
[…] Also worth adding to the mix is Eric Meyer’s Unitless line-heights. […]
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; }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:
spanelements contained inside a paragraph would not inherit from the paragraph’sline-heightif the latter had been specified.So the rule you suggest, Eric, is actually much smarter.
Chris Leeman wrote in to say...
Great job on the validator fix, Jesse. You just saved Eric a couple hundred more email questions!
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
Root wrote in to say...
Thanks Eric. Added to my list of *a million things I learned from Eric Meyer*
المصمم توقيع 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.
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.
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 […]
Received from Tagging the Web Daily 03/07/2008 « PAB Skunkworks Weblog
[…] Eric’s Archived Thoughts: Unitless line-heights Annotated […]
Received from How to set leading with ems in CSS at maratz.com
[…] Unitless line-heights […]
Received from Soignez et améliorez votre typographie sur le Web » Emmanuel de Taillac .fr
[…] Unitless line-heights […]
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 dafr aber auch […]