Use your words

A detailed look at Apple’s new San Fransisco typeface

Nick Keppol has written two fabulously detailed posts for The Syndicate with a focus on Apple’s new typeface.

San Francisco

  1. Why San Francisco? — a primer in typography, legibility and screen rendering explains why Apple made a new typeface.
  2. Arriving at San Francisco — an examination of the features of San Francisco… and its failings.

So is San Francisco really the perfect system font for Apple’s products? It’s complicated.

Many critics have compared it to Helvetica and DIN. When viewed under this simplified stylistic lens, they aren’t exactly wrong. There are a lot of similarities. If we put San Francisco under the microscope, we’ll see that the visual similarities are just a small piece of this type system. It’s a typeface designed for the digital age and it excels in this medium in ways that Helvetica, DIN, or Lucida Grande ever could.

Letters and numbers with similar forms get misread. For example, it’s easy to confuse a capital B and an 8. A capital A and a 4; or a capital G and a 6. This is partly why non-lining old-style numerals exist. To solve for this legibility challenge, and add a bit more style to the typeface, San Francisco has alternates for the 4, 6, and 9 for both proportional and tabular figures.

These things take time though and I doubt the type design team at Apple is very large. I’m not proposing a font designed for ultra low resolution like Verdana or Input — rather something more subtle and on brand. If Apple were to exaggerate the changes they made to the text sized glyphs vs the display cuts—opening the apertures and counters a bit more; and adjusted the spacing metrics…and maybe the weights, I think we could have a really nice looking, legible version of SF UI for low-resolution displays without any real impact to style. Would it be obsolete in 5-7 years? Yes, probably—but if everyone using a 1x display could have a better experience until everything is retina, isn’t it worth it?

See also

Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s