Appleのフォントの話（後編）
前編は製品ベースでメインUIに使われているフォントのお話をしました。iPhoneとiPad、Mac、Apple Watch、システムのメインフォントはとっくにHelveticaからSan Franciscoに変わっていっていたと書いてて気付いたところです。後編はOSベースでiOSとmacOSの変遷からフォントを振り返ります。特にmacOSについて話してます。前編に引き続き、素人が書いていますので優しい目で見ていただけると有り難いです。
iOSの歴代フォント
iOS 1-3: Helvetica
Helveticaは1975年に開発された非常にバランスの良いサンセリフ体。シンプルでクリアなデザインが特徴。
iOS 4-6: Helvetica Neue
Helvetica NeueはHelveticaの改良版で、文字のエッジが滑らかになり、特にデジタルディスプレイでの視認性が向上。
iOS 7-9: Helvetica Neue Light
Helvetica Neue Lightは、Helveticaの細身スタイル。フラットデザインと非常に相性がいいフォント。
iOS 10-16: San Francisco
San Franciscoは、Appleが自社で開発したフォント。文字のサイズや画面解像度に応じて動的に調整されることを前提に設計されている。現代的で読みやすいのが特徴。
iOS 17: San Francisco
San Franciscoは引き続き使用されるが、微調整されることで視認性が改善された。
iOS 18: SF Pro
SF Proは、San Franciscoの改良版で、iOS 18に最適化されているそう。コンパクトな印象、美しいデザインと視認性の向上が特徴。
それぞれ比較して見ました。
（4つ目のSan Franciscoだけ自前で用意できなかったです、SF Pro Textで書いています参考程度に）。結局見て思うのは全部好きなんです。個人的に、この中でアルファベットと日本語のバランスがよく、視認性が高いのはHelvetica NeueかSF Proあたりかと。
Macの歴代フォント
iPhoneよりも歴史は長く、1984年まで遡る。スティーブ・ジョブズ、スティーブ・ウォズニアック、スーザン・ケアの時代。。。
System 1-6（1984-1989）: Chicago
初代Macintoshで採用されたフォント。シンプルで大きなピクセルフォント。他の初期システムフォントとして、Geneva, Monaco, New York, San Franciscoと数多い。Genevaはサンセリフ体、Monacoはモノスペースフォント。ちなみに我らの青春iPodもChicagoです（ごめんなさい、Walkman派でした）。
System 7（1991）, Mac OS 8-9（1997-1999）: Charcoal
よりモダンでクリーンなフォントに。Chicagoの後継としてUIに使われた。
OS X 10.0-10.9（2001-2013）: Lucida Grande
Aqua UIデザインに合わせたサンセリフ体フォント。高い視認性と美しいデザイン。UIのデザインや機能の拡充、Retinaディスプレイの導入準備とともに最適化された。iOSのデザインの影響を受けていない時代のフォント。
OS X 10.10（2014）: Helvetica Neue
Yosemiteでフラットデザインを採用、モダンな視覚スタイルにするためにHelvetica Neueが採用された。
OS X 10.11（El Capitan, 2015）: San Francisco
Apple WatchやiOS 9で導入されたSan FranciscoフォントがmacOSに採用された。Appleの統一フォントとして、UI全体に渡り使用。
macOS 10.12-10.15（Sierra-Catalina, 2016-2019）: San Francisco（継続使用）
SF Proに統一され、バリエーションが拡充。
macOS 11（Big Sur, 2020）以降: SF Pro
macOSのデザインが一新され、iOS/iPadOSとの統一性を持たせるためにSF Proが強化された。UIの細部やコンポーネントに合わせた最適化。UIの一貫性を維持しつつ、細部の改良。ダイナミックアイコンやその他の新機能で使い勝手を向上。
macOS 15（Sequoia, 2024）: SF Pro
最新のデザイン要素に合わせた改良。こちらはmacOS Sequoia Developer Betaをダウンロードして確認することができる。
・Chicago: 初期Macintoshのフォントで、独特のドットデザイン。
・Charcoal: Chicagoの後継として、よりモダンなデザイン。
・Lucida Grande: Aqua UIとともに導入されたサンセリフ体、視認性の高さが特徴。
・Helvetica Neue: 一貫した字形とバランスの取れたプロポーション。フラットなUIとの調和を意識。
・San Francisco: Appleの統一フォント。SF ProやSF Compactなど、デバイスやUIに合わせたバリエーションが存在。
個人的に、Mac OS X時代は全然知らなくて、あったなあくらいで、Windows全盛期だったですよね。でも初期のMacintosh時代はスティーブ・ジョブスの存在もあって関心ありますです。
Macintoshのアイコン、Chicagoのタイポグラフィ。正直小学校にあったデスクトップPCのモニターは画素数粗かったので、ドットフォントは可愛いと思っちゃいます。
また脱線します。冒頭に出したスーザン・ケアさんはMacintoshのためにタイプフェイスやアイコンをデザインされたグラフィックデザイナーさんです。Apple退社後にはNeXT社に加わり、Windowsのソリティアプロジェクトなどを経て、今はNiantecにいるそうです。なのでWindowsの無数のアイコンも彼女の残したものだと。凄まじい方ですね。こうなるとジョナサン・アイヴさんのことも話したくなります。我慢。
話を戻します。ChicagoからのMacintoshのフォント周りについて、2000年に書かれたブログ。めっちゃ面白いこと書かれてますが、ここまでいくとついて行けないような気持ちにさせられるし、当時を知らないので事実なのか検証することを諦めました。無責任でごめんなさい。Charcoalのことも書かれています。
Mac OS XのAqua UIで採用されたLucida Grandeは背が高いのが特徴でインテリジェントに見える。LucidaファミリーもたくさんあるGrande、サンセリフ体は結構好き。英語、ギリシア語、アラビア語、ヘブライ語。優しい印象だけど抑揚があってよき。
Mac OS X 10.0とMac OS X 10.9 Marvericksの画面。こう見るとmacOSに眠っているデフォルトのあまり使わないアプリはこの頃からアイコンがほとんど変わっていない。
調べていくとAqua UIをリリースする前、AppleはNeXTの遺産と言われたPlatinumというUIを使っていた。Macintoshに色彩が加わり、1988〜1996年までの統合を諸々進めて作られたものだそう。僕はこのUI好きです。
Aqua UIのコンセプトも書かれた記事です。なるほど、そしてここから5色のカラフルなiMacの時代に突入していくわけですね。
Mac OS X 10.10 YosemiteではHelvetica Neueが採用された。一部反対もあったそうで、El CapitanではSan Franciscoに変更された。
Mac OS X 10.11 El Capitanでは、遂にAppleとしてのフォントの統合を迎えることになる。iOS 8とOS X YosemiteはHelvetica Neue、watchOSはSF Compact。2015年6月のWWDCで、iOS 9とOS X 10.11からはSan Franciscoに移行された。
masOS 15 SequoiaやiOS 18で追加される800以上の新しいシンボルをサポートしたSFフォント派生のベクターシンボルSF Symbols 6のBeta公開に合わせて、San FranciscoとNew Yorkのフォントのアップデートを発表された。AppleはSF・NYフォントの詳細については公開していないものの、SF Proフォントは2023年に公開されたバージョン19.0d6e1から20.0d81へとアップデートされ、グリフ数も30,000を超えているので、サポート言語も追加されているとのこと。
そして小出しにした伝説のプロダクトデザイナー、ジョナサン・アイブについて。彼は2019年の終わりにAppleを退社して、それからの活動は謎に包まれていたが、2023年にはオーディオブランドのターンテーブルをデザインされていた。
SFへの統合
Appleのフォントにおける歴史を追ってみて、SFへの統合はデザインシステムの表現がしやすくなることもあり、然るべき流れだった。ここに載ってないフォントもたくさん扱ってきているし、拡張性がAndroidと比較すると劣ってしまっていたiPhoneも最近はカスタマイズできることが増えてきている。その1つがまさに好きなフォントが使えるようになったこと。僕はSF Pro（標準）が気に入ったので、しばらくは変わらないかな。
以上
この記事が気に入ったらサポートをしてみませんか？