Optimal rendering in browsers

clauses's picture

I am having an issue with a font in development, and it is this: The vertical stems are too irregular in width/colour/weight when they are rendered in webbrowsers like Safari or Firefox in OS X. Firefox is marginally better than Safari. A PDF has the same issue, but to a lesser degree. All the stems in question are of exactly the same width. Other fonts like Ariel or other webfonts do not show this issue. I tried both CFF/OTF and TTF, but they both have the same issue. This leads me to think there is some hinting setting I have borked, but OS X does not use hinting, so huh? What can be wrong? I'm working with a UPM of 2048, but I seem to remember making a test in 1000, and that had the same issue.

I'll be grateful for any pointers, hints, puns.

mike_duggan's picture

hi, any chance of some screen shots?

clauses's picture

Hi Mike. We meet once in Reading when you were there with Geraldine. I can post the screenshots to the general public, but if you shoot me an email on es at forthehearts dot net I can send it to you.

hrant's picture

Naomi, this thread is about vertical stems, not horizontal bars.
BTW, do you mean Claus or Mike?


Goran Soderstrom's picture

Just a quick guess; could be that different stem values are assigned (by mistake if you auto hinted the font) to stems that should have the same width. And on top of that perhaps the ppm size change are different, so the rasterizer thinks that *this* stem should be thicker at *that* size and a similar stem should be thicker at another size. I could take a look if I had the VFB of course, now it’s just a guess.

I know people say OSX doesn't read hints but I see a lot of differences when hinting TrueType fonts even on Mac’s. Acrobat uses Adobes rasterizer I think...

clauses's picture

I've opened a bat-channel to Apple and they confirmed that it was a bug. It's both in OS X and in iOS, and can occur with all fonts. Take a look at this screenshot from an iPad. The font is Georgia, and I've put some red pixels under glyphs to indicate the issue.


hrant's picture

> http://i.imgur.com/mPIIh.png

It's a good thing I haven't had breakfast yet.


dberlow's picture

This issue is as old as OSX, we've discussed it here at great length, and I'm surprised someone called it a "bug".

Even if your stems are identical, without x hints they will not remain so when rasterized on the Mac or Windows. In addition, the Mac is using sub-pixel positioning; each glyph may be positioned at one of three possible sub-pixel locations, giving each letter three possible renderings.

In your example, if you look closely, there are three different l.c. "n" renderings in the very first line.

hrant's picture

Hey, Guy Kawasaki has come back as a typography guru!

The other day a friend with a virus-infested Mac took
her system to an Apple store and managed to convince
them to fix her persona-non-grata machine*, but to the
very end they used the term "unwanted software". I have
to think they get fired in 5 seconds for saying "virus".
To be fair many companies seem to do this: I remember
in the 90s I called Adobe to report a bug (it was not
including the correct Black and White in Indexed Color
and Macromedia Director refused to import the images);
the woman actually congratulated me for finding a feature,
and when I pestered her she wouldn't budge. Next release,
"feature" is gone... I should have called and complained
why they removed my favorite feature! The problem is, it's
best if non-employees don't engage in this sort of thing...

* It took two trips. The first time they told her:
"Somebody hacked your email account. Go away."

I don't care who calls it a bug, a feature, or a moot
point; it looks like somebody left dog puke in a ziploc
under the sun for a week.


1) The stems are identical in width. Requiring them
to have x-direction hints sounds like one of those
government forms where you have to enter your
full name in three places, on page 1.

2) It sounds like Claus has hints anyway.

3) Georgia looks fine in Windows.

4) What's this about using subpixel positioning without
subpixel rendering? And if you're using subpixel positioning
of any kind, you better get your shades of gray/color adding
up to even perceptions. Maybe it's a gamma issue?


Does an allegedly typographically-savvy tech company
really let something like this sit around for two years?


k.l.'s picture

hhp – 4) [...]

Sounds great. One question: What does it say?

hrant's picture

If you're going to anti-alias a pattern, in this case regular vertical
lines (stems), the various left_gray + center_black + right_gray totals
need to fall within a tight range so as not to jump out as too light/dark.
And "unplanned" gamma deviation is the first thing to throw that off.
Also, the narrower the center_black the more obvious it gets.


Syndicate content Syndicate content