10 ms·

System shock: A story of a 25-year-old font coming back with a vengeance

287 points by 0x10c0fe11ce 11y ago

mattbee 11y ago
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 11y ago
  Didn't read until the end did we?
  - jacquesm 11y ago
    Someone commenting on the punchline most certainly did read to the end.
    - tgb 11y ago
      The punchline commented on was significantly before the end.
seren 11y ago
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 ?
- barrkel 11y ago
  Presumably it was never tested in the gamut of IE versions either then, since they will most likely have been Windows VMs. This wouldn't be acceptable where I work, for one, though saying it sounds more critical than I mean.
- eterm 11y ago
  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.
- pcl 11y ago
  This tells us that they didn't manually test Windows, or have automated tests that compared bitmaps. We don't know whether or not they ran automated tests. I'm guessing very few automated tests take font rendering into account. Although for a site that is so focused on typography, you'd hope it'd be a focal point.
- krisdol 11y ago
  I'd assume that there is some automated testing happening to make sure things are working, and I bet there's some manual testing too -- but I also bet that the automated testing doesn't do visual comparisons (I've never seen a company do it), and I bet that standard issue computers were macs. You visit the page on your dev computer, your phone, check Jenkins -- everything looks good, publish. 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.
harryc2011 11y ago
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 11y ago
  Apparently for the people who test their shit only on Macs it's "hidden" all right.
UK-AL 11y ago
How can you not test on windows before release? It's still the most popular operating system?
- wodenokoto 11y ago
  I wouldn't be surprised if iOS or Abdroid is the most popular OS for medium visitors. But yeah, I'm surprised too they didn't test on Windows.
- igravious 11y ago
  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 11y ago
    > 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 11y ago
      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.
- sneak 11y ago
  In many subcultures, including the one I would guess the Medium people are in, Macs are by far the most popular and have been for over five years. It could be that they simply forgot that rich white people in California and New York are a minority on the web. It happens to rich white people in California and New York a lot.
davotoula 11y ago
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 11y ago
  So this is an Apple WebKit extension that can't sanely be un-vendor-prefixed?
  - arrrg 11y ago
    That’s exactly the reason why those vendor prefixes exist, right? You test the waters in a way that can’t (or is at least unlikely to) screw things up for everyone else. 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.
  - bcg1 11y ago
    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 11y ago
      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.
- fit2rule 11y ago
  Haha, agism, lols. I think you mean, "designers who don't test".
  - Lagged2Death 11y ago
jorams 11y ago
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 11y ago
  How does a system know wether a font is sans-serif or not?
  - rogeryu 11y ago
    That's a setting in the browser, not the system.
  - lottin 11y ago
    The 'sans-serif' font is an alias for the default sans-serif font, which is simply a system setting just like the default browser or the default whatever. Therefore the system doesn't need to know which fonts are sans-serif and which aren't.
  - drivers99 11y ago
    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.
  - TimJYoung 11y ago
    On Windows you can query for information about any font using the Windows API. This call allows you to enumerate fonts based upon their name, etc: https://msdn.microsoft.com/en-us/library/windows/desktop/dd162620(v=vs.85).aspx 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/dd145037(v=vs.85).aspx https://msdn.microsoft.com/en-us/library/windows/desktop/dd1... and the lfPitchAndFamily member will tell you what type of font it is.
trymas 11y ago
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 11y ago
  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 11y ago
    Yes, and just like the old days, when Windows admins tried to eradicate anything not Windows due to admin costs, it works both ways.
lmorris84 11y ago
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.
- bhrgunatha 11y ago
  I also found that very odd. 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!
  - LoSboccacc 11y ago
    > It's not like a library that needs to be compiled with the craze of css preprocessor I wouldn't bet on this
- ssmoot 11y ago
  I think the future-proofing was just a "why not?" bonus. The real goal was just to render with system fonts so the page felt as native as possible and they got to take advantage of all the person-hours put into the choice by the OS vendors. 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".
