BackstopJS font rendering consistency

[reneroth]

The font rendering seems to be highly dependent on the user's personal settings - see the difference in font rendering with LCD smoothing (left) and without:

Changing the settings on my computer resolved the problem for the most part, but there are still minor differences:

Darren and I made sure to use both the same versions of all dependencies, as well as the same font files (Helvetica).

[planktonic]

To investigate: any chance CSS -webkit-font-smoothing overrides the system setting?

[reneroth]

see this:

garris/BackstopJS#361 (comment)

[planktonic]

I didn't have any luck setting the webfont smoothing in an onBefore event as suggested in that thread, but setting it in css worked (on html, in base/_typography.scss) i.e. re-built the reference images with -webkit-font-smoothing set to none, then changing the system option on macOS for font-smoothing had no effect on tests — all tests passed when run with npm run test.

TODO: check if the same is true for the default value of subpixel-antialiased, then no changes to reference images are necessary.

We don’t want this to be part of the css output of course, so maybe add this one-liner to styleguide-extras.scss and rebuild all the test images. Could be worth doing this as part of #256 as that changed a lot of reference images due to changed typography — it would minimise the repo size due to image rewriting.

We should also check on branch (before merging to master) that it works as expected between macs, and ideally between platforms — as mentioned in that other thread, font-rendering on e.g. linux is very different, ideally this project is as cross-platform as possible.

[reneroth]

if minimizing repo size is a concern, let's run pngcrush or something similar over the reference file.
On a quick test, it loslessly crushed their size from 4.7MB to 3.2MB

[planktonic]

I meant more the fact that git stores the entire history of a file — changing large files often is expensive (also means crushing the reference images now will make the repo larger!).

[planktonic]

fixed by #256