6

Background: I'm trying to do font rendering using glyph-bitmaps and I need a way to verify that I'm rendering text in the correct size on the screen.

So when someone says: font-size: 64px where this 64 should appear? I tried the same exercise in HTML, but now I'm more confused than before I started. This is how HTML renders text with font-size: 64px. The red lines - me trying to fit a box of height: 64px around these letters: enter image description here As you can see I can't find a way to match that 64px to the visual letters.

Can someone explain to me where this 64px should appear?

I know that font sizes is a very old thing that comes from physical paper presses and some spacing is taken into account too but isn't there any logic/rules in the digital age? Is it completely arbitrary in the font files? Let's say I'm making a new font: aren't there any guidelines on how 64px font should be sized?

Paulius Liekis
  • 1,676
  • 3
  • 18
  • 26
  • https://stackoverflow.com/questions/16488373/embedded-padding-margin-in-fonts#:~:text=It%20seems%20that%20all%20fonts,never%20get%20what%20you%20want. This was an interesting post that could be related. It's probably because very font has some kinds of line-heights, baselines, margins etc. pre-defined. Maybe you can find more hints in the linked post. – Warden330 Nov 16 '20 at 12:59
  • I also found this: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align Maybe that explains a bit more in depth, but its definetly a very interesting topic to research / discuss – Warden330 Nov 16 '20 at 13:08
  • Straight to the source: https://www.w3.org/TR/css-fonts-3/#font-size-prop – Heretic Monkey Nov 16 '20 at 13:53

1 Answers1

3

Originally, the font-size is measured by the so-called em-square, which is the horizontal width of the uppercase M-Character:

The height of the type piece is known as the ‘em’, and it originates from the width of the uppercase ‘M’ character; it was made so that the proportions of this letter would be square (hence the ‘em square’ denomination). (http://designwithfontforge.com/en-US/The_EM_Square.html)

In CSS, the font-size in pt or px represents, if anything, this em-square. But:

The other day I looked at a bunch of lesson slides from a university-level typography course. One of them claimed that the distance from the baseline (bottom of a letter such as H) to the cap height (top of a letter such as H) was the point size. I wish that were true, as it would be much simpler than the reality. On average, the cap height is about 70% of the point size. (http://www.thomasphinney.com/2011/03/point-size/)

So I guess the answer to your question is: it depends. The em-square still is the guideline, but the actual size of the font dramatically depends on the designer and is often much bigger than the em-square. Or you can try and build on that 70%-mark and look for 70% of your 64px (which would be about 45px) to be the height of normal uppercase letters such as H or M.

I also found this link pretty helpful for typographical questions in CSS: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

PS Note, that this typographical em-square that both quotes talk about is not the same as the em-unit in CSS. In CSS, em is the font-size relative to the parent container (or the default-settings in your browser).

Jere
  • 1,196
  • 1
  • 9
  • 31
  • This is very useful: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align It explains a lot of complexity that goes into text rendering and positioning. – Paulius Liekis Nov 17 '20 at 07:29