28 comments

  • Rolando MurilloRolando Murillo, over 3 years ago

    For whoever was wondering:

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    27 points
  • Alec LomasAlec Lomas, over 3 years ago (edited over 3 years ago )

    I'm sure I'll get used to it, but right now it feels a bit wide

    EDIT: Sacha's right

    3 points
  • Hui Jing Chen, over 3 years ago

    Oooo...so they did change the font...and I thought it was just me...

    0 points
  • Weston Thayer, over 3 years ago

    How the heck do they deal with alignment and vertical rhythm? Every font will have different vertical metrics. Anybody see any bad cases of alignment yet?

    0 points
    • Alec LomasAlec Lomas, over 3 years ago

      Relative units (rem/em) are your friends, if you learn how to use them properly.

      0 points
      • Weston Thayer, over 3 years ago

        I don't think they'll help in this case. rem/em don't update with changes to font-family, only font-size.

        0 points
        • Mark Otto, over 3 years ago

          We're not using relative units in any place save for our Markdown files (to make our rendered Markdown scale easily for mobile, issue comments, and readmes/blobs).

          The few cases of misaligned icons are being fixed as bugs. Overall, we haven't seen too much funkiness across the browsers as the main system fonts are pretty similar size-wise.

          1 point
          • Weston Thayer, over 3 years ago

            Thanks for the response, that's super interesting. I assumed the vertical metrics would be very different, but didn't bother to check.

            Are the misaligned icon issues font agnostic, or are you having to find a way to make font-specific fixes?

            0 points
            • Mark Otto, over 3 years ago

              Most are agnostic to any particular font. Haven't run into anything egregious that would require browser-specific overrides yet.

              1 point
  • Jared White, over 3 years ago

    Looking great. I'm a big fan of San Francisco on iOS/macOS and like seeing more web sites/apps allow its use.

    0 points
  • Christian PetersenChristian Petersen, over 3 years ago

    At first it was a bit weird, but that's a normal feeling when you've been used to seeing the same font year after year. I have quickly gotten used to it, however I haven't seen how it looks on other systems than macOS.

    0 points
  • Krisztian PuskaKrisztian Puska, over 3 years ago

    Maybe they'll update it later, but Roboto now feels a bit weird on: https://github.com/home

    0 points
    • Juan OlveraJuan Olvera, over 3 years ago

      After a little while you start to notice the niceness, yesterday I wasn't sure but today I love it

      1 point
      • Krisztian PuskaKrisztian Puska, over 3 years ago

        No problem using Roboto at all, just mentioned because the lack of consistency.

        0 points
        • Mark Otto, over 3 years ago

          Agreed about Roboto btw! Our team is talking about it—we'll probably stick to Roboto or something for headings, but we'll likely remove it for the body text and go to this new font stack.

          0 points
  • Zach ReedZach Reed, over 3 years ago

    You may not see it, because it's still 50/50 A/B test, apparently. https://twitter.com/mdo/status/752561058011754496 && https://twitter.com/mdo/status/752561679829872640

    0 points
    • Mark Otto, over 3 years ago

      Not an A/B test, just a (slightly) slow roll out :).

      7 points
      • Zach ReedZach Reed, over 3 years ago

        Ahhh, that makes sense. Nice! :D

        0 points
      • Mathieu CMathieu C, over 3 years ago

        Why this choice? Is it just for performance?

        3 points
      • Jeff L, over 3 years ago

        Also curious about why this roll out decision

        0 points
        • Mark Otto, over 3 years ago

          We feature flag just about every change we do for ease of implementation. It gets our code into production faster for us to test and makes for a smoother release thanks to our internal tools. When we're ready to ship, we just select what percentage to enable that feature flag for—1, 5, 10, 25, 50, 75, or 100%. Goal is to not make the site explode for our users :).

          For a font change like this, that wasn't the major concern, but rolling it out incrementally did give me a safety blanket of sorts. In other changes, where we might overhaul a view or unveil a new feature, we want to make sure we don't trigger tons of exceptions inadvertently. A slower rollout means it's easier to respond to those things before they get out of hand.

          Hope that helps!

          12 points