Timer node numbers shift on sound and light scenes

[KatieWoe]

Test device:
Dell Laptop
Operating System:
Win 10
Browser:
firefox (and others)
Problem description:
For phetsims/qa#238
When the timer reaches 100+ units there are some numbers that seem to jump or shrink. stringTest=double still causes the issue, but it does not seem to be worse. Only happens on sound and light scenes, likely due to slightly longer labels in comparison to water.
Steps to reproduce:

1. Go to a light or sound scene on any screen
2. Pull out the timer and start it
3. Wait until the timer reads 100+ and watch for behavior

Screenshots:

Troubleshooting information (do not edit):

Name: ‪Wave Interference‬
URL: https://phet-dev.colorado.edu/html/wave-interference/1.0.0-dev.51/phet/wave-interference_en_phet.html
Version: 1.0.0-dev.51 2018-12-12 03:47:24 UTC
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0
Language: en-US
Window: 1536x760
Pixel Ratio: 2.5/1
WebGL: WebGL 1.0
GLSL: WebGL GLSL ES 1.0
Vendor: Mozilla (Mozilla)
Vertex: attribs: 16 varying: 30 uniform: 4096
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 32767x32767
OES_texture_float: true
Dependencies JSON: {"assert":{"sha":"928741cf","branch":"master"},"axon":{"sha":"73e761ec","branch":"master"},"brand":{"sha":"1fd6682e","branch":"master"},"chipper":{"sha":"61bc739b","branch":"master"},"dot":{"sha":"b45eafe8","branch":"master"},"griddle":{"sha":"914c9215","branch":"master"},"joist":{"sha":"5a013a46","branch":"master"},"kite":{"sha":"f3e96e5b","branch":"master"},"phet-core":{"sha":"86dec8cc","branch":"master"},"phet-io":{"sha":"a267fdb1","branch":"master"},"phet-io-wrapper-classroom-activity":{"sha":"5dea7f54","branch":"master"},"phet-io-wrapper-hookes-law-energy":{"sha":"b42eaef7","branch":"master"},"phet-io-wrapper-lab-book":{"sha":"b884e9c1","branch":"master"},"phet-io-wrappers":{"sha":"d5b42848","branch":"master"},"phetcommon":{"sha":"869b2561","branch":"master"},"query-string-machine":{"sha":"e4f9e8e8","branch":"master"},"scenery":{"sha":"a18ce7f1","branch":"master"},"scenery-phet":{"sha":"56df5b6d","branch":"master"},"sherpa":{"sha":"a1f5e867","branch":"master"},"sun":{"sha":"38ed71af","branch":"master"},"tambo":{"sha":"746fbd32","branch":"master"},"tandem":{"sha":"c7a56e2e","branch":"master"},"twixt":

[arouinfar]

@KatieWoe I think the wobble in the text comes down to the fact that the string width is slightly variable. I don't think there's anything that can or needs to be done here. @samreid if you agree, please close.

[samreid]

I confirmed that the size difference is caused by the width of "11" in this case (in the decimal part), which is thinner than the other two digit values in the decimal parts.

@arouinfar have we investigated a fixed-width font for the timer node?

[arouinfar]

@samreid I don't think so. Are you suggesting we switch to a monospaced font like Courier? I don't think we'll be able to control the typeface for 100% of users, given that we're generally at the mercy of the browser's font options.

[samreid]

Courier is generally accepted as a "web safe" font, which means most or all browsers support it. On Mac/Chrome Courier Bold looks like this, and the numbers don't shift around at all:

If you like the idea of monospace, but not this particular font, we could experiment with non-bold, or "Courier New" (bold or unbold).

[arouinfar]

Thanks @samreid. Let's check with the team in today's design meeting.

[samreid]

We discussed monospace for timer node a little bit in phetsims/scenery-phet#402 (comment)

[arouinfar]

We decided to move forward with Lucida Console as the first choice of font, with Arial as a fallback.

[samreid]

Pushed proposed fix, @KatieWoe can you please verify on phettest? Close if all is well.

[KatieWoe]

The jumping behavior seems to be gone in master.