0

I experimented a bit with calculating line-height of text with respect to rem and 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 0.8rem through 2.5rem and you can select html 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

Edit:

I added a font-chooser in the example. I want this to work on a wide variety of fonts.

Note:

I know, that the smallest text is not very ledigle, if smallest rem of 12px is chosen. But that is due to the fact of the small font-size (9.6px in that case) rather than the line-height. So please don't mock on the font-sizes themselves.

  • 1
    Why not just use a line-height of 1.4 (without a unit)? – AAGD Jul 11 at 13:06
  • @AAGD I think of 1.4 being too big for big font sizes. I not only want legible text, but also pleasing one. – yunzen Jul 11 at 13:27
  • At least, who ever it was, when you downvote as first person, please give a comment on the reason. – yunzen Jul 11 at 13:59
  • 1
    Decisions like these always need to be made in context. As is, I think your question is primarily opinion based because of the ambiguity of it. – Zach Saucier Jul 11 at 14:51
  • 1
    @ZachSaucier I'm aware about the opinion-based aspects of my OP. I want to lay emphasis on the legibility part. – yunzen Jul 11 at 14:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.