Setting the font size so that the height of the letter is equal to a certain value

Question

I want to scale the letter to the exact height of another element using CSS. For example, I might want the text to be exactly as tall as some image:

How can i achieve this?

When I set the font size equal to the height of the image, the letters are smaller. I can try to adjust this manually until it becomes equal, but I would like to calculate it.

---

My current solution is to set the line height to the image height and calculate the font size from the font metrics:

.the_image { height: 28px; } .the_M { line-height: 28px; font-size: calc(28px * 2048 / 1490); } 

In this case, the font metrics are 2048 UPM (units per em), and the letter "M" is 1490 units. Dividing the size of em (2048 units) by the height of the letter (1490) results in a factor that scales "M" to the desired height (here: 28px).

In this case, I know the font used because I paste it with @ font-face, and I know the font metrics because I looked at it in the font editor (I use Fontforge and Glyphs to create my fonts), but I don't care like a solution that works with unknown fonts from a user computer.

Answer 1

First you need to set the position and then inherit the height Something like:

  .the_M{ position : relative; height : inherit; }