Fixing Garbled Fonts on Apple Support Pages
We refer to a lot of Apple support pages (such as this one about iCloud pricing), and recently some of us started seeing them appear garbled, with overlapping characters in the title, and rendered weirdly such that we sometimes had to scroll right even to see the text at all. This didn’t happen to everyone, and it could occur (in slightly different ways) in all three major Web browsers: Safari, Google Chrome, and Firefox. Even more confusing, some of us had the problem in Safari but not in Chrome, whereas others saw it in Chrome but not Safari. Maddening!
[…]
The tip Michael found pointed out that the problem could be eliminated in Safari with a particular setting. Just open Safari > Preferences > Advanced and deselect “Never use font sizes smaller than.” It’s quite striking — just toggling that checkbox while that page is open reformats it completely.
jpd:
The root cause is the CSS - two odd things:
html { font-size: 1px; }h1 { letter-spacing: -1rem; }the “rem” measurement is CSS3, so fairly new, and setting “letter-spacing” to a negative value is strange. But it's the combination of the 1px default with the negative line-spacing that causes the problem.
Thanks to Brent Simmons for figuring this out last week.
