How to compare font heights?

Question

css

Why do different fonts have visually very different heights, with the same pixel size?
I am writing a program that generates random texts with headings, and the text and heading must be in different fonts. There are situations when the text font in CSS has, for example, font-size: 20px, and the title font has font-size: 27px, but the title font is visually smaller than the text font.
Why is this happening, and how then to compare the size of different fonts?

Answer 1

Yes, there is. Read literature on fonts.
Key words: letter, size, point, shoulders, x-height, cap-height.
X-height affects the visual perception of text size the most. And she really can swim in a wide range. There are three ways out:
1. Customize by eye.
2. If you have a fixed set of fonts, register their heights in a certain LUT.
3. Extract the metric from the font file programmatically.
But the last case is rather confusing, there you have to dive into a bunch of other metrics.
Here you can take a look: https://fontdrop.info/ (tab "data")