Typophile

WEB fonts display

Ken Krugh

We have a font that we created in FontLab Studio 5 and is generated as OTF for use in MS Word and InDesign. The product's web site is getting ready to launch but they're having trouble with the display of the font on the web.

In the most recent iteration of the site, using the most recent fonts (glyphs were recently added to the font) the font displays different ways at different sizes as shown in the below screen caps. The screen caps are small, medium and large, the medium being the one that will be used as the main size on the site.

In the medium, as you can see, there are different characters that are different sizes within words. In the word "wisdom" the m clearly seems smaller as do the n, the belly of the h and the r in some of the other words.

The site host, of course, is telling the client the problem is with the font we provided. Not knowing how they have things set up we're having a difficult time even guessing what might be happening.

So my basic question is: Does anyone know what causes this sort problem?

Thanks for having a look,
Ken



Frode Bo Helland

Yes. This is caused by missing or poor hinting instructions in the font. Since this is going to be used both online and in Microsoft Office, I strongly suggest making use of TrueType outlines and the advanced capabilities of TrueType hinting. There are automated solutions, but if you have a budget for high quality manual TT hinting, feel free to drop me a line.

erwindenissen

This is most likely not related to your web server, as fonts are rendered on the client (web browser).

I agree, this is most likely due to missing or bad hinting.

Ken Krugh

Yes, sorry, a very key component I didn't mention is that it looks OK in Chrome, but not Internet Explorer.

I tried using FontLab's auto hinting on all the lowercase letters but it didn't seem to change things at all. I understand that the autohint may not be the optimal hinting but I would have thought I should have seen SOME sort of change. Agreed?

Thanks very much for taking the time to answer.

Ken

Addendum: Just realized that I hadn't checked FontLab's settings for generating. I'll do that and investigate this hinting thing more. Thanks again.

Frode Bo Helland

Maybe you are doing something during export or web conversion that causes the hinting to be lost or overwritten. Different browsers give different results.

Jason Campbell

Yes, sorry, a very key component I didn't mention is that it looks OK in Chrome, but not Internet Explorer.

Which Chrome and which IE?

Thomas Phinney

Yes, if you changed the hinting, you should have seen different rendering in IE.

Note however that unless something else changes, the browser might be caching the font from your earlier test. Did you clear the browser cache on the machine you were viewing in IE?

Also, Chrome on Windows or Mac?

Captured from web.archive.org on 11 Nov 2014. view this capture