Apple’s New San Francisco Fonts | Hacker News Reader

Apple’s New San Francisco Fonts

medium.com

192 pointsshawndumas78 comments

"You can see the low legibility of Helvetica if you type texts in a small size and make them blur. Some texts become blended and hard to decipher. They say that Apple developed San Francisco fonts in order to make small size texts in Apple Watch more legible."

Funny thing is, this is exactly the problem that font hinting was meant to solve [1][2]. Apple developed the tech for TrueType font hinting nearly 25 years ago but then ditched most of it in their antialiasing rasterizer for OS X. If they still had hinting in their rasterizer, then instead of creating a whole new font with flatter segments they could have hinted Helvetica to flatten out at smaller sizes while still curving in the larger sizes. Then they would have had the best of both. Granted, that would have meant admitting that there's something to respecting the pixel grid [3], but this seems like a tacit admission of that anyway.

[1] https://developer.apple.com/fonts/TrueType-Reference-Manual/...

[2] http://www.rastertragedy.com/

[3] http://blog.codinghorror.com/font-rendering-respecting-the-p...

That wouldn't be Helvetica, so they would probably give it a new name. Given the ambiguous ubiquity of Helvetica, it's possible they'd have chosen a name like San Francisco anyway. Whether the feature is provided by hinting or a pair of fonts is moot.

Hinted fonts did look great on low-DPI screens. To my taste, Microsoft's Tahoma, the Win95 / NT4 system font designed by Matthew Carter, is probably the best font that you can squeeze into a grid about 9 pixels high:

https://www.microsoft.com/typography/fonts/family.aspx?FID=1...

However, nicely hinted fonts were designed from scratch for that purpose. You can see it in Tahoma's letter shapes at larger sizes, the construction is very grid-like overall.

A well-hinted Helvetica really wouldn't look any different from Arial back in 1995. The low resolution makes Helvetica lose its character.

I think Apple made a good choice in designing a more contemporary font.

I'm not sure how font hinting would solve this problem. The resolution of the Apple Watch is 326ppi, so the pixel grid doesn't matter so much.

Seems like the different San Francisco variants were designed to solve problems due to the physical dimensions of the letterforms at small sizes, not anything to do with a pixel grid.

The DPI may be high, yes, but the number of actual pixels is still quite low. Looking it up, I see that the smaller watch has a 272x340 display and the larger has a 312x390. That's either 92k or 122k pixels to work with -- about 1/3 VGA -- over the entire display. At those scales, hinting is absolutely relevant unless perhaps you're only displaying a few relatively large words.

It's less than an inch across, and viewed typically at arm's length. Yes, you're only displaying a few relatively large words. They're not trying to display 80 column text on a watchface.

As others pointed out, font hinting is solving a completely different problem from the one that Apple faces or that you describe. You describe the problem of displaying small text on a low-resolution grid. Font hinting is indeed a passable solution to that problem. However Apple's problem is displaying small text, period (Retina displays have plenty of resolution). The first sentence of the top link you give, "A quality outline font is one that provides legibility at small sizes on low resolution devices" tells us why this is not relevant. Nobody cares about low-resolution devices anymore. Apple set out to make things legible assuming infinite resolution.

Maybe we should have a hinting equivalent for physical size then (rather than pixel hinting or an entirely different font).

Adobe used to have this feature in their typeface format and type design tools in the 1990s. The format was called “Multiple Master”, see https://en.wikipedia.org/wiki/Multiple_master_fonts and http://blog.typekit.com/2014/07/30/the-adobe-originals-silve.... (Metafont also has this feature.)

In practice, type designers found that making such fonts took dramatically more work, and typographers/publishers weren’t willing to pay commensurately more money. So it didn’t see much adoption outside Adobe.

As a result, the format died out, and we stuck with descendants of the original PostScript font format.

More recently, many companies (but especially Adobe) ship “pro” typefaces with separate fonts for various “optical sizes”. Again, producing these takes a lot of extra work, so most type designers don’t bother with it, and because it is designed to work with standard tools (which don’t have special knowledge of the feature), typographers/designers must explicitly choose which optical size they want to use in each context. So in theory it’s inferior to the Multiple Master format, but in practice it is backwards compatible, which ends up being more important.

