I've got a font that says its cap height is 195 and x-height 320.

These are its metrics:

enter image description here

But when rendered in the browser at 100px font size, you can clearly see that the metrics don't apply. There is no way this font's cap height is just 195.

enter image description here

What is going on here? Why does the cap height and x-height not match the one shown in browser? I've also played with this font in Adobe tools and also found out that its cap and x-height are far off the ones specified.

  • Why is the x-height much higher than the Caps height? o_O
    – Pepe Ochoa
    Dec 1, 2017 at 3:44
  • exactly! What is going on here? This is a google font, so feel free to download it
    – sanjihan
    Dec 1, 2017 at 8:37

1 Answer 1


There may be a misunderstanding here...

Those metrics don't actually affect the glyph size, height or alignment at all. They're just meta data that aren't of much use in general usage. Specifically in Glyphs (which I can see your font info dialog is from) The x-height will control the display of the box in your glyph view.

This, for example, is the difference between a 600 x-height...

enter image description here

And a 300 x-height...

enter image description here

All that happened is that a guide line, that showed me the x-height has moved. The font will still render exactly the same as it did before and no one would be any the wiser.

The cap height set in your example is nonsensical and useless. Ignore it.

The metrics defined in the Custom Parameter section are metrics which do affect the rendering of your font in some applications*, but they affect the alignment and sizing of the font as a whole. There is no metric that will change the relative height of some glyphs compared to others (e.g. change the x-height or cap height without also changing every other metric).

* See https://glyphsapp.com/tutorials/vertical-metrics

  • Thanks Cai! Lets say I want to draw a bounding box around the text, that is just big enough to encompass all of the glyphs, I cannot do that just with font metrics and some calculations, because digital devices don't really care what font metrics are or they used them inconsistently.
    – sanjihan
    Dec 1, 2017 at 10:11
  • @sanjihan pretty much. The ascender and descender metrics (and the variations thereof that you see in Custom Parameters) do affect the bounding box somewhat; but it's not consistent across different applications/OSs etc and I'm not really sure on the details
    – Cai
    Dec 1, 2017 at 10:15
  • hhea/win ascender and hhea/win descender seem to be used in browsers to determine the total vertical spacing (1016-(-236)=1252, 1252/1000 = 125,2px of total height which is close enough). But I can't explain how does the browser determine the actual baseline of the font.
    – sanjihan
    Dec 1, 2017 at 10:52
  • For automation, remember that there can be manual baseline shifts etc. that will not be reflected in a metafile, resulting in clipping.
    – Yorik
    Dec 1, 2017 at 15:22

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.