
System shock: A story of a 25-year-old font coming back with a vengeance - 0x10c0fe11ce
https://medium.com/@mwichary/system-shock-6b1dc6d6596f#.v0lk6vj4x
======
torgoguys
Windows still has well over 80% of the desktop market and IT WASN'T TESTED?
How can that be? It's not like this is an obscure Windows issue. View any page
on your site and it would have been glaringly obvious...

Thanks for the fun write-up though. Overboard rage aside, it's a good reminder
that we all should double-check our QC processes.

~~~
JoeAltmaier
Microsoft recently folded their test engineers into the general population.
I.e. everybody is supposed to test their own code. Which means, testing
dropped to negligible levels. That's why our IT dept has to vet every update
now; some of them break your machine.

~~~
zaphar
It's not on Microsoft to test Mediums web font rendering changes for them.
Medium should have tested on a windows desktop with a multiple browsers. If
they had they would have caught this before shipping to consumers.

~~~
JoeAltmaier
Ah I see.

------
seren
The main takeaway for me is the lack of testing before releasing a new major
version. I know that the market is pretty fragmented between desktop and
mobile, but you should expect that some people will access from a Windows
machine. Maybe I misunderstood but it was launched without being rendered once
on Windows ?

~~~
eterm
I'm cynical enough to believe that this was caught in testing and someone
thought it would make an interesting blog post so wrote it up as if it went
live.

------
lmorris84
Can someone who does more UI work than me explain why you would want to future
proof css like this in the first place?

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.

~~~
WorldMaker
Today's browser development preference/"wisdom" is to always include the
unprefixed CSS even if you include a vendor prefixed version. The reasoning
for this is the realization that maybe vendor prefixes were a bad idea all
along. For better or worse, there are a bunch of -webkit prefixed CSS terms
that will likely live on the web "forever". So the decision has been (by Edge
and Blink [Chrome, Opera], at least) that instead of vendor prefixes browsers
should use experimental flags (that are off by default) and unprefixed CSS.
(This way devs can still test and evaluate new features, but are much less
likely to litter the web in the wild with such experimental features as they'd
have to explain to users how to turn the flags on.)

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.

~~~
Eric_WVGG
I don’t understand this perspective at all. If transitions and transforms had
been introduced this way, it would have taken many years longer for them to
bleed into commonplace use. No normal user is going to jump through the hoops
necessary to turn experimental flags on.

The blink tag disappeared, table-driven design disappeared, unnecessary vendor
prefixes will gradually disappear too. That's a small price to pay for
progress.

~~~
WorldMaker
> No normal user is going to jump through the hoops necessary to turn
> experimental flags on.

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.

------
jameshart
No mention of the fact that CSS actually has a mechanism to use OS system
fonts? 'caption', 'menu', 'message-box' are all, for example, available system
fonts.

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](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...](http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/)

~~~
leephillips
These shorthands don't seem to do anything on Chrome/Ubuntu.

~~~
jameshart
Ah. But to be fair, nor will font-family: -apple-system, San Francisco, droid
sans, Segoe ui.

~~~
addandsubtract
He did add ".SFNSText-Regular"

------
harryc2011

      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.
    

I mean it's hardly hidden in the depths of Windows - it's right there in every
single font selection menu.

~~~
mariusmg
Apparently for the people who test their shit only on Macs it's "hidden" all
right.

