Set the top/bottom padding for sample paragraphs

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

Closed masakudamatsu closed 4 years ago

masakudamatsu commented 4 years ago

padding-top

Pick a value so that the top horizontal line is the baseline of the previous line of text.
We need the sum of (1) font-size (descender / unitsPerEm) and (2) font-size ((line-height - 1) / 2)

padding-bottom

Pick a value so that the bottom horizontal line is the top of x-height of the following line of text.
We need the sum of (1) font-size ((ascender - x-height) / unitsPerEm) and (2) font-size ((line-height - 1) / 2)