--- title: Wait, line-height works like that?! | daily.dev description: Unitless numbers and percentages for CSS line-height behave differently due to how inheritance works. When using a unitless value like 1.5, the line-height is... canonical: https://daily.dev/posts/wait-line-height-works-like-that--fqgb5s37h twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Wait, line-height works like that?! | daily.dev og:description: Unitless numbers and percentages for CSS line-height behave differently due to how inheritance works. When using a unitless value like 1.5, the line-height is... og:url: https://daily.dev/posts/wait-line-height-works-like-that--fqgb5s37h og:image: https://api.daily.dev/og/posts/fqgb5S37h.png og:image:alt: Wait, line-height works like that?! og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Wait, line-height works like that?! **[Kevin Powell](https://daily.dev/sources/kevinpowell)** · 1 min read · 64 upvotes · 6 comments ## Summary Unitless numbers and percentages for CSS line-height behave differently due to how inheritance works. When using a unitless value like 1.5, the line-height is recalculated on an element-by-element basis relative to each element's own font size. When using a percentage, the line-height is computed once on the parent element and then the resulting pixel value is inherited by all children — meaning smaller or larger text won't get proportionally adjusted line-height. Unitless values are generally the better choice for consistent, scalable typography. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### what is the difference between unitless line-height and percentage line-height in CSS Unitless line-height values, like 1.5, are recalculated individually on each element based on that element's own font size, so children with different font sizes get correctly scaled line heights. Percentage line-height values are computed once into a fixed pixel value and that same value is inherited by all descendants, which can cause mismatched spacing when font sizes vary, such as with fluid typography. _Explore more CSS deep dives on daily.dev before an inherited line-height value throws off your fluid type scale._ ### why does my line-height look wrong on smaller or larger text when using percentage values in CSS Percentage line-height is calculated once on the parent element into a fixed pixel value, and that exact pixel value is inherited by every child regardless of the child's own font size. This means a heading or small text nested inside can end up with a line-height that doesn't match its own font size, unlike unitless values which recalculate per element. _daily.dev surfaces practical CSS gotchas like this for developers debugging inconsistent typography spacing._ ## Community discussion Top comments from developers on daily.dev. **@keen** · 1 upvotes > how different is unitless with em? > > i've been using like 1.14em all my life like for a decade? > > like all css tutorials out there uses em or unitless (forgot), never even heard about using % as line height ever since **@yaireo** · 1 upvotes > This is why you should always hire a frontend specialist that knows a million of these small things rather than some all-around fullstack dev which can do 80% of the work but the other 20% will look like crap in many scenarios. > > BTW this is known thing for decades. Always use unit-less values for `line-height` CSS property. **@sabined** · 0 upvotes > Love learning these little details! **@confidentcoding** · 0 upvotes > I read something about this about two years ago and I've been using unitless line height ever since! ## Similar posts on daily.dev - [A Better Way to Express Percentage Height](https://daily.dev/posts/a-better-way-to-express-percentage-height-qxbepwjup) · CSS Tip · 6 upvotes · 1 comments - [Responsive and Fluid Typography with Baseline CSS Features](https://daily.dev/posts/responsive-and-fluid-typography-with-baseline-css-features-rnoepawxs) · OddBird · 4 upvotes · 0 comments - [Death to px, long live ch\!](https://daily.dev/posts/death-to-px-long-live-ch--hw0sq1nxi) · Terence Eden · 6 upvotes · 6 comments - [Responsive Letter Spacing](https://daily.dev/posts/responsive-letter-spacing-zsikazax5) · Cloud Four · 0 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/wait-line-height-works-like-that--fqgb5s37h) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Wait, line-height works like that?!","url":"https://daily.dev/posts/wait-line-height-works-like-that--fqgb5s37h","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/wait-line-height-works-like-that--fqgb5s37h"},"datePublished":"2026-07-23T13:18:31.760Z","dateModified":"2026-09-14T06:52:40.083Z","description":"Unitless numbers and percentages for CSS line-height behave differently due to how inheritance works. When using a unitless value like 1.5, the line-height is...","image":"https://i.ytimg.com/vi/GIoYrH2jn3U/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/GIoYrH2jn3U/sddefault.jpg","isAccessibleForFree":true,"articleSection":"Kevin Powell","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Kevin Powell","logo":"https://media.daily.dev/image/upload/s--XK5Rf0kM--/f_auto/v1717745137/logos/kevinpowell","url":"https://daily.dev/sources/kevinpowell"},"commentCount":6,"discussionUrl":"https://daily.dev/posts/wait-line-height-works-like-that--fqgb5s37h","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":64},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":6}],"keywords":"css","timeRequired":"PT1M","video":{"@type":"VideoObject","name":"Wait, line-height works like that?!","description":"Unitless numbers and percentages for CSS line-height behave differently due to how inheritance works. When using a unitless value like 1.5, the line-height is...","thumbnailUrl":"https://i.ytimg.com/vi/GIoYrH2jn3U/sddefault.jpg","uploadDate":"2026-07-23T13:18:31.760Z","duration":"PT1M","url":"https://api.daily.dev/r/fqgb5S37h","embedUrl":"https://www.youtube.com/embed/GIoYrH2jn3U"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Kevin Powell","item":"https://daily.dev/sources/kevinpowell"},{"@type":"ListItem","position":3,"name":"Wait, line-height works like that?!"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/wait-line-height-works-like-that--fqgb5s37h","comment":[{"@type":"Comment","text":"how different is unitless with em?\ni’ve been using like 1.14em all my life like for a decade?\nlike all css tutorials out there uses em or unitless (forgot), never even heard about using % as line height ever since","datePublished":"2026-07-25T05:22:41.229Z","url":"https://daily.dev/posts/fqgb5S37h#c-ojBucB28u","author":{"@type":"Person","name":"Keanu Kent Gargar","url":"https://daily.dev/keen","image":"https://media.daily.dev/image/upload/f_auto/v1645286608/avatars/tuAS1pyYMt8aWgWVL3u15"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"This is why you should always hire a frontend specialist that knows a million of these small things rather than some all-around fullstack dev which can do 80% of the work but the other 20% will look like crap in many scenarios.\nBTW this is known thing for decades. Always use unit-less values for line-height CSS property.","datePublished":"2026-07-27T16:30:31.535Z","url":"https://daily.dev/posts/fqgb5S37h#c-ShN6wPKUV","author":{"@type":"Person","name":"Yair Even Or","url":"https://daily.dev/yaireo","image":"https://avatars.githubusercontent.com/u/845031?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Love learning these little details!","datePublished":"2026-07-24T15:38:26.655Z","url":"https://daily.dev/posts/fqgb5S37h#c-yTadWSJoG","author":{"@type":"Person","name":"Sabine Deviche","url":"https://daily.dev/sabined","image":"https://media.daily.dev/image/upload/s--ZY_0KAdO--/f_auto/v1786979385/avatars/avatar_FAnj2xLBagDTNant0UOQL?_a=BAMAMicg0"}},{"@type":"Comment","text":"I read something about this about two years ago and I’ve been using unitless line height ever since!","datePublished":"2026-07-24T17:22:02.960Z","url":"https://daily.dev/posts/fqgb5S37h#c-Nzv5WOP2g","author":{"@type":"Person","name":"Lars Faye | Confident Coding","url":"https://daily.dev/confidentcoding","image":"https://media.daily.dev/image/upload/s--OGZu5DEc--/f_auto/v1772569630/avatars/avatar_umWZ9aQAng34qk5aaJl2q?_a=BAMAMiiu0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/wait-line-height-works-like-that--fqgb5s37h#faq","mainEntity":[{"@type":"Question","name":"what is the difference between unitless line-height and percentage line-height in CSS","acceptedAnswer":{"@type":"Answer","text":"Unitless line-height values, like 1.5, are recalculated individually on each element based on that element's own font size, so children with different font sizes get correctly scaled line heights. Percentage line-height values are computed once into a fixed pixel value and that same value is inherited by all descendants, which can cause mismatched spacing when font sizes vary, such as with fluid typography. Explore more CSS deep dives on daily.dev before an inherited line-height value throws off your fluid type scale."}},{"@type":"Question","name":"why does my line-height look wrong on smaller or larger text when using percentage values in CSS","acceptedAnswer":{"@type":"Answer","text":"Percentage line-height is calculated once on the parent element into a fixed pixel value, and that exact pixel value is inherited by every child regardless of the child's own font size. This means a heading or small text nested inside can end up with a line-height that doesn't match its own font size, unlike unitless values which recalculate per element. daily.dev surfaces practical CSS gotchas like this for developers debugging inconsistent typography spacing."}}]} ```