CSS Rhythmic Sizing

There are always times when you are building a page with multiple columns and the content is a collection of headings and images just the same way as shown below or its varieties.

See the Pen line-step-height demo by Prateek Jadhwani (@prateekjadhwani) on CodePen.

If you see at the bottom of the page, the text is a little bit displeasing to look at. If you are someone who like to see typography in a perfect way, that starts at the same line, and ends at the same height.

So, the question is what can be done make it look more pleasing? Well, there is a new css property for that. Its called the line-height-step. All you need to do is add line-height-step property to you container css with height more than that of the line height, and thats it

This is what it looks like with line-height-step set to 18pt. Notice the end of the article. They all end on the same line.

See the Pen line-step-height demo2 by Prateek Jadhwani (@prateekjadhwani) on CodePen.

If you are more interesting in this css property, feel free to read about it in this editor’s draft.

comments powered by Disqus