Apple.com switches web font from Myriad to San Francisco

Jump to First Reply
AppleInsiderAppleInsider
Posted:
in General Discussion edited January 2017
Apple in a minor change to its website on Tuesday integrated its in-house developed San Francisco typeface, first introduced with Apple Watch, into most consumer-facing pages.


Apple.com homepage with San Francisco web font (top) and the outgoing Myriad.


Apple has been slowly transitioning its webpage away from the tried-and-true Myriad web font for some time, mostly through official logos for products that have launched since the original Apple Watch, but the company today went a step further by committing website text to San Francisco. Prior to the change, only specific product marks like "Apple Watch" and "iPhone" were rendered in Apple's bespoke typography.

The update will bring Apple.com in line with the company's various computing platforms, each of which integrates some flavor of the San Francisco typeface.

Designed for maximum clarity and readability, San Francisco debuted alongside Apple Watch in 2015. At the time, Apple said it developed the typeface to work hand in hand with the wearable's small screen, saying the font would ultimately make its way to iOS, watchOS and macOS.

After releasing the system font to developers, Apple officially integrated a version of San Francisco into its flagship mobile OS with the launch of in September 2015. Mac followed with OS X 10.11 that same year.

Apple's hardware is also adopting the typeface. For example, the 12-inch MacBook with Retina display introduced a keyboard with San Francisco lettering, a change that subsequently trickled down to all current MacBook models.
«1

