Two mysterious web font bugs that no one seems to be talking about
Text rendering is broken on a small percentage of websites. They’re often major websites where you’d never expect something so basic to be broken, like Apple.com, imgix.com, and even our gracious host Medium. There are at least two bugs out there, and to my knowledge they’ve not been clearly identified, documented, or even given names. I’m hoping that some of you might have figured out the causes.
They might only happen on Windows, though they don’t seem to be Windows bugs. I think these bugs have escaped attention because of a bizarre lack of testing on Windows in certain unprofessional corners of the web development community.
Here are the bugs:
- Pockmarked text: Text is literally broken, like on Apple’s page below. missing small pieces. Apple’s website was broken this way on Windows, in all browsers, for at least two years.
- Smudged text: Text is smudged, with glyph line thickness varying randomly between super-thin and overly bold.
Look at the top of the S in Super and the top of the C in Computer. You can see where the lines break, almost disappear, like someone dabbed them with white paint. And look at the jaggedness at the tops of the Ps in iPad and Pro. (FYI, that typeface is Myriad Set Pro.)
Apple’s website was broken on Windows like this for at least two years. I saw it on multiple Windows 8.1 and 10 machines in all major browsers: IE11, Chrome, Firefox, Edge, and I think even Opera (which is based on Chromium).
At some point in late 2016 or early 2017, the problem disappeared in Microsoft Edge — I have no idea what changed in Edge that would fix this problem, but Apple’s site remained broken in Chrome, Firefox and other browsers. Apple didn’t fix the bug until I asked on Quora if anyone knew why Apple’s text rendering was broken.
I’ve very rarely seen this problem on the web. Wired.com’s text was broken in the exact same way a few years ago — that’s the only other case I remember. They’ve since fixed it, but then made things worse by choosing an almost unreadable typeface for their titles:
This typeface is more suited to a slave-owning cigar shop than a technology/leftist commentary website.
Now on to Bug 2…
Here’s imgix:
As you can see, the text is extremely smudged. The typeface is Adelle Sans, and it’s not supposed to look that way at all. This was on imgix’s dev docs page. I wrote up a bug report for them in July 2016, with lots of detail and screenshots, but they didn’t fix it. They said they couldn’t reproduce it, which was odd because I could reproduce it on any Windows machine in any browser. Then I asked about it on Quora six months later — I didn’t have time to isolate the bug, but I was very curious if someone else had.
Until a few minutes ago, I thought imgix fixed it after I asked about it on Quora, just as Apple had. Now I realize that they might have fixed it on the docs page, but now their homepage nav submenus are vividly, painfully broken:
You can see a bit of the smudge in their main menu titles, but it really pops out in the fly-out menu. The image above is smaller than life-size on most displays, so if you click or tap it should expand and you’ll get a fuller sense of the bug. There’s no reason why text on the web should ever look like this — that is, there’s no question that this is a bug.
When imgix said they couldn’t repro this, I thought about the amazing post written by Medium web designer Marcin Wichary after Medium had experienced a really bad font bug. He noted that since the bug was only happening on Windows and Linux, he had to fire up some VMs to reproduce it (note that this was after the change/bug had been pushed to production).
I almost fell out of my chair. Medium didn’t test on Windows? They didn’t have any actual Windows machines in the office, not even for QA? They depended entirely on VMs, with the predictable effort friction that will lead to less testing, or even no testing. It also leads to a lack of validity for UI/GPU-related behaviors and can result in a lot of missed bugs. I couldn’t believe that a major publisher like Medium could be so reckless, and it made me wonder if that’s what was going on at imgix — might they not have any Windows machines either?
Another example of Bug 2:
That’s from an article in Chronicle Vitae. The font is Adobe’s Source Sans Pro, and it definitely isn’t supposed to look like that. View the font at Typekit, on Windows, in any browser, to see how it’s supposed to look. And realistically, no typeface or font is supposed to look like that. Smudge is a bug.
Marcin Wichary’s post has since been edited to remove the part about Medium not testing on Windows and Linux, the use of VMs, etc. I guess it got a strong reaction, and Medium CTO Dan Pupius tried to backpedal a bit in a follow-up post where he seemed to suggest that 25% of your users is not an enormous number. He said “fewer than 25%” (so, 24%?) of Medium visitors were on Windows, as though this were somehow exculpatory…
Windows is an important platform. The desktop is a very important platform, and will be for the foreseeable future — it’s where we work. All publishers should be testing on Windows, Mac, and Linux unless 99 percent or so of their readers are coming from only one platform.
There’s an Apple bias in certain corners of web development that needs to be discouraged when it comes to doing our jobs, testing, etc. There are many reasonable reasons for developers and users to choose Windows 10 over a Mac (or a Linux). (For example, one reason would be that Apple recently stripped all the most useful ports from its laptops and, strangely, dramatically increased their price at the same time — few people are willing to spend $2800 for a laptop that lacks even a single standard USB port, and which sports a mere 16 GB of obsolete smartphone RAM (LPDDR3). Outside of the US, or even just certain US cities, interest in Macs drops dramatically, so if you’re only testing on Macs, you’re marginalizing a large majority of humanity.)
I’ve been extremely critical of Microsoft at times, but as a QA Manager, there’s no way I’d leave Windows to VMs, and there’s no way I’d be okay with text rendering as broken as we see above. Good text rendering is easy to achieve on Windows, and the vast majority of websites and apps achieve it (if you’re building a native or UWP app, I highly recommend Microsoft’s DirectWrite API).
I haven’t had much time to isolate these bugs, so I’m hoping some of you know what’s going on. I assume it’s going to be something to do with the font files, but not something obvious like ttf vs otf, or woff vs woff2. It might have to do with the glyf table choice in otf-sourced fonts. Any ideas?
Joe Duarte is a data scientist, social scientist, and software QA consultant. You can reach him at gravity@protonmail.com.
