masakudamatsu / line-height-picker

A front-end web app that helps web designers/developers pick the best line-height value for their websites
https://line-height-picker.vercel.app
MIT License
2 stars 1 forks source link

Find the appropriate line-height value for section titles #189

Closed masakudamatsu closed 4 years ago

masakudamatsu commented 4 years ago

Temporarily, we set it to be 1.

Richard Rutter suggests the following.

So with the modular scale of 1 to 1.5, the body text's line-height is 2.5. If the section title's cap-height is (1.5)^3 = 3.375, then the line-height can be 5, which leaves 1.625 between the baseline and the top of the cap-height.

masakudamatsu commented 4 years ago

Now we set the line-height so that the space between the baseline to the top of the x-height to be equal to the x-height. That is, 3 times the base x-height.