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

  • Jon DarkeJon Darke, 1 year ago

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

    7 points
  • ポール ウェッブポール ウェッブ, 1 year ago (edited 1 year 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.

    6 points
    • Matt Anderson, 1 year ago

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

      5 points
    • Ismail JadunIsmail Jadun, 1 year ago

      Looks like it will have slashed zeros.

      SF Mono slashed zero

      14 points
      • Peter Nowell, 1 year 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.

        4 points
        • Jesse HeadJesse Head, 1 year ago

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

          1 point
          • Peter Nowell, 1 year 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.

            9 points
        • Peiran TanPeiran Tan, 1 year 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.

          2 points
  • Kevin SuttleKevin Suttle, 1 year ago (edited 1 year 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

    3 points
    • Peter Nowell, 1 year 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

      4 points
  • David Maciejewski, 1 year 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

    1 point
  • Peiran TanPeiran Tan, 1 year 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.

    1 point
    • Alec LomasAlec Lomas, 1 year ago

      Input ftw

      3 points
    • Ismail JadunIsmail Jadun, 1 year ago

      I use Fira Code because the coding ligatures are so fun.

      4 points
      • Ethan BondEthan Bond, 1 year ago

        While I suppose it looks kind of interesting... how's the experience writing that? When you backspace a -> that looks like a single arrow, it still requires two backspaces, right? Is it not as weird as I'm imagining?

        0 points
    • Peter Nowell, 1 year ago

      I've been digging Operator, the new Hoefler & Co. code font. It's highly legible, although very stylistic. Couldn't be more different than SF. Available in CodePen now.

      Operator Code Font

      7 points
      • Peiran TanPeiran Tan, 1 year ago

        I don’t know about Operator though. It’s got so much character in it that I wonder it would be too overwhelming for large amount of text.

        4 points
      • Lucas MottaLucas Motta, 1 year ago

        Operator, the two-hundred-quid-ultra-hyped-monospace-comic-sans.

        8 points
    • James HarrisJames Harris, 1 year ago

      The thousand-and-one faces of Input are really impressive, but for comfort and ease of use I'm very happy with CamingoCode.

      0 points
  • austen myersausten myers, 1 year 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
  • Floyd WilliamsonFloyd Williamson, 1 year ago

    What color scheme is that? Anyone know?

    0 points
  • Michael Nino EvensenMichael Nino Evensen, 1 year ago

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

    0 points