0

Occasionally, I'll browse to a page where some of the glyphs are rendered slightly taller or shorter than the others. Today's example is from a column of stock prices:

stock prices as rendered in Chrome with a portion enlarged

Notice that the '1', '4', '5', and '7' seem shorter than the other digits.

Why does this happen? My guess is that it's inconsistent handling of round-off error when rasterizing the characters to the pixel grid, but why only with some fonts?

If I were designing a web page, how could I reduce the risk of this happening?

Observations:

  • The size difference is slight, just a pixel or two, but it's very noticeable when it's a handful of the lowercase letters in a paragraph of text.

  • If I increase the browser zoom enough, the discrepancy goes away. If I decrease browser zoom below 100%, the effect can appear even more pronounced--it's still just a pixel or two, but that's a larger percentage of a reduced font.

  • I mostly use Chrome, but I've also seen it with Firefox, Opera, and even IE (pre-Edge).

  • Whenever I've investigated, the typeface has been a web font. (In the example, it's GT America Bold on a Yahoo! Finance page.) But I don't think I have enough examples to prove that correlation. And it's certainly not every web font.

  • It's not just digits. In fact, I mostly notice with text, when a handful of lowercase letters (often 'i', 'm', 'n', 'r', and 't' are shorter than the other lowercase letters).

  • Seeing it now with digits has got me thinking about the shape of the glyph. I know that glyphs with rounded bottoms often dip a small amount below the baseline for perception reasons. Maybe that's also done for characters with a rounded top? If that's the case, there seems to be a pattern here: the short glyphs are the ones without rounded tops and/or bottoms. But the glyphs with the rounded bottoms don't actually dip below the baseline.

5
  • 1
    One reason could be that the font has poor/no font hinting (or that the browser implements it poorly).
    – Wolff
    Apr 9 at 18:20
  • Oldstyle numbers versus propotional numbers? Fonts on web should ignore hiniting. Open the font in a font editor asn see if they indeed go over. Choose another font.
    – joojaa
    Apr 9 at 18:25
  • 3
    "Rounds" are often slightly taller to compensate for the optical illusion of them appearing too small if they were the same height. It's not just numbers.. its any round.. G O Q S C etc.
    – Scott
    Apr 9 at 18:53
  • I visited the page you mentioned and I can't reproduce the problem using Firefox in Win 11. I also note that for me at least, all the numbers are set in "Yahoo Sans Finance", not the font you mentioned. I wonder if there is some font conflict on your computer. I've seen things like this happen before on Win 7 many years ago. I once tried to install Helvetica on an old PC, and somehow it messed up font rendering in the browser, removed it and it went back to normal. Maybe something to ask on SuperUser or Stack Overflow.
    – Billy Kerr
    Apr 9 at 22:09
  • Wolff: Sure, font hinting tells the rendering engine how to deal with rounding error. joojaa: It's not old-style versus modern-style digits because, as I mentioned, it's not just digits. Scott: Yes, I listed the issue of rounds in the observations as a possible hypothesis of why some characters are affected. Billy Kerr: If it reproduced everywhere, I imagine the designers would fix it. The font-family list has GT America followed by Yahoo Sans Finance, and Chrome says it rendered the former. It's interesting you got the latter. Apr 10 at 0:58

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.