
Apple’s New San Francisco Fonts - shawndumas
https://medium.com/@mach/the-secret-of-san-francisco-fonts-4b5295d9a745
======
a_e_k
"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/...](https://developer.apple.com/fonts/TrueType-Reference-
Manual/RM03/Chap3.html)

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

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

~~~
etangent
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.

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

~~~
a_e_k
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.

~~~
jacobolus
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.

------
Techowl
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](https://developer.apple.com/videos/wwdc/2015/?id=804)

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

~~~
aaronbrethorst
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.

~~~
Stratoscope
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...](https://www.facebook.com/lizcrainceramics/posts/10205681336890894)

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

~~~
Hytosys
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.

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

~~~
greggman
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

------
erbo
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)](http://en.wikipedia.org/wiki/San_Francisco_\(1984_typeface\))

~~~
cpeterso
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...](http://www.folklore.org/StoryView.py?story=World_Class_Cities.txt)

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

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

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

------
otabdeveloper
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?

~~~
moeffju
Roboto and Noto should do what you want:
[https://www.google.com/design/spec/style/typography.html#typ...](https://www.google.com/design/spec/style/typography.html#typography-
typeface)

------
michaelpinto
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".

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

~~~
spinningarrow
I miss the Lucida Grande + Myriad Pro days!

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

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

~~~
pietro
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.

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

~~~
epistasis
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.

~~~
exogen
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).

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

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

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

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

~~~
smaili
Disagree. Conformity is what makes professional.

------
p1itopre
[http://daringfireball.net/linked/2011/10/19/roboto-v-
helveti...](http://daringfireball.net/linked/2011/10/19/roboto-v-helvetica)

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

------
mastre_
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](https://developer.apple.com/videos/wwdc/2015/?id=804)

------
yati
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 :)

------
toddmorey
'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.

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

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

------
lambdanode
Apple should just switch to Roboto

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

~~~
pluma
Unlike SF, which is nothing like Helvetica, right?

