System shock: A story of a 25-year-old font coming back with a vengeance
medium.com
medium.com
Thanks for the fun write-up though. Overboard rage aside, it's a good reminder that we all should double-check our QC processes.
Back in the days when "system" was a reasonable font choice, fixing a bug after shipping would take weeks, months, or years, and could cost $10^4 to $10^8. You might have had to pull actual boxes off actual shelves somewhere!
In this story as it actually happened, the bug was fixed and the fix was deployed in a single day, at the cost of a few laughs.
I'm sure they tested on Windows when they added Segoe to the list, so the problem is that they didn't test again after fiddling with other fonts that they (incorrectly) thought would be irrelevant to Windows. And remember, nothing was broken in a way that a machine would notice, so automated acceptance tests wouldn't have caught this regression.
I think it's worth considering the possibility that this is a story of Medium acting more or less in their economic interest (maybe even in the economic interest of their users?) rather than a story of a bunch of hipsters with a hilariously broken QC policy.
I'd like to nit here that visual regression test harnesses for web application development do exist. [1] [2] [3] Using something like Sauce Labs you could conceptually have these tests run on Windows machines in the cloud.
However, having implemented visual regression testing in the past in various projects, I can personally vouch that it's a huge waste of time. Your tools will break all the time, your tests will break all the time, and you'll generally have a bad time.
[1] https://github.com/chenglou/node-huxley [2] https://github.com/Huddle/PhantomCSS [3] https://github.com/bradgignac/janus
In analogy with scientific modeling, there's a risk of over-fitting your tests against the exact circumstances of your product as it exists today. You want tests to capture the important aspects of your product, while having a little bit of flexibility for the "noise" related to differences between platforms, and changes to mostly but not entirely unrelated parts of the product.
The tool I used, PhantomCSS, did allow for a threshold underneath which pixel differences would not get picked up, but I opted instead to run my tests locally in vagrant so that the environment would be closer to identical to CI.
So yes, platform noise is just one of the myriad of challenges you have to solve when implementing such tooling.
Why would you be surprised by 80% of Medium readers using Windows? Even 20% non-Windows would represent a massive anti-Windows bias.
Not that this justifies skipping testing on Windows, but it's not impossible to see how it's no longer a top priority, since all of the growth is sitting on the mobile side.
This wouldn't be acceptable where I work, for one, though saying it sounds more critical than I mean.
Oh, but then production notices how not-good it is.
It's really easy to miss these kinds of things, and the solution always seems obvious in hind-sight, otherwise clients would never find bugs.
Even forgetting the undesired outcome and lack of testing, it's css...if browsers implement this feature, release it when the time comes. Not sure what's to be gained from adding something like this now. Feels like over thinking the issue a little.
After all it's just a text file that can be edited and re-deployed rapidly. It's not like a library that needs to be compiled or linked or forcing re-compilation of other dependent software.
Their fix to the problem after all was just to edit the self same stylesheet and re-deploy!
with the craze of css preprocessor I wouldn't bet on this
But the fonts do change on occasion, so it makes sense to me, for forwards and backwards compatibility, you'd ideally just want to be able to say "render whatever font the rest of the system is using".
An example of someone who didn't do this: https://bugzilla.mozilla.org/show_bug.cgi?id=765645
Of course today's wisdom may also be tomorrow's folly and the winds could change again, but I think a lot of us would prefer to forget that vendor prefixes ever happened and not worry about prefixing/autoprefixing/prefix-fixing ever again, so I for one appreciate today's wisdom. Even if we do find weird edge cases in Apple's choices with regards to vendor prefixed CSS.
The blink tag disappeared, table-driven design disappeared, unnecessary vendor prefixes will gradually disappear too. That's a small price to pay for progress.
That's the feature, it's not a bug.
It's a technical debt issue for the web. Some of those early -webkit prefixed CSS features changed between when the prefixed version was introduced to Webkit and the final spec. Because enough of the old version exists in the wild on the web, the nonstandard versions effectively have to be supported forever or someone's aunt's favorite website mysteriously breaks.
Ultimately the change here is to trust in the standardization process. We, as the web development community, can solve the root cause problem: standards take too long from proposal to "recommendation". We don't need to use the hack of using experimental/prototypal/unfinished features for years, if we can speed up the process for features the web wants.
The benefit of a little bit of patience (or the usage of smart polyfills) with respect to the latest and greatest features is hope for a better web where we can all spend less time worrying about cross-browser quirks like which vendor prefixes are supported/not-supported and whether or not they use some ancient nonstandard form.
This is actually a bit of a quirk in the syntax of the CSS 'font' property - http://www.w3.org/TR/CSS21/fonts.html#font-shorthand - in that it's not strictly only a shorthand for size/style/family properties, because you can use 'message-box' as a complete font specification, but you can't use '20pt bold message-box'. On the other hand, you can stack 'font: message-box; font-weight: bold; font-size:20px;', so thats not actually a limitation.
Not sure what the browser support situation is, as 'caniuse' and 'quirksmode' haven't dug into the details of support for the CSS 'font' property, but it looks to be doing what you'd expect in chrome on OS X. YMMV.
Looks like this isn't the first time someone's missed this? http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-fr...
And, somewhere within the depths of modern versions of Windows, there lay, dormant, an old-fashioned System font from 1990 — alongside some vintage software routines necessary to render it.
None of the screen grabs show them at their best, though, because they've been scaled unevenly. Zoom in on the Program Manager shot - if you can't spot them as-is - and you'll see the telltale signs. Tastes differ, but it makes my eyes slightly uncomfortable just looking at it.
Wikipedia has a much better 1:1 shot: https://upload.wikimedia.org/wikipedia/en/6/6b/Program_Manag... - just look at it! Aren't those pixels glorious?
IMHO it's just interesting coincidence, nothing more. Even though I am not Windows user and I am not for eternal software backwards compatibility (this topic can evolve into a huge rant). Though somehow medium.com staff tries to prove, that having old font is a bad thing and shouldn't be installed today. They released a major update (even calling it version 2.0) and have not it tested it with users (remember that the goal was to use native fonts, so they must have tested it with Android, iOS, OS X, Windows, Windows Phone, Chrome OS, etc.)?
Article was very interesting, showing how can long history of computing produce interesting outcomes. But I felt that author is very annoyed by this coincidence, and somehow this is Microsoft's fault and not medium's and IMHO author is not right.
In Chrome, it's under Settings->+Show advanced settings->Web content/Customize fonts... (Times New Roman, Arial, Consolas on mine.)
In IE 11 under Tools (gear icon)->General->Appearance/Fonts it has "Webpage font" and "Plain text font" (Times New Roman and Courier New on mine). It's weird that they don't let you pick the default sans-serif font.
https://msdn.microsoft.com/en-us/library/windows/desktop/dd1...
and the callback function used with it will get you this structure:
https://msdn.microsoft.com/en-us/library/windows/desktop/dd1...
and the lfPitchAndFamily member will tell you what type of font it is.
[1] I'm willing to buy that Windows represents a minority of browser share to Medium, although it still seems doubtful that it's such a small share that making visual changes to your global CSS doesn't merit testing on that OS. Was this just a line in some larger diff? "By the way, I changed all the fonts; works on localhost"?
My guess is that trendy internet start-ups have a Mac culture. I'm not sure, I'm not in trendy internet start-up land. The same is true in academia though, which is my land. Go to an academic conference and we're talking predominantly Mac.
I love the way they spin the "did not test on Windows, the most popular desktop OS" fail to "isn't System so cool and retor, isn't it awesome?". That takes a fair amount of chutzpah and a serious inability for stuff like this to faze you. Which is probably a great character quality for a dev team whose software touches millions.
I don't understand. Why should this faze anyone? The website still worked, no harm was done. It barely registers as a bug!
If you don't like Apple, that's fine, but don't disguise your displeasure as a stand against class warfare.
To put it in perspective, the minimum wage is $300, and I don't know anyone making more than $1500 over there – including developers.
You could literally make a living off of buying Macbooks in the US and selling them in Brazil for double the price; it'd still be much cheaper than in the stores.
[Edit] I'll be less terse. Yes, I know computers are more expensive in some countries. Are you accusing the author of being, in some way, discriminatory towards people with lower incomes? Did he say they were only designing for Retina displays? (Or only for Apple hardware?) This response feels like an even larger straw man than the parent comment I responded to, and even less about the article itself.
I also dont't think the comment you were replying to was expressing a dislike of Apple.
Basically, I think you're not even wrong. :-)
They also seem to have started doing USD<->Local Currency pricing 'adjustment' far more regularly than I would have expected. I have watched the base price for an App in Australia fluctuate between $0.99 and $1.29 over the last two years. They are always slower to change the price 'down' than 'up'. So I'm not surprised at the fact they would just 'pass on the full cost' to an entire country. I'm pretty sure even with the import tax they are probably adding a 'nuisance surcharge' to the price of the laptops, because of the 'costs of tax compliance' and other typical corporate excuses.
They're certainly talking about their own experience, obviously on a retina display, but they don't include a picture. Which in a very image-heavy article implies that anyone should be able to imagine what that looks like. I can't, because I've never used a rMBP.
> And, since –apple– is a typical vendor prefix for an experimental feature, we included a more future-proof system as the first entry
Adding system as font should have rang a few alarm bells with any designers older than 30!
The functionality provided here is obviously useful and should probably become part of CSS – but through incidents like this we just found out that using only system is probably a bad idea and things should be changed.
font-family: system; /* does what the author expects */
font-family: "System"; /* does what they expect on MS backward-compatibility fantasy island */You've got this completely backwards. The article itself has a strong agist tone ("whoever could have predicted the emergence of this font from the mists of time...") but you may have a hard time perceiving it. That's because, to the extent there is an agist problem here, the problem is you.
The author posted this image of him recreating the old System font as an OpenType vector font:
https://d262ilb51hltx0.cloudfront.net/max/800/1*gwDg2tz2R22D...
The offset pixel on that look horrible, but they also look like a lot of the web fonts I see day-to-day when I have font smoothing disabled. Are modern fonts actually being designed like that for some reason?
https://www.flickr.com/photos/mwichary/tags/computerhistory/
Further down the rabbit hole:
On Win2k, if you used non-default DPI settings, programs using System font looked particularly atrocious.
This is a classic example of why YAGNI is a slogan.
What are the exceptions? What "personal computers" from the Windows 3 era had a UI with vector fonts?
(I'm assuming that institutional workstations costing upwards of $15K don't count as personal computers.)
Windows 3.1 and (I think) System 7 added support for TrueType, but only for documents, not for UI. Windows 3.0 and System 6 (which would have still been fairly common for a while after 3.1 and 7 were introduced) were all-raster, all-the-time.
Not to mention alternative desktops like GEM and the Amiga Workbench, although I guess those don't really count as "most" personal computers.
font: caption | icon | menu | message-box | small-caption | status-bar
(Problem Exists Between Developer And Keyboard)