Apple Reveals San Francisco Monospaced Font

1 year ago from , Designer at Peter Nowell Design

Apple's new WWDC 2016 website appears to be using a monospaced version of the San Francisco font. Of course, the font hasn't been publicly released, so they're hiding a little by using PNGs instead of webfonts, but those letterforms are unmistakably from the SF type family! Anyone else excited by that? Or about using SF Mono in a code editor?

https://developer.apple.com/wwdc/

28 comments

  • David Maciejewski, 12 months ago

    I coded a pure web version of the bad apple site. 167 KB image in comparison to 2.5 KB including font.

    Demo on CodePen

    0 points
  • austen myersausten myers, 12 months ago

    What are the perks of buying a ticket and attending the WWDC? Anyone ever been? Is the price justifiable of the experience?

    0 points
  • Kevin SuttleKevin Suttle, 12 months ago (edited 12 months ago )

    I wouldn't say they've "revealed" it, but like you, I am cautiously optimistic as well. SF has often been compared to Roboto, and this example is no different. If this is truly SF Mono, it looks a lot like Roboto Mono, but not 100%.

    roboto mono vs SF mono

    0 points
    • Peter Nowell, 12 months ago

      All mono-spaced fonts look relatively similar. For example, the lowercase i almost always needs serifs to take up enough space. When you analyze letters like "a", "G", "S", "k", "g"... they're unmistakably the same as SF Compact. Definitely different typographic DNA than Roboto.

      SF Mono Uses

      0 points
  • Michael Nino EvensenMichael Nino Evensen, 12 months ago

    Also some more here: https://developer.apple.com/

    0 points
  • Jon DarkeJon Darke, 12 months ago

    Explains why the responsive implementation of this page is so bad.

    0 points
  • Peiran TanPeiran Tan, 12 months ago

    I will definitely want to try out SF Mono in my code editor (now I’m using Input). Looks so much more done right than Roboto Mono.

    0 points
  • Floyd WilliamsonFloyd Williamson, 12 months ago

    What color scheme is that? Anyone know?

    0 points
  • ポール ウェッブポール ウェッブ, 12 months ago (edited 12 months ago )

    I was wondering what font they were using! I'll bet it's coming with whatever's announced at dub dub dee see.

    EDIT: I hope they have slashed zeroes. It pains me to see nice coding fonts with dotted zeroes.

    0 points
    • Matt Anderson, 12 months ago

      Looks like you're in luck. Further down the page they have 10:00 with the slashes

      0 points
    • Ismail JadunIsmail Jadun, 12 months ago

      Looks like it will have slashed zeros.

      SF Mono slashed zero

      0 points
      • Peter NowellPeter Nowell, 12 months ago

        From that screenshot it also looks like the monospaced version won't automatically raise the position of a colon between two numbers (used for time), like the current SF fonts do.

        0 points
        • Jesse HeadJesse Head, 12 months ago

          Is it common for monospaced fonts to do so? Honestly wondering.

          0 points
          • Peter NowellPeter Nowell, 12 months ago

            It isn't common for any font to do that. It's a nice feature of SF, but I can see the reason for disabling it in the monospaced version because it could be confusing to have colons of various heights in code. In current versions of SF the feature is on by default—there's nothing to turn on.

            0 points
        • Peiran TanPeiran Tan, 12 months ago

          Also @Jesse Head that is achieved through OpenType features. So it may be just that the person who was generating these pngs forgot to turn on that OT feature.

          0 points