------
to3m
I always quite liked the Windows 3.1 fonts. They were nicely put together -
very crisp, and easy to read. Good use of the grid.

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...](https://upload.wikimedia.org/wikipedia/en/6/6b/Program_Manager.png)
\- just look at it! Aren't those pixels glorious?

~~~
SixSigma
Yeah, it's made me consider switching to "system" as my daily font

~~~
to3m
Well, I hope you're not using Windows 8.1, because you don't get the option
any more. Luckily, the default - 8pt Segoe UI on mine, I think? - looks decent
even with ClearType off and antialiasing disabled.

~~~
SixSigma
Nor in my Windows 7 :(

------
trymas
Does it mean that none of the devs/designers in medium.com use Windows?

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.

~~~
dublinben
Are you really surprised that none of the developers or designers at a hip
startup in San Francisco are running Windows? I'm sure even the receptionist
is on a Mac.

~~~
mixmastamyk
Yes, and just like the old days, when Windows admins tried to eradicate
anything not Windows due to admin costs, it works both ways.

------
jorams
I'm a bit confused about the use of "just give me a system font", then several
named fonts and then "sans-serif". Isn't that exactly what "sans-serif" does,
giving you a sans-serif system font?

~~~
dot
How does a system know wether a font is sans-serif or not?

~~~
drivers99
It's a browser setting. For example, I'm using Firefox 41 on Windows 7 and in
Options->Content->Fonts&Colors/Advanced... it has "Times New Roman", "Arial",
and "Courier New" as the defaults for Serif, Sans-serif, and Monospace
respectively.

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.

------
CGamesPlay
So, there's obviously a miss on testing this here [1], but I wanted to make
another point about the wisdom of embedding code that you cannot test,
thinking that it would have no effect, with the expectation that at some
arbitrary date in the future (which you don't control) it will change the
visual appearance of your landing page to something else... that you haven't
tested. When iOS 9 came out, it wasn't like people were just resubmitting
their apps without ever running them once.

[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"?

------
UK-AL
How can you not test on windows before release? It's still the most popular
operating system?

~~~
igravious
Do not take this as snark. Not meant as such. Just observation, begrudging
admiration is as negative as it gets :)

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.

~~~
sagichmal
> 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.

I don't understand. Why should this faze anyone? The website still worked, no
harm was done. It barely registers as a bug!

~~~
davegardner
In this case it certainly wasn't a serious bug. However it suggests that they
did no testing at all on Windows, so in the future they may not be quite as
lucky.

------
mattbee
Heh, I thought the punchline was going to be people seeing _this_ San
Francisco font
[https://en.wikipedia.org/wiki/San_Francisco_(1984_typeface)](https://en.wikipedia.org/wiki/San_Francisco_\(1984_typeface\))

~~~
revlucio
Didn't read until the end did we?

~~~
jacquesm
Someone commenting on the punchline most certainly did read to the end.

~~~
tgb
The punchline commented on was significantly before the end.

------
swah
I love these articles assuming everyone has retina Macbooks. Which matches the
price of a car in third world countries...

~~~
54mf
You're being disingenuous. For starters, from the second paragraph: "In
between Roboto on Android, San Francisco on iPhones and Macs, and Segoe UI on
Windows..." Clearly, they're targeting all major platforms. Not to mention,
retina MacBooks start at $1299—which is on par with other HiDPI PC laptops,
mind you—and I can buy a car on Craigslist here in the first world for like
$500. (And I have.)

If you don't like Apple, that's fine, but don't disguise your displeasure as a
stand against class warfare.

~~~
elros
The cheapest Macbook you can find with a retina display costs $3200 in Brazil.
That's more than double the price you quote, and we're not even accounting for
purchase-power differences in the currency itself.

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.

~~~
54mf
What does this have to do with the article?

[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.

~~~
elros
I'm not accusing the author of anything, I'm accusing you of thinking retina
Macbooks are somehow cheap and accessible.

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. :-)

~~~
JustSomeNobody
When did he say they were cheap and accessible? He actually said, they were on
par with similarly equipped PCs. Not at all the same thing.

~~~
elros
He was replying to a post that matches the price of a computer to a car, with
the implication that that's expensive. He replied saying that a rMBP "starts
at $1299", and he was disagreeing with the post he was replying. Thus his
implication was that this is a cheap price.

~~~
54mf
I'm willing to retract that entire line of thinking, because the author never
ever actually said anything about designing for Retina hardware, so why are we
talking about it in the first place? Their explicit approach was to make
Medium's typography work _on as many platforms and devices as possible_ , and
this OS X (not _Retina_ , just OS X) bug was an edge case that they missed.

~~~
elros
Oh, I fully agree with you on this one!

------
davotoula
All sounded great until

> 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!

~~~
rockdoe
So this is an Apple WebKit extension that can't sanely be un-vendor-prefixed?

~~~
bcg1
Browsers could just implement it like:

    
    
        font-family: system;   /* does what the author expects */
        font-family: "System"; /* does what they expect on MS backward-compatibility fantasy island */

~~~
praseodym
Except that all browsers that don't yet understand the new meaning of 'system'
will then fall back to the old behaviour, that is, the Windows font.

------
gherkin0
Semi-related question:

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...](https://d262ilb51hltx0.cloudfront.net/max/800/1*gwDg2tz2R22D8Rqaxl4kCA@2x.png)

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?

~~~
wmil
You need to spend a lot of time tweaking font hinting to make a font that
looks good at low res without smoothing. Designers don't bother anymore.

------
pjc50
I suspect the author (and possibly everyone in their office) is younger than
this font. What was that discussion we were having the other day about
ahistoricity?
[https://news.ycombinator.com/item?id=10412284](https://news.ycombinator.com/item?id=10412284)

~~~
kps
No idea how old he is, but it would be a mistake to accuse Marcin Wichary of
ahistoricity.

[https://www.flickr.com/photos/mwichary/tags/computerhistory/](https://www.flickr.com/photos/mwichary/tags/computerhistory/)

[https://www.google.com/doodles/30th-anniversary-of-pac-
man](https://www.google.com/doodles/30th-anniversary-of-pac-man)

------
amyjess
By Marcin Wichary. That name brings back memories... I recognize his name from
a site he ran called the GUIdebook [0], which documented a number of GUIs in
screenshot form going back decades. Unfortunately, he stopped updating it in
2006, but the site is still up for anyone who wants to check it out.

[0] [http://www.guidebookgallery.org/](http://www.guidebookgallery.org/)

------
grhmc
Man, those screenshots with the `system' font look great.

------
luxpir
This is reassuring. Designers choosing system fonts. As a non-designer, I
opted for site-wide Georgia usage recently and was really happy with the
result. I was doing it initially partly for performance reasons, and to stop
external calls on a HTTPS-only site, in the end it felt like it was more
fitting and more characterful than the (pretty, but generic) Source Sans Pro.

------
matt_morgan
Sounds like they need to have a few people older than 26 on staff. I would
have totally expected that to happen.

------
ashmud
As of Windows 7, Windows still likes to fall back to System font if it is
running low on UI resources. I see this on a regular basis in the "Find in
Files" results in Visual Studio.

Further down the rabbit hole:

On Win2k, if you used non-default DPI settings, programs using System font
looked particularly atrocious.

------
jacques_chester
> _we included a more future-proof system as the first entry_

This is a classic example of why YAGNI is a slogan.

------
shirro
Sometimes it doesn't pay to overthink things and do more than is necessary. It
doesn't seem likely that without the vendor extension "system" is going to
become an official or defacto cross browser standard any time soon. Without
that font name being reserved by either a standard or common usage a collision
would seem inevitable.

------
kazinator
> _It was not even a vector font… most personal computers couldn’t use vector
> fonts yet._

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.)

~~~
wmil
Adobe Type Manager on the Mac created raster system fonts from postscript
fonts. So you could sort of argue that case.

~~~
Stratoscope
I'm not 100% sure how ATM for the Mac worked, but I seem to recall it was the
same as ATM for Windows (which I worked on). It didn't actually create raster
fonts, but instead rasterized on the fly the glyphs that each app was actually
using.

------
Sleaker
Saw 'System shock' and was expecting the video-game tie in. Disappointed :( oh
well.

------
gotchange
I don't know if this could be of help to them in their specific case but have
they tried something like this

    
    
      font: caption | icon | menu | message-box | small-caption | status-bar
    

to reach the desired result?

------
joshu
I had the pleasure of chatting occasionally with Marcin when I was at Google.
I love that I hear more of the exploits now than I did then.

------
debacle
How do I get this to render in CSS? I tried using "System" (Windows 7 Firefox)
and it didn't appear to work.

~~~
moron4hire
Wow, that's a good question. I see that I have the font here on a clean-
install of Windows 8.1, but if I use the element inspector in Chrome to try to
change the font on some of the text here on the screen, it seems to render as
Times New Roman. And I have to eliminate the fallbacks. It will fall-through
System, but it won't pick up the body font.

------
pantalaimon
Umm, what about Linux? The page displays fine on Ubuntu, but what font does it
use?

~~~
yrro
Whatever is printed by `fc-match system`.

------
intrasight
Nothing wrong with a little bit of accidental nostalgia now and then.

------
J_Darnley
You mean you used a perfectly sharp font that renders correctly? What's so bad
about that?

------
fit2rule
The web sucks. Completely borked. Time for a rewrite.

~~~
krapp
PEBDAC

(Problem Exists Between Developer And Keyboard)

