Apple Watchのシステムフォントに採用された「San Francisco」フォントの特徴とは?

AppleのSan Francisco Apple-Watch
記事内に広告が含まれています。
スポンサーリンク

 Appleが新たにデザインしたApple Watch用フォント「San Francisco」の特徴について少し調べてみました。詳細は以下から。

Apple-Watch-San-Francisco-Font-Face

San Franciscoフォントの歴史

 San Francisco フォントという名前は1984年に既に登場しており、当時Apple Computer のデザイナーだったスーザン・ケアさんによってデザインされ、当時のSan Franciscoフォントは身代金を要求するツギハギの様なデザインで、Macintoshのソフトウエアのデモなどに使用されたそうです。

 そしてApple Watchに採用されたSan FranciscoフォントはApple Watchが発表された当初は公開されておらず、誰が名付けたか分かりませんがその書体からドイツの工業規格の書体”DIN”と”Helvetica”を合わせて”DINvetica”と呼ばれていたようで、

 最終的にAppleは1984年に作られたSan Franciscoフォントと同じ名前を採用したようです。ちなみにCo.Designでは「Appleが主要都市の名前(Chicago, New York, Geneva, and Cairo)をフォント名にするのは初期Mac時代のもので、Appleが新たに”San Francisco”の名前をApple Watchのフォントに付けることは伝統回帰を表している」としています。

In the early days of the Mac, Steve Jobs told Susan Kare and Apple’s other typeface designers to name all of the system fonts after major cities, which is why we have Chicago, New York, Geneva, and Cairo.
By naming their newest typeface San Francisco, Apple is signaling a return to the tradition of in-house type design that helped make them great.

[Apple Releases Its Most Important Typeface In 20 Years – Co.Design]

San Francisco Fontは2種類

San Franciscoフォントには”Text”と”Display”の2種類あり、Textには

1.San Francisco Text Bold
2.San Francisco Text BoldItalic
3.San Francisco Text Heavy
4.San Francisco Text HeavyItalic
5.San Francisco Text Light
6.San Francisco Text LightItalic
7.San Francisco Text Medium
8.San Francisco Text MediumItalic
9.San Francisco Text Regular
10.San Francisco Text RegularItalic
11.San Francisco Text Semibold
12.San Francisco Text SemiboldItalic
13.San Francisco Text Thin
14.San Francisco Text ThinItalic

Displayには

1.San Francisco Display Black
2.San Francisco Display Bold
3.San Francisco Display Heavy
4.San Francisco Display Light
5.San Francisco Display Medium
6.San Francisco Display Regular
7.San Francisco Display Semibold
8.San Francisco Display Thin
9.San Francisco Display Ultralight

のスタイルが用意されています。

TextとDisplayの違いは?

 TextとDisplayの違いはAppleのサポートドキュメントに記載されており「フォントサイズが19ポイント以下なら”San Francisco Text”が表示され、20ポイント以上なら”San Francisco Display”が表示位される」そうで

When specifying system font sizes manually, the point size determines the correct size to use. Choose the San Francisco Text font for text that is 19 points or smaller. Choose the San Francisco Display font for text that is 20 points or larger.

[Apple Watch Human Interface Guidelines: Color and Typography – Apple]

 比較してみると、TextとDispayでは以下の様にkerningが大きく違います。

San-Francisco-Text-and-Display-kerning

どこにある?

 San Franciscoフォント(.otf)はApple Developer Centerで配布されている”Xcode 6.2 beta, including iOS 8.2 SDK with WatchKit” Xcode-Beta.app内にあり、ファイルパスは以下の通り。

Xcode-6-2-beta-WatchKit

Xcode-Beta.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/Fonts/Extra

San Franciscoフォントはどんなフォント?

 San FranciscoフォントはGoogleがAndroid4.0のシステムフォントのためにデザインしたRobotoフォントに非常によく似ているとちょっとした話題になっていますが、

[クリックで拡大]

 AppleによるとSan FranciscoフォントはApple Watch用に特別にデザインされたシステムフォントで、TextとDisplayの違いでも示したように、フォントサイズが大きければ水平方向に圧縮して表示し(Display)、フォントサイズが小さくなると文字を区別しやすいようにフォント間隔を広く(Text)とるとしています。

San-Francisco-Text-and-Display-and-Roboto

The system font was designed specifically for legibility on Apple Watch. At large sizes, the font’s slightly condensed letters are set tight to take up less horizontal space. But at small sizes, they are spaced more loosely and have bigger apertures in glyphs like ‘a’ and ‘e’ to make these easier to read at a glance. Punctuation is also proportionally larger when the font gets smaller. And as text size changes, Apple Watch dynamically switches between fonts to maintain clarity and legibility at all times.

[Apple Watch Human Interface Guidelines: Color and Typography – Apple]

 これはiOS 7から採用されたDynamic Typeと同じもので、テキストスタイル属性を利用したテキストでは自動的にSan Francisco TextとDisplayが切り替わるそうです。

おまけ

 また、DaringFireBallのJohn Gruberさんによると、San Franciscoフォントの数字はstylisticの組み合わせによって変化するようです。

関連リンク:

コメント

  1. Apple7743 より:

    これは良いまとめ

  2. Apple7743 より:

    似てないと思う

  3. 匿名 より:

    素晴らしい!

タイトルとURLをコピーしました