Apple can solve this problem for their UI fonts specifically, because they have full control. Unfortunately, they haven’t offered these features for use with other typefaces.

I believe that's already possible with TrueType now if the person doing the hinting is willing to make the effort.

TrueType hints are restricted programs stored as bytecode. One instruction, MPPEM, requests the pixels per em. Another instruction, MPS, gets the current point size. There are also instructions to find pixel lengths across various axes. I'd have to think about the details but it should be possible to estimate the DPI and physical glyph size from those and then adjust the hinting accordingly.

TrueType hints are not used in many contexts, or are not used consistently. So this isn’t useful in practice. Also, I don’t believe that TT hints can handle the range of letter-form and spacing changes required to properly scale from small captions up to large headings.

Font hinting lets you move points around based on sizes, dpi and rendering modes using a stack-based bytecode language.

Sure the primary use case for many years was to cope with low-resolution but it can be used in the way the poster above described. In fact you can use it in the other direction too so that larger sizes take on more specific characteristics instead of having two fonts and a hack that switches at 20pt like they're doing with San Francisco.

Source: Have actually TrueType hinted fonts.

Switching between two fonts in different circumstances seems like less of a hack than embedding some kind of Virtual Machine into your font engine with all the security issues that follow.

The language is elegant, lets you perform tweaks down to an individual level and works across many platforms and can be used in any font.

It's totally possible to create a safe virtual machine for specific uses. There have been many attack vectors for fonts over the years due to the complexity in parsing them. I do not recall any of them being due to the hinting language.

The Mac one is hard coded for a single OS and font combination and a specific size down in the operating system.

I disagree that the later is less of a hack.

I'm not sure OSX can respect the pixel grid, at least any more. People think "Retina" means "one virtual pixel is 2x2 physical pixels", and on iOS it does mean that; on OSX, though, it means "we render to a back-buffer that's at least 1.5x as large, using our unscaled 2x assets, and then downsample[1] to the physical display size." That means that the physical pixel grid is truly a black-box abstraction from the text renderer's perspective. Applications have no idea how many physical pixels there are (unless they draw to an OpenGL buffer instead of going through Quartz.)

[1] This settings panel (http://i.imgur.com/TRtR17g.png), despite looking like a DPI adjuster, is actually to choose what size backbuffer gets rendered-onto-and-downsampled. Note the shitty blurry edges of the text in that just-taken screenshot (no, it's not a JPEG): the text is obviously sitting on non-integral pixel positions after downsampling. It actually looks fine, when it's shrunk down onto your 15" screen and you're sitting two feet from it; it just doesn't look terribly clean at examinable 1:1 scale.

It doesn't even mean that on iOS since the advent of the iPhone 6 Plus.

Much of this article (and all of the images) was taken from a WWDC 2015 talk [0]. If you're interested in typography, that video is definitely worth a watch.

[0] https://developer.apple.com/videos/wwdc/2015/?id=804

I don't like the kerning on San Francisco. It's too common to have wider than normal spaces between characters to the point of being distracting. Maybe that's good to read randomly generated strings of text, but on actual words the shape of the word is the first hint to the brain when trying to read it, before the individual characters, and if that shape is compromised by wider than expected spaces, reading flow is affected.

That's funny, I loathe Helvetica's keming, and think that San Francisco's is much improved. I can always distinguish 'rn' from 'm' in the new font.

I see what you did there. ;)

I was hoping someone would catch that :)

What do you rnean?

exactly :)

I had to read that twice. Nicely done!

You will probably appreciate this - Liz Crain is an artist who does ceramic pieces that are made to look like old rusted cans (oil cans, etc.). Her husband is a retired typesetter, so some of her ceramic "cans" are related to typography. We bought one called Interrobang and immediately commissioned her to do a Keming can:

https://www.facebook.com/lizcrainceramics/posts/102056813368...

Awesome, thanks for sharing!

In all seriousness, why not use a rusted oil can to begin with..?

I don't know if it was what she was going for, but the faux-rust really makes it look cartoonish/surreal. I really like it.

Anybody can have an old tin can on their counter. But if it's a fake tin can, that's art!

