How to improve label font rendering, especially with border?

The rendering of labels with borders leaves something to be desired:

- The border is cropped on the left side sometimes.
- The baseline seems a bit uneven, differing from letter to letter
- Kerning is increased the wider the border is, which looks odd

To see what I mean, replace the setFont() function in with the code below, Run the demo, and select setFont.

    function setFont() {
            position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
            label : {
                text : 'Philadelphia',
                font : '24px Helvetica',
                fillColor : Cesium.Color.WHITE,
                outlineColor : Cesium.Color.BLACK,
                outlineWidth : 4,
                style : Cesium.LabelStyle.FILL_AND_OUTLINE

The result looks like this:

You can see some border cropping on the left edge of most of these letters. The baseline difference is visible here though subtle. The kerning issue is less apparent but a label like "Karachi, Pakistan" makes those more apparent: -- check out the segment "kist" -- bleh!

Is there any work being done on this, or fonts or settings that work better?


There’s some improvements in a branch, check out #2549 for details.


Cool will do!