Apple の新フォント San Francisco の秘密

Akinori Machino
Sep 17, 2015 · 7 min read

iOS 9 が一般公開されました。気づきにくいところですが、実はこの iOS 9 から、システムフォントが Helvetica Neue から、Apple が新たに開発した San Francisco フォントに変更されています。

Image for post
Image for post
Image for post
Image for post
Helvetica(左) San Francisco(右)

San Francisco は Apple Watch のシステムフォントとして既に採用されていましたが、Apple Watch にとどまらず、iOS 9 や次期 Mac OS X “El Capitan” のシステムフォントとしても使われるようになります。

Image for post
Image for post
Apple Watch

Apple は、初代 iPhone からずっと、iOS のシステムフォントとしては Helvetica を採用してきました。また、Mac OS X でも 10.10 Yosemite からは、それまで使用していた Lucida Grande から Helvetica へと変更しています。ここにきて Apple が 、「フォントの王様」とも形容される Helvetica を捨てたのは何故でしょうか?

Yosemite から OS X のシステムフォントが Helvetica に変更された際、少なくない数のデザイナーから「Helvetica は不適切だ」という声が上がっていました。その主な理由は、Helvetica は小さいサイズでは判読しづらい書体であるというものです。

Image for post
Image for post
Helvetica sucks” by Erik Spiekermann

確かに、Helvetica を小さいサイズで表示して、少しボカしてみたりすると、潰れてしまって文字を判別しにくいところがでてきます。Apple Watch で San Francisco フォントが採用された理由は、小さいサイズでも読みやすいフォントにするためだと言われていました。

Image for post
Image for post
小さいサイズで見た時に文字が潰れやすい

ただ、低解像度や小サイズで判読しづらいとは言っても、最近のディスプレイは印刷物以上の解像度を持ちますし、iPhone では、必ずしも Apple Watch ほど小さいサイズで文字表示をする必要が生じるわけでもありません。なぜ Watch だけでなく、iOS や Mac のシステムフォントとしても San Francisco に統一したのでしょうか。

San Francisco フォントは、判読性を高めるために、様々な工夫がなされています。まず、実は Apple Watch の San Francisco フォントと、iPhone, iPad, Mac 向けの San Francisco フォントは別物です。

iOS, OS X には SF、Watch には SF Compact というフォントが使われています。これらの違いは o や e のような文字の縦線部分を、丸ませているか、フラットに引いているかというところに表れています。

Image for post
Image for post
Image for post
Image for post
SF と SF Compact の違い

これによって、SF Compact では、文字間の余白が広がり、Apple Watch のような、より小さい画面でも文字が潰れて見えないように設計されているのです。

SF、SF Compact というフォントファミリーは、更に Text と Display と呼ばれる2つのサブファミリーに分かれています。これらは “Optical Sizes” と呼ばれ、Display は見出しのような大きな文字に、Text は本文などの小さい文字に使われます。

Image for post
Image for post
San Francisco Family

上述したとおり、Helvetica に代表されるグロテスク書体(サンセリフ書体)は、小さいサイズで表示した際に、隣り合う文字がくっついて混ざってしまったり、あるいは文字自体が潰れて a, e, s のような異なる文字が同じ形に見えてしまうことがあります。

Image for post
Image for post
Image for post
Image for post
Display と Text フォントの違い

小さいサイズで表示される San Francisco の Text フォントは、文字間の余白を Display フォントよりも多くとってあり、更に「a」のような文字形の隙間部分 (aperture) を広くして、潰れにくくしてあります。

San Francisco フォントの優れたところは、Display / Text の2つの Optical Sizes を、システムが自動的に使い分ける点です。具体的には、20pt のサイズを境にして、Display / Text が自動的に切り替わります。

Image for post
Image for post

デザイナーやエンジニアは、両者の違いを意識することなく、例えば UILabel にシステムフォントをセットするだけで、自動的にこの効果を得られるのです。

特に感銘を受けたのは、San Francisco フォントにおけるコロン (:) の扱いです。通常、コロンはベースラインの上に乗る形でレイアウトされるので、「9:41」のように数字で挟んだ場合に、垂直方向の中央に位置してくれません。San Francisco フォントでは、コロンを数字で挟んだ場合、システムが自動的に垂直位置を調整してくれます。

Image for post
Image for post
Vertically Centered Colon

いかがだったでしょうか。非常に細かい違いではありますが、San Francisco フォントは様々なデバイス上で文章を読みやすくするため、深く考えられたフォントだといえると思います。

今回 San Francisco フォントに取って代わられた Helvetica は、デジタルデバイスが普及する以前の 1957年 にスイスで生まれました。今でも多くの企業がコーポレートタイプ(企業書体)として採用しており、これからも名書体として愛され続けることは間違いありません。

一方、システムが環境に応じて動的にデザインを変化させる San Francisco フォントは、デジタルスクリーン上で表示することが多い現代における「デジタルネイティブ」なフォントだなと感じました。

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Medium Japan

Medium 公式の日本語専用パブリケーションです。

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store