Web features explorer

Rhythmic sizing

Limited availability

The line-height-step CSS property creates consistent vertical rhythm by setting the spacing between body text baselines. It rounds taller lines like headings up to the next multiple of the body text spacing.

Browser support

  • Chrome Not supported Bugs: 586413
  • Chrome Android Not supported
  • Edge Not supported
  • Firefox Not supported
  • Firefox for Android Not supported
  • Safari Not supported
  • Safari on iOS Not supported

Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.

Developer use cases

  • My main use case is a grid of product cards. The card titles differ in height and are never a multiple of `rlh`, because they have a line height of their own and the text varies in length, wrapping to a different number of lines. As a result, the product descriptions and specs end up shifted off the baseline grid of the body text by a different distance in every card. In other words, plain text in neighbouring cards is misaligned. Designers and project managers often ask to do something about it, but nothing can be done about it without JS, which makes the interface janky and sluggish (and because of that the rhythm has to be given up). But cards are not the only use case. Here are a few more: - multi-column layout (rarely, but I do have to resort to it); - long-form text simply always looks better when the text itself, the headings, images, quotes, lists and everything else follow the same rhythm; - for Japanese and Chinese typography, rhythm is not mere decoration; - EPUB with two pages displayed side by side badly needs these properties too. My main use case is a grid of product cards. The card titles differ in height and are never a multiple of `rlh`, because they have a line height of their own and the text varies in length, wrapping to a different number of lines. As a result, the product descriptions and specs end up shifted off the baseline grid of the body text by a different distance in every card. In other words, plain text in neighbouring cards is misaligned. Designers and project managers often ask to do something about it, but nothing can be done about it without JS, which makes the interface janky and sluggish (and because of that the rhythm has to be given up). But cards are not the only use case. Here are a few more: - multi-column layout (rarely, but I do have to resort to it); - long-form text simply always looks better when the text itself, the headings, images, quotes, lists and everything else follow the same rhythm; - for Japanese and Chinese typography, rhythm is not mere decoration; - EPUB with two pages displayed side by side badly needs these properties too. [see original comment]