Custom Fonts with Different Vertical Metrics Between Os's

custom fonts with different vertical metrics between OS's

Fonts have three sets of embedded vertical metrics information. One set for Mac, one set for PC and another set typically used by *nix. These can be difficult to synchronize but our Font-face Generator does try to get these values the same. Give it a try?

http://www.fontsquirrel.com/fontface/generator

More info from the Google type team:

http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations

custom font looks different (higher) on Mac OS X

http://www.fontsquirrel.com/tools/webfont-generator is one possibility.

There is a checkbox: Rendering: Fix Vertical Metrics (Normalize across browsers):

At least when the checkbox is checked or not generates different vertical metrics in generated ttf-file.

Fix Vertical Metrics not checked (when inspected in FontCreator):

Fix Vertical Metrics checked:

Downloaded kit has also ccs-file, but seems that there are not browser-specific hacks. I assume that this could be handled in font side by fixing metrics.

To check my assumption I used font from Typekit.net and compared the generated css file (Typekit fonts are base64-encoded in css) with OSX Chrome and Win Chrome and the base64-encoded font files were identical. This seems to confirm that it is possible to fix font metrics in a cross-browser way.

So I think that the accepted answer that suggests generating browser-specific css fixes is not necessary.

However I don't know how good FontSquirrel is in this normalization. If you test it, please report your findings :)

Codename One custom fonts vertical alignment

There are some issues that we are aware of with the font rendering in the Java2D port of Codename One. We aren't sure if these are issues on our end or within Java itself, there is an issue in the tracker about this.

Offset in custom font's vertical alignment

The problem with custom fonts is that they often have a ascender/descender.

In this case, the descender causes the issue. To solve it, we have to edit the font itself.

How can we do so?

There are several tools to edit your fonts. Since I'm working on a Mac, I'm using the Apple Font Tool Suite. Once you’ve installed this you need to open Terminal and navigate to the directory that contains your font. After that enter the following command:

ftxdumperfuser -t hhea -A d font.ttf

This will create a file called font.hhea.xml, open this new file into a text editor and adjust the values for the descender. After editing and saving enter the following command into terminal to reconstruct your Font file:

ftxdumperfuser -t hhea -A f font.ttf

Note that there are three different sets of vertical metrics in most fonts. In the OS/2 table under metrics: (1) the WinAscent, WinDescent, (2) TypoAscender, TypoDescender, and (3) in the hhea table: the Ascender, Descender and LineGap.

The commands would be:

ftxdumperfuser -t OS/2 -A d font.ttf - when finished editing: ftxdumperfuser -t OS/2 -A f font.ttf

Solely changing the descender in the hhea table will change the font for any Apple device, but not for a Windows devices. Hence it's always recommended to change all three ascenders/descender (especially hhea and TypoAscender/TypoDescender).

In case you happen to work on another operating system. Just get any tool to edit fonts and edit the given values.

Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?

It took me a while, but I just found out that my font distributor lets me configure fonts before download. I was able to add "Line Height Adjustments" to the font.
These were the available options:

Line Height Adjustments

• Best (Use the best method to normalize the line height for this font)
• 120% (Redefine the line height as 120% of the point size)
• Automatic (Distributes OS/2.Typo values across ascender, descender and line gap)
• Bounding Box (Match the bounding box of the glyphs, line gap will always be 0)
• Native (Use the line height as defined in the font, results may differ between browsers)

The "Bounding Box" option did the trick. Now "Segoe Print" is nicely adjusted.

Whenever I face this problem again I will either use the fontsquirrel generator for free fonts or purchase a font from a distributor that offers an option to adjust the line heights right out of the box...

---

Related Topics