The solution lies in using gdipp to override the default font-rendering engine in Windows. Just download the latest package from their Google project page and double click to install it.
I’m using a custom font and the @font-face tag. In Windows, everything looks great, regardless of whether it’s Firefox, Chrome, or IE.
On Mac, it’s a different story. For some reason, the Mac font renderer thinks the font is a lot shorter than it is.
For example, consider this test code (live example here):
Open it on Windows Firefox and on Mac Firefox. Use your mouse to select it.
On Windows, you’ll notice it fully selects the font.
On Mac, it only selects about half the font. If you look at what it is selecting, you’ll see that that part has been centered, instead of the full height of the font.
Is there anyway to fix this rather large discrepancy?
Answers:
The font’s ascent is too small. The Windows browsers (and Mac Safari, too, in my testing) just throw out the ascent value as incorrect, whereas Firefox and Opera on the Mac accept it.
The easiest way to fix this is with ttx, part of FontTools.
Use it like this:
Change the ascent value to 1100 (or whatever works for you):
Then reconstitute the font:
This new font should be fixed; you can check by opening it in Font Book.
If you want a more visual picture of the problem, try FontForge, though be warned its interface is rather baroque. Once you’ve opened the font, double-click a capital letter; you’ll see a horizontal line bisecting the glyph. This is the (wrong) ascent. You can fix the ascent in Element > Font Info, then click General. Uncheck “Scale Outlines” or the ascent will be bigger but still wrong. 🙂
However, to modify the font, I would recommend ttx over FontForge for small changes like this because it’s less likely to destroy what it doesn’t understand.
Answers:
I was able to fix my font by uploading the TTF version to FontSquirrel and selecting the “Expert” option and then keeping all default options. The one that fixes it I believe is “Fix Vertical Metrics.”
Now the font line height renders the same on MAC and PC. Good luck
Answers:
Actually Windows is the culprit. Windows ClearType font renderer actually hammers the font’s shape into pixel boundaries to make it “clearer” whereas Mac OS doesn’t touch the shape of the font (which I very much prefer). This often leads to “taller” or “thinner” glyphs on screen, whereas on Mac OS you get a true representation of the font as the designer intended.
Here’s an article by Jeff Atwood explaining the differences. In any case, you’re not going to be able to get around it.
Tags: browser, windows
Font rendering on the screen is a complex topic, one that I spend every day at my job tackling, and one that you could devote whole books or websites to... oh wait someone has: http://www.rastertragedy.com/
When it comes down to it, mac and windows have different philosophies about text rendering. Put simply, Windows, in most cases, requires the font itself to have instructions built inside of it to tell the operating system to put the pixels at each size. Most fonts designed for the screen will have these instructions—'hints'—like the 'RE' fonts you will find on WebType, or the ScreenSmart fonts you will find on our own site, Cloud.typography. Other fonts, made for print or display sizes, might not. So it really comes down to picking a good text font if you want type to look good on both Mac and Windows.
Most sites offer a place on their site where you can see how their type renders in different browser/os combinations. Everyone should take advantage of those before committing to one font or another.