What does font size actually mean in css?

Question

I have a div element which width is 500px and height is 500px. The div has a character "A". I set the font size of the div to 500px. I center the character in div. Now, shouldn't the font fill the whole height/width of div since the height/width of the div and the font size is equal?

div {
 border:1px solid black;
 font-size:500px;
 height:500px;
 width:500px;
 line-height:500px;
 box-sizing:content-box;
 text-align:center;
}

<div>A</div>

See [elsewhere on Stack Exchange](https://graphicdesign.stackexchange.com/questions/4035/what-does-the-size-of-the-font-translate-to-exactly) for a nice explanation on how the size doesn't map directly to the letter. — GolezTrol, Sep 26 '18 at 03:50

Obsidian Age · Accepted Answer · 2018-09-26T04:05:52.217

The CSS font-size property denotes that a font is allocated the amount of space specified; it does not have to make use of all of this allocated space. OpenType fonts (such as the Times New Roman default web font) are meant to have an em size that corresponds to 1000 units. Conversely, TrueType fonts have an em size of 1024 units.

The em size is also known as the point size, which is roughly 0.35136mm on the screen. The actual size of the font you see depends primarily on how the developer designed the font glyph when the font was created. There's also factors in play such as how each browser renders said font, and the resolution at which the font is viewed.

Here's a few fonts side-by-side so you can see that the font itself controls the side, yet they all retain a little bit of 'padding':

div {
  border: 1px solid black;
  font-size: 50px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  box-sizing: content-box;
  text-align: center;
  float: left;
}

.a {
  font-family: "Times New Roman", Times, serif;
}

.b {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}

.c {
  font-family: Arial, Helvetica, sans-serif;
}

.d {
  font-family: Georgia, serif;
}

.e {
  font-family: Courier, Monaco, monospace;
}

.f {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

<div class="a">A</div>
<div class="b">A</div>
<div class="c">A</div>
<div class="d">A</div>
<div class="e">A</div>
<div class="f">A</div>

Note that Comic Sans drops down significantly lower than Courier, for example.

score 1 · Answer 2 · answered Sep 26 '18 at 03:52

The font size is the distance between the top of the tallest character to the bottom of the lowest descender. It does not affect width, which typically varies by character. "Ay" should have the same height as your box, but probably won't have the same vertical alignment, because descenders are typically ignored when calculating vertical alignment.

score 0 · Answer 3 · answered Sep 26 '18 at 03:55

No, this will be different.

font-size property specifies the size, or height, of the font and <div> only serves as a container for other HTML elements.

If you want the <div> to have to be the same size as the font, try this computation:

 'font-size': (height/2) + 'px',
  'line-height': height + 'px'

What does font size actually mean in css?

3 Answers3