I agree with that. San Francisco seems optimal for button captions, app names and other more unique, short pieces of texts, but seems sub-optimal for running text.

San Francisco is much better for running text than Helvetica. Lucida Grande is much better for running text than Helvetica. Verdana is much better for running text than Helvetica. Pretty much anything is better for running text than Helvetica.

Helvetica is a typeface designed for signage, headings, posters, corporate logos, and the like. For body copy, it’s terrible, because it has a strong boxy/griddy quality to it, many similar looking letters, and proportions which make letter shapes hard to see at small sizes.

Helvetica Neue is not optimal either, especially due to the light weight used in iOS 7-8, but it I find it still acceptable.

For my taste San Francisco looks a bit too blocky due to the flattened curves along the vertical axis. It's not bad, but I like Google's Roboto typeface, for example, better.

Agreed. The iOS 9 keyboard just 'looks' unbalanced (tangential to kerning I know, but nonetheless).

Agree.

They clearly have some real-world kerning tuning to do, but I don't know if that will happen given their "look at our perfect new font" campaign.

Let's hope the font nerds deep in the bowels of Apple will do the right thing and tune it over time.

("Doing the right thing in the bowels" reminds me of a story an old friend of mine told me years back. He was an Apple fellow by that point, one of a handful, able to work on whatever he wanted. (He was in the printing group, since he came out of Imagen, the TeX project laser printer spin-off, where we both worked.) Anyway, at some point Jobs went off on a rave at a meeting and declared that fax was dead, and they should no longer support faxing in their printer drivers. Chen and crew had no choice but to fold in public, but kept it in anyway, and Job was never the wiser.)

I wasn't particularly excited for this update but when my phone switched over I was truly wowed by how much easier the font was on my eyes. Kudos to the Apple typographers, it's really improved my iPhone 6 experience.

That's strange. I had the opposite experience. I could no longer read. Specifically I couldn't read my notes in the Notes.app on my iPhone5S after upgrading to iOS9. The text was smaller and the lines thinner. I eventually had to go into the system settings and pick "bold" for the entire OS

Agreed, on the flip side, I'm warming up to Roboto as well. OpenSans also looks pretty good at smaller sizes imo, but not as good as a header/larger font.

It would have been fun if they'd used the original Mac "San Francisco" font instead: http://en.wikipedia.org/wiki/San_Francisco_(1984_typeface)

I wonder why they reused the "San Francisco" name. Following the original Macintosh tradition of naming fonts after "world class cities", there are plenty of new names they have have chosen.

http://www.folklore.org/StoryView.py?story=World_Class_Citie...

Apple has fallen into the Silicon Valley 'everything important is in California' realm.

I'm always amused when I look at the Date/Time settings and see that the West Coast runs on Cupertino time

I always make sure I have LA or portland/seattle picked, that "cupertino" thing annoys me for some reason.

Oh the original names where a lot better. I guess less memorable, but still more unique.

They also missed out on calling it Sans Francisco.

Or, more canonically, Francisco Sans.

San Francisco. System Font.

Instead of making yet another slightly different Helvetica, maybe somebody should make an effort to make a font that renders Latin, Cyrillic and Greek in a unified style without glaring errors. (As far as I know, there's only one font that does this correctly, and it doesn't support anything but Latin and Cyrillic.)

How about a font that renders Latin, Cyrillic, Greek and Hanzi correctly? Why do I have to install a special 'Chinese font package' in 2015?

https://www.google.com/get/noto/

Roboto and Noto should do what you want: https://www.google.com/design/spec/style/typography.html#typ...

Something that many digital folks don't get about old typefaces during the hot metal era:

Different sizes had different cuts. So a typeface that's at 9 points wasn't using the same outline as the same typeface at say 24 points. In fact in many cases you'd have versions of typefaces within a family designed for body text vs. headlines, so for example you have a "book weight" vs. a "display weight".

Disclamer: I'm no font expert, this is all my opinion as a user.

