Font-Size Effects: Unraveling the Dual Impact on Text Height and Width
as of my knowledge the font-size effect only the the height of the text in an element(correct me if am wrong). which mean if font-size is 10px, height of text inside an element become 10px if changing the font-size to 20px the height of the text become 20px.
but the question I want to ask here if above is correct then why the width of the text also changes as the font-size of the element change
codesandbox: https://xlvn5c.csb.app/
4 Replies
To maintain text proportions it can't just grow the height
so you mean for better looking it maintain both height and width or can say maintain the the aspect ratio
You aren't actually declaring the
height of the characters, like you would if you had something like div { height: 10px }. Instead, you're declaring the desired height of the EM box.
It's sort of the available space the font has to draw a character inside of (I say sort of, because it can draw parts of a character outside of it's EM box).
Set two different fonts to font-size: 20px and they will likely look a little bit different in size. That's because each font is created a little differently. There's a lot that goes into how big a font actually looks visually, and it's not just the size, but also things like x-height and other things, but I wouldn't stress about that size of things so much.
Basically, when you set a font-size, your giving a very approximate height, and the characters will scale proportionally bigger and smaller based on that height.thank you so much