react-textfit | React component to fit headlines | Frontend Framework library

I am using react-textfit to automatically scale text to fit to a div of a specific width and height (which is a percentage of the window). The font I'm using has a massive descender (whitespace at the bottom). At a result, trying to center other elements inline with this text is difficult. Since the size of this text will change based on the screen size, I cannot manually change the line-height to fix this. Furthermore, using a variable line-height does not work, as the font is not centered around the text.

For example, in this image, you can see how there is significant whitespace below the character.

A variable line height (70%) does not help either, since the whitespace at the bottom is treated as it is apart of the character itself. Thus, the character is not vertically centered within the div, which is the intended outcome. Manually setting a line height with a pixel value also fails in the same way.

Because the character has whitespace below it, inline elements that should be centered vertically alongside the text is instead shifted down.

The title, alongside the included inline elements are wrapped in the following div: