Why would html text sometimes appear garbled when viewing on Chrome or Safari on Windows?

Question

Occasionally users report that the text on https://squareup.com looks like gibberish (or garbled) to them… however we’ve been unable to reproduce this.

Users report

Answer 1

Easily recreated by using an older version of Windows as well as an older branch of Chrome. Seems like Chrome 4-8 have this issue. For testing purposes, boot into XP with Chrome 4. The problem lies in text-rendering: optimizelegibility. This is a reported bug in older Chrome versions when using optimizelegibility with @font-face when using woff fonts. If you can reproduce the issue, try taking out vertical-align: baseline and see if the rendering is still garbled.