Comments

  • Reply 1 of 26
    irelandireland Posts: 17,801member
    The teenagers on their second iPhone and the Samsung employees who've taken over MacRumours are trying to pee pee [hint hint] all over this news but are instead pissing on themselves. They literally have no clue what they are taking about.
    edited January 2017
     0Likes 0Dislikes 0Informatives
  • Reply 2 of 26
    calicali Posts: 3,494member
    ireland said:
    The teenagers on their second iPhone and the Samsung employees who've taken over MacRumours are trying to pee pee [hint hint] all over this news but are instead pissing on themselves. They literally have no clue what they are taking about.
    This is news?!?!!!

    I kinda like how the old one disappears into the background though. 
     0Likes 0Dislikes 0Informatives
  • Reply 3 of 26
    jbishop1039jbishop1039 Posts: 258member
    I like the switch. But I did also like the San Francisco paired with the Myriad font. Was a nice contrast. But oh well, on with the new!
     0Likes 0Dislikes 0Informatives
  • Reply 4 of 26
    mdriftmeyermdriftmeyer Posts: 7,503member
    The weight is too thick on the San Fran.
    williamlondonmelodyof1974
     1Like 0Dislikes 1Informative
  • Reply 5 of 26
    fotoformatfotoformat Posts: 302member
    mdriftmeyer said:
    The weight is too thick on the San Fran.
    I feel the same way about San Francisco ('heavy' rather than 'thick' is font terminology) and, despite my aging eyes, I find that Myriad has better clarity.
    melodyof1974
     1Like 0Dislikes 0Informatives
  • Reply 6 of 26
    Rayz2016rayz2016 Posts: 6,957member
    mdriftmeyer said:
    The weight is too thick on the San Fran.
    Prefer San Francisco, though I didn't have a problem with the old font anyway. 
    williamlondonireland
     2Likes 0Dislikes 0Informatives
  • Reply 7 of 26
    imatimat Posts: 221member
    As usual "US only. For other countries restrictions apply"

    No comment. Apple cannot even manage a rollout of a font internationally...


    Moreover... Apple.ch prompts a language choice page. Which... Still sports the old linen theme!!!

    Need I say more?




    edited January 2017
    williamlondon
     0Likes 0Dislikes 1Informative
  • Reply 8 of 26
    loren22loren22 Posts: 3member
    Something is off about this new type font. Doesn't look right. Less professional. Less clarity. More child-like. Harder on the eyes.
    williamlondonfotoformatcoolfactorgordoncy
     3Likes 0Dislikes 1Informative
  • Reply 9 of 26
    entropysentropys Posts: 4,437member
    A font change is "a minor change"? 

    Sigh. Kids today.
    edited January 2017
     0Likes 0Dislikes 0Informatives
  • Reply 10 of 26
    macxpressmacxpress Posts: 5,982member
    I prefer Comic Sans myself....
    melodyof1974singularitydamn_its_hot
     3Likes 0Dislikes 0Informatives
  • Reply 11 of 26
    melodyof1974melodyof1974 Posts: 114member
    macxpress said:
    I prefer Comic Sans myself....
    Seriously, who doesn't? Thanks for the chuckle!
     0Likes 0Dislikes 0Informatives
  • Reply 12 of 26
    randominternetpersonrandominternetperson Posts: 3,196member

    I'm surprised no one has mocked up what the Apple site would look like using the REAL San Francisco font--the bizarre, ransom-note font that debuted with the original Mac.

    https://en.wikipedia.org/wiki/San_Francisco_(1984_typeface)

    edited January 2017
    cincyteecoolfactorretrogustoStrangeDays
     4Likes 0Dislikes 0Informatives
  • Reply 13 of 26
    paxmanpaxman Posts: 4,729member
    macxpress said:
    I prefer Comic Sans myself....
    Yes, everybody does .... it's so ... um... informal.? 


    edit: Better add a wink I guess ;)
    edited January 2017
     0Likes 0Dislikes 0Informatives
  • Reply 14 of 26
    coolfactorcoolfactor Posts: 2,379member
    (edit) I was wrong.

    But my non-Retina display does not render the font anywhere near what a Retina display does.

    (edit again)

    My interpretation was wrong. I thought the narrower font was the newer one. I actually prefer that over the heavier, bolder SF being used now. Sad to see Myriad go...
    edited January 2017
     0Likes 0Dislikes 0Informatives
  • Reply 15 of 26
    lorin schultzlorin schultz Posts: 2,771member
    Is there anyone here in the Developer program who is able to share the font with me? I'd like to have it on hand for creating my own Apple-centric materials (and maybe even parody purposes should the opportunity arise), but don't wanna drop a hundred bucks to join the developer program just to grab a font. If you would like to help you can just PM me.

    Thank you!
     0Likes 0Dislikes 0Informatives
  • Reply 16 of 26
    larz2112larz2112 Posts: 291member
    I've always been a fan of Myriad. To me it has a little more style than SF, which pretty much looks like Helvetica at first glance. Yes, I know there are subtle differences and Apple designed SF specifically for readability on small screens, but SF is a basic san-serif font. I bet most people wouldn't be able to tell the difference between SF, Helvetica, and similar fonts.

    Myriad, on the other hand, has a certain style to it that makes it uniquely Myriad, and much more recognizable, especially when on a page with other san-serif fonts.

    But whatever. Time for a change. Out with the old, in with the new. Blah. blah. blah.
     0Likes 0Dislikes 0Informatives
  • Reply 17 of 26
    volcanvolcan Posts: 1,799member
    The weight is too thick on the San Fran.
    It was simply a design decision to not use a light font because in the San Francisco typeface there are nine different font weights in the display version, from Ultralight to Heavy and six different weights in the text version, from Light to Heavy.
    edited January 2017
     0Likes 0Dislikes 0Informatives
  • Reply 18 of 26
    retrogustoretrogusto Posts: 1,158member

    I'm surprised no one has mocked up what the Apple site would look like using the REAL San Francisco font--the bizarre, ransom-note font that debuted with the original Mac.

    https://en.wikipedia.org/wiki/San_Francisco_(1984_typeface)

    That was my first thought--sorry to keep you waiting!


    StrangeDaystallest skilroundaboutnowrandominternetpersondamn_its_hot
     5Likes 0Dislikes 0Informatives
  • Reply 19 of 26
    thewbthewb Posts: 80member
    Are you sure the font you see is San Francisco? Looks no different on my Mac and iPhone than on my PC. No version of San Francisco appears in Font Book and it is not available for general use in any app, it is only available as the system font for UI elements. The CSS at apple.com has font-family: "SF Pro Display" with fallbacks to SF Pro Icons, Helvetica Neue, Helvetica, Arial, and the browser's default sans-serif. My PC obviously doesn't have San Francisco installed, but it does have Helvetica Neue, and I suspected that's what I was seeing on both PC and Mac. So I tested it with some simple hand-written HTML that uses SF Pro Display with no fallback. As I expected, no dice.

    This may mean Apple will soon make San Francisco available for general use. But right now, as far as I can tell, you're looking at Helvetica Neue.
    randominternetperson
     1Like 0Dislikes 0Informatives
  • Reply 20 of 26
    volcanvolcan Posts: 1,799member
    thewb said:
    Are you sure the font you see is San Francisco? Looks no different on my Mac and iPhone than on my PC. No version of San Francisco appears in Font Book and it is not available for general use in any app, it is only available as the system font for UI elements. The CSS at apple.com has font-family: "SF Pro Display" with fallbacks to SF Pro Icons, Helvetica Neue, Helvetica, Arial, and the browser's default sans-serif. My PC obviously doesn't have San Francisco installed, but it does have Helvetica Neue, and I suspected that's what I was seeing on both PC and Mac. So I tested it with some simple hand-written HTML that uses SF Pro Display with no fallback. As I expected, no dice.
    I didn't check their CSS3 code but I'm pretty sure they are using the tag @font-face. You upload the non web-safe font to your web server and specify the url in the CSS. Then a compatible browser will download the font along with the HTML/CSS/JS etc. You don't have to have it installed on your own machine. This is the new CSS3 way to do it. Most people don't have Myriad typeface installed either but had no problem reading the previous Apple web pages. As you discovered, the old style tag format won't work for fonts not installed on the client's machine, which is why traditionally they had fallback and default fonts. The tag @font-face is not compatible with IE <8 which is why people use redundant methods of specifying the font family. Also the url of the font should be specified in lowercase or it will cause issues even in newer versions of IE. One other thing about IE: you have to specify the font as 'installable' within your CSS code.

    BTW the font you want to use just has to have a url somewhere on the web. It doesn't have to be on your own server. Google has hundreds of fonts that you can specify in your CSS and they get served from Google's servers. 
    edited January 2017
    retrogustorandominternetpersonmatt2
     2Likes 0Dislikes 1Informative
Sign In or Register to comment.