- nandhp 11y ago
  Because five years down the road, nobody wants to have to remember to stick that in when the vendor-specific version is removed. An example of someone who didn't do this: https://bugzilla.mozilla.org/show_bug.cgi?id=765645 https://bugzilla.mozilla.org/show_bug.cgi?id=765645
- WorldMaker 11y ago
  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.
pjc50 11y ago
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 11y ago
  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
- mixmastamyk 11y ago
  I read a few more pieces on his site, seems he grew up in the 80's using an Atari before moving to the PC. So, he's not as young as you might think.
deleted 11y ago
[deleted]
swah 11y ago
I love these articles assuming everyone has retina Macbooks. Which matches the price of a car in third world countries...
- iMark 11y ago
  Not just third world countries...
- niels_olson 11y ago
  My rMBP cost 10x as much as my first car, a 1984 Dodge Colt. Maybe Kansas is a 3rd world country...
- 54mf 11y ago
  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 11y ago
    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 11y ago
      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.
fit2rule 11y ago
The web sucks. Completely borked. Time for a rewrite.
- krapp 11y ago
  PEBDAC (Problem Exists Between Developer And Keyboard)
J_Darnley 11y ago
You mean you used a perfectly sharp font that renders correctly? What's so bad about that?
deleted 11y ago
[deleted]
shirro 11y ago
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.
pantalaimon 11y ago
Umm, what about Linux? The page displays fine on Ubuntu, but what font does it use?
- deleted 11y ago
  [deleted]
- yrro 11y ago
  Whatever is printed by `fc-match system`.
