How are fonts sized when specifying "px" in CSS?

Question

I'm trying to pin down exactly what px means to font-size in terms of allocated space on the page, and the results I'm getting don't match my expectations.

I was under the impression that using pixels in conjunction with font-size meant that the vertical space taken up by the typography would match the value specified. For example, if I specified font-size: 16px, a line of text with that rule applied would have a height of 16px. Please note that I was not expecting the actual glyph to be 16px in height, but that the browser would allocate 16px to display the glyphs.

Here's some code to use as a reference so I can explain what I expected to see vs. what I'm actually seeing:

.style-it {
  box-sizing: border-box;
  margin: auto;
  width: 500px;
  height: 500px;
  border: 5px solid black;
  padding: 20px;
  font-size: 150px;
  font-family: sans-serif;
}

<html>
<div class="style-it">
  <div>
    CSS
  </div>
  <div>
    IS
  </div>
  <div>
    AWESOME
  </div>
</div>

</html>

I have a static height of 500px set on my style-it div, which has a 5px border and 20px padding. Therefore, the content of my div has a height of 450px. With my previous understanding of font-size and px, I would expect three lines of text at a font-size of 150px to fill that 450px of content perfectly, but that isn't the case.

I've placed each line of text into their own div so we can clearly see that each line is slightly larger (173px in Chrome) than my 150px specification.

So, what's going on here? Is it that the glyphs themselves actually are 150px in height and the "box" around them adjusts arbitrarily based on some internal browser rule?

Is there a way that I would be able to know for sure that "I have container that is Xpx tall and I can fit Y lines of text perfectly in there by setting their font-size to Zpx"?

Just an interesting problem that I came across that I couldn't find a good answer to. I don't know if it's terribly useful in the real world, but I was interested to see if anyone could answer nonetheless.

EDIT: I should have been a little clearer on what I was asking. I'm not having trouble figuring out how to fit the text inside the div, but rather interested in why, as the duplicate linked article states, the font-size value is not the same size as the em-square. In other words, why is specifying a line-height of 1em even necessary in a situation like this?

For anyone who comes across this, the linked question has a great article that is just the sort of thing I was looking for: http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#lets-talk-about-font-size-first

I recommend accepting @Michal's answer, even though it is a little bit of a frame challenge (doesn't answer the exact question asked). You have an XY problem, I suspect. You really just want to fit N lines into a container perfectly, but you think that the best way to do that is by calculating pixels, however modifying `line-height` seems (to me) to be the best solution, since knowing how different browsers render font may be untenable. — Greg Schmit, Nov 30 '18 at 18:23
@ksav If I am correct in thinking that the author is dealing with an XY problem, then the actual problem they want solved is not a duplicate of the linked question. — Greg Schmit, Nov 30 '18 at 18:24
True. I've just read @Michal's answer and it seems to explain what the op is *most likely* trying to figure out. — ksav, Nov 30 '18 at 18:28
must i say that border isnt conssidered part of width, since i remember making triangles using width 0 and setting pixel widths to borders therefore it would be 500-40 not 500-40-10. which seem to be exactely the extra pixels that seem to pop out with ur css plus the line height is also an interseting concept u have to consider too — Mr-Programs, Nov 30 '18 at 18:30

score 2 · Answer 1 · edited Nov 30 '18 at 18:16

2

Your line is not exactly 150px in height because line-height and text-size are two different things. Use the CSS property line-height and set it to 1em (which means that the line height will be the same size as the text size), and your content will be exactly 450px in height.

.style-it {
    box-sizing: border-box; 
    margin: auto; 
    width: 500px; 
    height: 500px; 
    border: 5px solid black; 
    padding: 20px; 
    font-size: 150px;
    line-height: 1em; /* add this line */
    font-family: sans-serif;
  }

<html>
 <div class="style-it">
  <div>
   CSS
  </div>
  <div>
   IS
  </div>
  <div>
   AWESOME
  </div>
 </div>
</html>

edited Nov 30 '18 at 18:16

Greg Schmit

4,275
2
21
36

answered Nov 30 '18 at 18:10

Michal

3,584
9
47
74

1

Pretty sure that if left unspecified, the browser has its own defaults for line-height that it will use to fit the font-size with some extra spacing. Only way to make sure that your container is exactly the same height as your font-size is to specify the line-height – TabsNotSpaces Nov 30 '18 at 18:18
Good answer, if a little bit of a frame challenge. I suspect that the original question is an XY problem: they really want to be able to fit N lines into region, they think that the best way to do that is to calculate this by pixels, when really the best way is to adjust the line-height property. – Greg Schmit Nov 30 '18 at 18:20
@GregSchmit The question isn't looking for the "best way" to accomplish the task, only asking why that particular method isn't a viable solution when it would appear at a distance to be. – Tyler Burki Nov 30 '18 at 19:14
@Mr-Programs 150 is correct since the border width (10px) is included in the height of the element thanks to the box-sizing property – Tyler Burki Nov 30 '18 at 19:15
@TylerBurki Then congrats: you asked a duplicate question which has already been answered. I was being charitable in assuming that your actual problem wasn't solved by that duplicate; this answer is how you go about getting text to fit neatly into containers the way you described. – Greg Schmit Nov 30 '18 at 19:34
@GregSchmit Apologies, no harm intended, just wanted to clarify the question – Tyler Burki Nov 30 '18 at 19:52
@TylerBurki Not a problem! Looking back, my response now appears rude, but it wasn't intended to be. – Greg Schmit Nov 30 '18 at 20:08

How are fonts sized when specifying "px" in CSS?

1 Answers1