Apple Reveals San Francisco Monospaced Font

over 5 years 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?



  • Jon DarkeJon Darke, 5 years ago

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

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

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

      5 points
    • Ismail JadunIsmail Jadun, 5 years ago

      Looks like it will have slashed zeros.

      SF Mono slashed zero

      14 points
      • Peter NowellPeter Nowell, 5 years 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, 5 years ago

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

          1 point
          • Peter NowellPeter Nowell, 5 years 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, 5 years 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, 5 years ago (edited 5 years 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 NowellPeter Nowell, 5 years 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, 5 years 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, over 5 years 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, 5 years ago

      Input ftw

      3 points
    • Ismail JadunIsmail Jadun, 5 years ago

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

      4 points
      • Ethan BondEthan Bond, 5 years 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 NowellPeter Nowell, 5 years 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
    • James HarrisJames Harris, 5 years 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 m, 5 years 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
  • Michael Nino EvensenMichael Nino Evensen, 5 years ago

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

    0 points
  • Floyd WilliamsonFloyd Williamson, 5 years ago

    What color scheme is that? Anyone know?

    0 points