grhmc 11y ago
Man, those screenshots with the `system' font look great.
to3m 11y ago
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_Manager.png https://upload.wikimedia.org/wikipedia/en/6/6b/Program_Manag... - just look at it! Aren't those pixels glorious?
- SixSigma 11y ago
  Yeah, it's made me consider switching to "system" as my daily font
  - to3m 11y ago
    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 11y ago
      Nor in my Windows 7 :(
matt_morgan 11y ago
Sounds like they need to have a few people older than 26 on staff. I would have totally expected that to happen.
gotchange 11y ago
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?
jacques_chester 11y ago
> we included a more future-proof system as the first entry This is a classic example of why YAGNI is a slogan.
jameshart 11y ago
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-francisco/ http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-fr...
- leephillips 11y ago
  These shorthands don't seem to do anything on Chrome/Ubuntu.
  - jameshart 11y ago
    Ah. But to be fair, nor will font-family: -apple-system, San Francisco, droid sans, Segoe ui.
    - addandsubtract 11y ago
      He did add ".SFNSText-Regular"
deleted 11y ago
[deleted]
amyjess 11y ago
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/
torgoguys 11y ago
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 11y ago
  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 11y ago
    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 11y ago
      Ah I see.
  - arcticbull 11y ago
    Not to mention, I have no idea why folding test engineers into the general population would have you give up writing tests? How can you know your code is ... right? How could you not try the thing you wrote yourself? Or did you mean QA?
  - Chlorus 11y ago
    "That's why our IT dept has to vet every update now; some of them break your machine." Uh, what? That's what your IT dept should have been doing from day one. Are they also in the habit of just immediately applying kernel updates on production boxes?
- deleted 11y ago
joshu 11y ago
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.
luxpir 11y ago
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.
debacle 11y ago
How do I get this to render in CSS? I tried using "System" (Windows 7 Firefox) and it didn't appear to work.
- moron4hire 11y ago
  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.
CGamesPlay 11y ago
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"?
gherkin0 11y ago
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*gwDg2tz2R22D8Rqaxl4kCA@2x.png 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?
- wmil 11y ago
  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.
Sleaker 11y ago
Saw 'System shock' and was expecting the video-game tie in. Disappointed :( oh well.
kazinator 11y ago
> 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.)
- mixmastamyk 11y ago
  I only know of SGI workstations using vector fonts and icons at that time; I believe they had cheaper models, such as the Indy, which according to wikipedia came out in '93.
- wmil 11y ago
  Adobe Type Manager on the Mac created raster system fonts from postscript fonts. So you could sort of argue that case.
  - Stratoscope 11y ago
    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.
- thristian 11y ago
  Nobody in the Windows 3 era used vector fonts for UI (menus, dialogs, etc.) 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.
- Stratoscope 11y ago
  Windows 3 PCs running Adobe Type Manager could use all the Adobe vector fonts. I built the Windows port of ATM - patched into some GDI calls systemwide and rendered the Adobe fonts into a GDI bitmap on the fly as you used them. Fun stuff.
ashmud 11y ago
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.
intrasight 11y ago
Nothing wrong with a little bit of accidental nostalgia now and then.

287 points by 0x10c0fe11ce 11y ago

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 11y ago
Didn't read until the end did we?
- jacquesm 11y ago
  Someone commenting on the punchline most certainly did read to the end.
  - tgb 11y ago
    The punchline commented on was significantly before the end.

seren 11y ago

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 ?

barrkel 11y ago
Presumably it was never tested in the gamut of IE versions either then, since they will most likely have been Windows VMs. This wouldn't be acceptable where I work, for one, though saying it sounds more critical than I mean.
eterm 11y ago
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.
pcl 11y ago
This tells us that they didn't manually test Windows, or have automated tests that compared bitmaps. We don't know whether or not they ran automated tests. I'm guessing very few automated tests take font rendering into account. Although for a site that is so focused on typography, you'd hope it'd be a focal point.
krisdol 11y ago
I'd assume that there is some automated testing happening to make sure things are working, and I bet there's some manual testing too -- but I also bet that the automated testing doesn't do visual comparisons (I've never seen a company do it), and I bet that standard issue computers were macs. You visit the page on your dev computer, your phone, check Jenkins -- everything looks good, publish. 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.

harryc2011 11y ago

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 11y ago
Apparently for the people who test their shit only on Macs it's "hidden" all right.

UK-AL 11y ago

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

wodenokoto 11y ago
I wouldn't be surprised if iOS or Abdroid is the most popular OS for medium visitors. But yeah, I'm surprised too they didn't test on Windows.
igravious 11y ago
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 11y ago
  > 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 11y ago
    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.
sneak 11y ago
In many subcultures, including the one I would guess the Medium people are in, Macs are by far the most popular and have been for over five years. It could be that they simply forgot that rich white people in California and New York are a minority on the web. It happens to rich white people in California and New York a lot.

davotoula 11y ago

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 11y ago
So this is an Apple WebKit extension that can't sanely be un-vendor-prefixed?
- arrrg 11y ago
  That’s exactly the reason why those vendor prefixes exist, right? You test the waters in a way that can’t (or is at least unlikely to) screw things up for everyone else. 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.
- bcg1 11y ago
  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 11y ago
    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.
fit2rule 11y ago
Haha, agism, lols. I think you mean, "designers who don't test".
- Lagged2Death 11y ago

jorams 11y ago

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 11y ago
How does a system know wether a font is sans-serif or not?
- rogeryu 11y ago
  That's a setting in the browser, not the system.
- lottin 11y ago
  The 'sans-serif' font is an alias for the default sans-serif font, which is simply a system setting just like the default browser or the default whatever. Therefore the system doesn't need to know which fonts are sans-serif and which aren't.
- drivers99 11y ago
  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.
- TimJYoung 11y ago
  On Windows you can query for information about any font using the Windows API. This call allows you to enumerate fonts based upon their name, etc: https://msdn.microsoft.com/en-us/library/windows/desktop/dd162620(v=vs.85).aspx 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/dd145037(v=vs.85).aspx https://msdn.microsoft.com/en-us/library/windows/desktop/dd1... and the lfPitchAndFamily member will tell you what type of font it is.

trymas 11y ago

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 11y ago
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 11y ago
  Yes, and just like the old days, when Windows admins tried to eradicate anything not Windows due to admin costs, it works both ways.

lmorris84 11y ago

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.

bhrgunatha 11y ago
I also found that very odd. 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!
- LoSboccacc 11y ago
  > It's not like a library that needs to be compiled with the craze of css preprocessor I wouldn't bet on this
ssmoot 11y ago
I think the future-proofing was just a "why not?" bonus. The real goal was just to render with system fonts so the page felt as native as possible and they got to take advantage of all the person-hours put into the choice by the OS vendors. 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".
nandhp 11y ago
Because five years down the road, nobody wants to have to remember to stick that in when the vendor-specific version is removed. An example of someone who didn't do this: https://bugzilla.mozilla.org/show_bug.cgi?id=765645 https://bugzilla.mozilla.org/show_bug.cgi?id=765645
WorldMaker 11y ago
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.

pjc50 11y ago

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 11y ago
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
mixmastamyk 11y ago
I read a few more pieces on his site, seems he grew up in the 80's using an Atari before moving to the PC. So, he's not as young as you might think.

deleted 11y ago

[deleted]

swah 11y ago

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

iMark 11y ago
Not just third world countries...
niels_olson 11y ago
My rMBP cost 10x as much as my first car, a 1984 Dodge Colt. Maybe Kansas is a 3rd world country...
54mf 11y ago
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 11y ago
  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 11y ago
    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.

fit2rule 11y ago

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

krapp 11y ago
PEBDAC (Problem Exists Between Developer And Keyboard)

J_Darnley 11y ago

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

deleted 11y ago

[deleted]

shirro 11y ago

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.

pantalaimon 11y ago

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

deleted 11y ago
[deleted]
yrro 11y ago
Whatever is printed by `fc-match system`.

grhmc 11y ago

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

to3m 11y ago

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

SixSigma 11y ago
Yeah, it's made me consider switching to "system" as my daily font
- to3m 11y ago
  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 11y ago
    Nor in my Windows 7 :(

matt_morgan 11y ago

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

gotchange 11y ago

jacques_chester 11y ago

> we included a more future-proof system as the first entry This is a classic example of why YAGNI is a slogan.

jameshart 11y ago

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

leephillips 11y ago
These shorthands don't seem to do anything on Chrome/Ubuntu.
- jameshart 11y ago
  Ah. But to be fair, nor will font-family: -apple-system, San Francisco, droid sans, Segoe ui.
  - addandsubtract 11y ago
    He did add ".SFNSText-Regular"

deleted 11y ago

[deleted]

amyjess 11y ago

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/

torgoguys 11y ago

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 11y ago
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 11y ago
  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 11y ago
    Ah I see.
- arcticbull 11y ago
  Not to mention, I have no idea why folding test engineers into the general population would have you give up writing tests? How can you know your code is ... right? How could you not try the thing you wrote yourself? Or did you mean QA?
- Chlorus 11y ago
  "That's why our IT dept has to vet every update now; some of them break your machine." Uh, what? That's what your IT dept should have been doing from day one. Are they also in the habit of just immediately applying kernel updates on production boxes?
deleted 11y ago

joshu 11y ago

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.

luxpir 11y ago

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.

debacle 11y ago

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

moron4hire 11y ago
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.

CGamesPlay 11y ago

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

gherkin0 11y ago

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*gwDg2tz2R22D8Rqaxl4kCA@2x.png 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?

wmil 11y ago
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.

Sleaker 11y ago

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

kazinator 11y ago

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

mixmastamyk 11y ago
I only know of SGI workstations using vector fonts and icons at that time; I believe they had cheaper models, such as the Indy, which according to wikipedia came out in '93.
wmil 11y ago
Adobe Type Manager on the Mac created raster system fonts from postscript fonts. So you could sort of argue that case.
- Stratoscope 11y ago
  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.
thristian 11y ago
Nobody in the Windows 3 era used vector fonts for UI (menus, dialogs, etc.) 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.
Stratoscope 11y ago
Windows 3 PCs running Adobe Type Manager could use all the Adobe vector fonts. I built the Windows port of ATM - patched into some GDI calls systemwide and rendered the Adobe fonts into a GDI bitmap on the fly as you used them. Fun stuff.

ashmud 11y ago

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.

intrasight 11y ago

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