Fonts don't have crispness (looks very ghostly) and thickness varies between browsers

[ghost]

I've been trying to fix the quality of fonts for a while now. I'm using CCLabelTTF and the font thickness seems to vary a lot between browsers as well. Here's an example of MuseoSans_100.ttf:
Safari:

Chrome:

FireFox:

I tried loading other fonts as well and the light weight ones look very ghostly.I looked at a lot of articles online for this and none of them seem to fix this issue. The version of Cocos I'm using is 2.2.2 but this seems to happen for V3.1 as well. I tried looking at a few other cocos2d html5 games out there and they all seem to have a very similar font quality.

[hsdk123]

@dingpinglv @pandamicro I'm having the same issue as well. The font doesn't display as crisp as compared to ex. when I render text using c++.

[ghost]

@dingpinglv @pandamicro any fixes for this? We're looking to create a lot of games using this engine but the font quality would be a big deal breaker. We are also going to have the text localized in many languages and need many different fonts.

[hsdk123]

@dingpinglv @pandamicro As pointed in the comment above, it's past about 2 months since the original post - has there been any updates to this? This is especially really important for games with a lot of narrative.

[dingpinglv]

Hi @hsdk123 and @sjayadevan ,
I'm sorry for reply late.
About the fonts look very ghostly, do you set the labelTTF's scale? Because WebGL haven't Drawing text API, so we use canvas to draw text and use it as texture on WebGL. On canvas Mode, we use the same mechanism to draw text, the reason is that it's very expensive to call fillText on mobile browser.

About font effect varies between browsers, I have no idea, because this issue is incompatibility between the browser vendors.

My suggestion is that:

1. don't scale labelTTF, and use bold font
2. Use LabelBMFont, if there aren't a lot of text displayed

Best regards
David

[dingpinglv]

Here is a contradistinction between scaled and unscaled:
Scaled code:

        this.helloLabel = new cc.LabelTTF("Hello World", "Arial", 30);
        this.helloLabel.setScale(2);

Chrome:

firefox:

IE:

Safari:

unscaled code:
this.helloLabel = new cc.LabelTTF("Hello World", "Arial", 60);
chrome:

firefox:

IE:

Safari:

[ghost]

@dingpinglv Thanks for replying!

1. I'm not scaling the labels.
2. We need to use 20 pt font sizes not 60 as shown in your example.
3. Your unscaled code examples still show blurry text. They're not crisp and you have aliasing issues on them.

With a heavier font weight of Museo Sans I get the following:

Chrome (Museo Sans 300):

Safari (Museo Sans 500):

As you can see none of them are crisp. It's also interesting that lighter weight font in Chrome is much thicker than heavier weight font in Safari

[ntrrgc]

This looks very much like a premultiplied alpha issue.

From GIMP documentation:

Premultiplied alpha is just a different way of representing alphified pixels. If the separate alpha pixel is (r, g, b, a), then the premultiplied alpha pixel is (ar, ag, ab, a).

The reason why it's interesting is that linear combinations of pixels (i.e. a1p1 + a2p2) work better in premultiplied alpha space than in separate alpha space.

For example, taking the 50/50 blend of white and transparent works like this: White is (1, 1, 1, 1) and transparent is (0, 0, 0, 0) in both spaces. So the 50/50 blend is (0.5, 0.5, 0.5, 0.5). In separated space, that's half-transparent gray, but in premultiplied space, that's half-transparent white, which is what you expect.

Linear combinations of pixels occur in a lot of contexts, including:

1. layer compositing
2. blurring and sharpening
3. interpolation
4. scaling
5. rotation, perspective, and other transformations

and probably one or two others.

The symptom of getting alpha wrong is gray fringes when you work with transparent layers.

Here is also a video demonstration of how not using premultiplied alpha causes these artifacts: https://www.youtube.com/watch?v=dU9AXzCabiM