Not a fan of the font to be honest. I was excited for a Helvetica replacement on OS X, but to this day nothing beats Lucida Grande, especially on non retina displays. I'd even say I prefer Helvetica to SF (and I was definitely not a fan of Helvetica as a UI font), after using iOS 9 for two weeks and then coming back to iOS 8. I can't describe it properly without typography knowledge, but I'd say it feels more elegant than SF (and other "modern" fonts like Roboto).

Also there's the issue of readability, so I guess in that regard SF trumps Helvetica. Then again, I'm no expert so I don't really know.

I miss the Lucida Grande + Myriad Pro days!

At first I thought the new font looked nice and clean but lately I've really been longing for the old Helvetica Neue again.

I have untrained eyes, but I could not notice a single difference between the Helvetica icon screen and the SF icon screen, other than sliiiightly different kerning. The letters looked exactly the same otherwise.

The icon screen sample is pretty low res. It's much easier to see on an actual retina display, but the differences are indeed subtle.

A couple of differences: The 'a' is clearly different, and you should be able to spot the difference even with an untrained eye; the 'C' and 'G' are clearly slimmer in SF.

The curves of the rounded letters have a subtly different feel to them matching the names of the fonts: Helvetica is sterner and more geometric, San Francisco more inviting and informal. You may find this hard to see is you look too closely, but see if you can feel it or learn it by attaching adjectives to the look of the words.

Slightly related: the letter i on the keyboard looks wrong. It bugs me every time (it looks too high).

They raise the baseline for the lowercase keyboard, which I find very very bothersome. It seems as though they try to center the baseline-median area, rather than just stick with the baseline from the uppercase keyboard.

I accidentally misattributed some dislike for this to dislike for the San Francisco font; after I realized a bit more what was going on I'm slightly more comfortable with the font.

It does look bothersome, but if they moved the baseline down, then the 'q', 'g', and 'p' would be the problematic ones (they already look "too low" out of context with the rest, even shifted up).

Now you said that, I agree. I am unable to "un-see" it.

This may also be apparent because in iOS 9, the letters are in lower case. They were always uppercase before the update.

What keyboard, if I may ask? Do you mean the iOS on-screen keyboard? Or the real keyboard?

The iOS on screen keyboard. The lowercase version.

Independent of the io9 switch, that's an interesting post for the science of fonts. Very relevant for web design work.

> One of the great features of San Francisco is the way it optimizes the typeface dynamically. The system will automatically switch the Display/Text fonts according to the text size.

I just assumed that was the case already. Back in the olden daze when there weren't many pixels, the font was hand tweaked for each resolution. I did a few myself :-)

I guess technology has come full circle.

I really, really miss serif fonts. It'll be nice once we all have 600 dpi e-ink 'screens' and can have book-quality text.

Apple should have limited this font to the Watch. On the iPhone it looks ugly. There is too much space between characters and that hurts readability. iPhone's screen resolution is high enough that there is no need to use a special font designed for screens -- that only makes it look cheap and unprofessional.

Disagree. Conformity is what makes professional.

http://daringfireball.net/linked/2011/10/19/roboto-v-helveti...

In other words, San Francisco is a Apple's Arial.

Great WWDC video[1] "Introducing the New System Fonts" which dives deep into all the tricks they pulled, and why, with the San Francisco font (unfortunately, only viewable in Safari and WWDC app)

[1] https://developer.apple.com/videos/wwdc/2015/?id=804

As a programmer with very limited design experience, I always find such analyses of fonts fascinating. The level of detail these typographers deal with is just amazing. For example, the subtle curve in the `o`s in SF versus SF compact -- I wouldn't have figured that out myself. I hope to find some time/resources to learn some of this magic myself :)

'dfgh' on the keyboard have really strange optics in San Francisco. It almost looks as if their baselines aren't aligned, but they are. But visually, the g looks low and the f looks high. It's just something about the crossbar on the f and the bowl of the g.

This is really funny. The font in the article about legibility of fonts on mobile looks really garbled on Firefox mobile (Android) when scrolling.

No mention of the similarity to Roboto? IMO, the aesthetic effect of Roboto is not as good as the former.

Apple should just switch to Roboto

Roboto is very similar to Helvetica. I don't really understand why Google bothered.

Unlike SF, which is nothing like Helvetica, right?

Reply on news.ycombinator.com