CODEWITHSUNDEEP
htmlcsssveltesveltekitline-height
jemhop
jemhop

Reputation: 61

How to deal with a font that is "larger" than its own characters

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).

Upvotes: 1

Views: 70

Answers (1)

jemhop
jemhop

Reputation: 61

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.

Upvotes: 1

Related Questions