2

The pictures below demonstrate my issue. Everywhere this font is used you can see that it won't vertically center like another font would. I don't have any whacky line-height settings. It's just like this anywhere I use it.

I'm at a loss as to why, I've been googling this issue finding nothing but tutorials about line-height that aren't helpful in the least.

The font is ITCAvantGardeStd-Demi.otf.

enter image description here

enter image description here

After following zgood's suggestion, converting the font and checking "Fix Vertical Metrics" on https://transfonter.org/ solved my problem.

With "Fix Vertical Metrics":

enter image description here

enter image description here

atotalpirate
  • 93
  • 8
  • Do you have a code example of this behavior? – mhatch May 09 '18 at 18:43
  • It feels centered when you use string like: `qtyipdghjb` ? – Peter May 09 '18 at 18:46
  • The site is still local so no, I'll throw up a fiddle and see if that demonstrates it. *edit: can't upload assets to fiddle, doh* – atotalpirate May 09 '18 at 18:50
  • Edited the image to use that string, no dice. – atotalpirate May 09 '18 at 18:51
  • without seeing the code we cant tell what is the problem, it can be a font, but can be a wrong `line-height` in css or padding in the container element etc... – Peter May 09 '18 at 18:54
  • You might want to try a site like [FontSquirrel](https://www.fontsquirrel.com/tools/webfont-generator) web font generator. Select your font, then select **Expert** mode and make sure the **Vertical Metrics** is set to "Auto-Adjust Vertical Metrics". Generate the new font file and see if you have any luck – zgood May 09 '18 at 19:01
  • @Peter: Understandable. I'm looking for sites that use this font to see if they have the same problem. I'm quite sure it's not line-height though, this issue is persistent in every use of this font-family regardless of element, padding, line-height, etc. – atotalpirate May 09 '18 at 19:02
  • @zgood: I actually tried this, FontSquirrel has this font blacklisted because Adobe. Do you know of a similar service? *edit: sorry for my laziness, googled it found one that works. Will report results.* – atotalpirate May 09 '18 at 19:03
  • Also, have a look at [this article](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align) it might help understand this issue some – zgood May 09 '18 at 19:04
  • @zgood: Lol, literally just finished reading that one. Enlightening but unfortunately not related. – atotalpirate May 09 '18 at 19:06
  • Is this a browser specific issue? or is it incorrect on all browsers? Also you can try this [site](https://transfonter.org/) instead of font squrriel maybe... it has a setting for vertical metrics as well – zgood May 09 '18 at 19:06
  • @zgood: This solved it! Thanks for your help! If you want to post an answer I can mark it resolved. – atotalpirate May 09 '18 at 19:10

2 Answers2

4

Sometimes you need to normalize a fonts vertical metrics. You can run it through a web font generator like Font Squirrel or TransFonter and select "Fix vertical metrics" to generate a new font file.

zgood
  • 12,181
  • 2
  • 25
  • 26
0

I had the same problem. It did not have any visual effects, but a notice "Page isn't usable on mobile" on google Mobile-Friendly Test.

My was fine but the text inside had extra height which no css can control.

I just added

h1 {
  overflow:hidden;
}

It solved the problem without any visual changes since the did not have any width or height styles, therefore the overflow:hidden just keeps the without overflowing.

Harrison
  • 1,654
  • 6
  • 11
  • 19
user3635954
  • 1
  • 1