Unitless line-heights

Published 18 years, 10 months past

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.]

Comments (113)

  1. 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. 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. 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. 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. 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 ::

    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. Good to know, thanks.

  8. 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. And thank you. Now when asked we can also point to this post.

  10. Trackback ::

    atog

    Unitless line-heights.

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

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

  12. Pingback ::

    » 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. 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. 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. 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. This make so much sense it hurts.

  17. 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. I know I read somehwere about this that if you just place a 1.0 instead of 1, it works in validating.

  19. Pingback ::

    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. 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 ::

    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 ::

    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. 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 ::

    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. “(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. 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. 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. 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 ::

    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. 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. 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. Bertje: It’s not a hack. It works. What more is there to know? :)

  33. Pingback ::

    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 ::

    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 ::

    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 ::

    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 ::

    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 ::

    raki’s lab.net » Blog Archive » CSS + Debugging

    […]

  39. Pingback ::

    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 ::

    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 ::

    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. By the way, it’s Roger Johansson, not Johanssen. :)

  43. The CSS validator has finally been updated!

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

  44. Pingback ::

    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 ::

    ie bockt bei vergr

    […] angeschnitten. an was k

  46. Pingback ::

    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 ::

    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 ::

    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 ::

    Webtypography: Baselines & vertical Rhytm · Rizm

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

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

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

  51. 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. Great job on the validator fix, Jesse. You just saved Eric a couple hundred more email questions!

  53. 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. Thanks Eric. Added to my list of *a million things I learned from Eric Meyer*

  55. 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. 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 ::

    城市胡同开发版 » 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 ::

    Tagging the Web Daily 03/07/2008 « PAB Skunkworks Weblog

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

  59. Pingback ::

    How to set leading with ems in CSS at maratz.com

    […] Unitless line-heights […]

  60. Pingback ::

    Soignez et améliorez votre typographie sur le Web » Emmanuel de Taillac .fr

    […] Unitless line-heights […]

  61. Pingback ::

    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 ::

    » 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 ::

    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 ::

    line-height の値には単位なしが良いとされる理由 | Yes!!WebDesigner

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

  65. Pingback ::

    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 ::

    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. Wish I had seen this post a few years ago – nice and clearly spelled out. Thanks.

  68. Pingback ::

    Liste ignoriert CSS eigenschaften? - XHTMLforum

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

  69. Pingback ::

    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 ::

    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 ::

    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 ::

    CSS Font Styling Shorthand | PMA Media Group

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

  73. Pingback ::

    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 ::

    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 ::

    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 ::

    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 ::

    Unitless line-heights | Extra Future

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

  78. Pingback ::

    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 ::

    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 ::

    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 ::

    pixels in your dropdown line-height style – beware! | Thomas W Bell

    […] http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ […]

  82. Trackback ::

    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 ::

    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. Interestingly, dropping it breaks vertical rhythm in some browsers. But the idea is tempting. ;)

  85. Pingback ::

    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 ::

    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 ::

    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. 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 ::

    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. 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. 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. Just wow on the spambot….

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

  94. “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 ::

    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 ::

    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 ::

    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 ::

    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 ::

    “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. How about just using consistent units?

  101. Pingback ::

    CSS Sizing Advice: %, REMS, and EMs

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

  102. Pingback ::

    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/ […]

  103. Pingback ::

    Scaling Line-height and Inheritance | MaccG

    […] unitless values—or using a number, are recommended as they are based off of computed values, and more importantly, it’s the only option that […]

  104. Pingback ::

    sử dụng line-height trong css | Javascript Blog

    […] Nguồn : meyerweb […]

  105. Pingback ::

    RWD – Vertical Rhythm Part 2 - Lemieux Design

    […] Height was set to 1.25 or 20px. Remember that the Line Height value can be unitless, which is a unique characteristic of this CSS […]

  106. Pingback ::

    So, what's the deal with font-size -

    […] Nielsen and Meyer both recommend relative font-sizes. In a 2002 article  Nielsen says: “Do not use absolute font sizes in your style sheets. Code font sizes in relative terms, typically using percentages such as 120% for big text and 90% for small text.” Meyer goes so far as to say “pixel-sized text is evil and wrong”. […]

  107. Pingback ::

    Convert a Pricing Table PSD to HTML and CSS | Design Shack

    […] Notice that the line-height is set without a unit of measure (2, not 2px). This is a simple multiplier that takes the font-size into account (18px * 2 = 36px line-height). You can read more about this technique here. […]

  108. Pingback ::

    The Typekit Blog | Flexible typography with CSS locks

    […] me is that I couldn’t get this lock’s result to be unitless. I generally prefer to use unitless line-height values. I also wonder how the math might be different with container or element […]

  109. Pingback ::

    Paramétrage du flux vertical en CSS

    […] La propriété line-height doit être définie en utilisant un nombre décimal sans unité et non pas en pourcentage ou en em afin de contourner ce problème d’héritage de hauteur. […]

  110. Pingback ::

    Pixels vs. Relative Units in CSS: why it’s still a big deal - 24 Accessibility

    […] from defining and coding our units of measurement in pixels, and began using relative CSS units and unitless values more consistently in our CSS to meet the needs of ever-changing viewport […]

  111. Pingback ::

    Understanding relative CSS units - LogRocket Blog

    […] Another common CSS data type in the context of relative units is the percentage (%). There are also CSS properties that accept integer values. The most common use case for such a unitless value is to use it with the line-height property. […]

  112. Pingback ::

    Compreendendo as unidades CSS relativas - BR Atsit

    […] Outro tipo de dados CSS comum no contexto de unidades relativas é a porcentagem (% ). Existem também propriedades CSS que aceitam valores inteiros . O caso de uso mais comum para esse valor sem unidade é usá-lo com a altura da linha propriedade . […]

  113. Maybe it would be time to correct the bad inheritance behavior of line-height with css variable?

    * {
   line-height:var(--line-height);
}
html {
  --line-height: calc(.8em + .5rem);
}

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview