1

I'm using a font called Fugaz One through @fontsource. When I put it into an H1, it renders fine. However, the resultant text elements it creates are significantly too tall. If I set the css property line-height:100% it renders alongside other text fine, but when it is selected the selection is still too tall. It obscures text above and below it.

This is the size of the tag when line-height is not set: Without line-height set:

This is how the selection looks when line height is set: enter image description here

Is there any way to get this font to behave properly? I'd rather not switch, as I'm quite a fan of it.

Also, I have tried setting another font in the H1 tag and it renders fine (expected height of tag).

jemhop
  • 51
  • 3
  • I am unable to reproduce the problem please put a runnable snippet into your question and check that it shows the problem. Put a character with a descender in as well (e.g. f) and you should see that just enough space if being left below the line for its descender. – A Haworth Apr 08 '23 at 16:31

1 Answers1

1

This seems to be an inherent property of the typeface. Certain characters go far lower than the baseline, thus the significant empty space below the font.

jemhop
  • 51
  • 3