I experimented a bit with calculating
line-height of text with respect to
em units. What I came up with is this calculation:
line-height: calc((1rem * 6 / 10) + (1em * 8 / 10));
I've made a little demonstration with texts having
font-sizes ranging from
2.5rem and you can select
font-size in a range from 12 to 28 for yourself with the range input at the top.
Also I limited the maximum with of every element to
max-width: calc(55 * 1em);
My question: Do you think, those values work?
For this the calculation leeds to smaller relative line-heights when the font-size is big. The results should be legible and pleasing, while taking up as less vertical space as possible.
The interactive example is seen here: https://s.codepen.io/HerrSerker/debug/e29b642ef84c06b02bdf00c6aa27861c
I added a font-chooser in the example. I want this to work on a wide variety of fonts.
I know, that the smallest text is not very ledigle, if smallest
12px is chosen. But that is due to the fact of the small
9.6px in that case) rather than the
line-height. So please don't mock on the