Apple.com switches web font from Myriad to San Francisco

AppleInsider · January 25, 2017 1:19AM

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.

ireland · January 25, 2017 1:49AM

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.

cali · January 25, 2017 3:01AM

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.

jbishop1039 · January 25, 2017 3:01AM

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!

mdriftmeyer · January 25, 2017 4:17AM

The weight is too thick on the San Fran.

fotoformat · January 25, 2017 4:49AM

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.

Rayz2016 · January 25, 2017 6:44AM

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.

imat · January 25, 2017 6:50AM

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?

Image: http://forums.appleinsider.com/uploads/editor/xa/g0mayqe9clkx.jpeg

loren22 · January 25, 2017 11:16AM

Something is off about this new type font. Doesn't look right. Less professional. Less clarity. More child-like. Harder on the eyes.

entropys · January 25, 2017 12:36PM

A font change is "a minor change"?

Sigh. Kids today.

macxpress · January 25, 2017 1:25PM

I prefer Comic Sans myself....

melodyof1974 · January 25, 2017 2:36PM

macxpress said:

I prefer Comic Sans myself....

Seriously, who doesn't? Thanks for the chuckle!

randominternetperson · January 25, 2017 3:24PM

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)

paxman · January 25, 2017 4:24PM

macxpress said:

I prefer Comic Sans myself....

Yes, everybody does .... it's so ... um... informal.?

Image: http://forums.appleinsider.com/uploads/editor/7d/uyvwuo0ubsiw.png

edit: Better add a wink I guess

coolfactor · January 25, 2017 4:26PM

(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...

lorin schultz · January 25, 2017 4:36PM

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!

larz2112 · January 25, 2017 6:11PM

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.

volcan · January 25, 2017 6:33PM

mdriftmeyer said:

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.

retrogusto · January 25, 2017 6:58PM

randominternetperson said:

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!

Image: http://forums.appleinsider.com/uploads/editor/ka/ea4effrz44bc.png

thewb · January 25, 2017 7:06PM

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.

volcan · January 25, 2017 7:32PM

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.

Apple.com switches web font from Myriad to San Francisco

Comments