拡張されたSan Franciscoフォントファミリの紹介

♪ ♪ こんにちは Vincenzoです Apple Designチームの タイプデザイナーです プラットフォームで使用される 多くのフォントファミリーの デザインと拡張を 担当するグループの一員です 優れたタイポグラフィを 可能にするために不可欠な 機能的で表現力豊かな フォント制作に力を注いでいます 今回はSan Franciscoの 最新情報をお伝えするとともに システムフォントの 最新追加機能をお伝えします まずは San Franciscoフォント ファミリーの概要からです 様々なファミリー スタイル オプティカルサイズについて ご紹介します 続いて SF Proの新しい 横幅スタイルを紹介します： Condensed Compressed Expandedです ユーザインターフェイスデザインで これらのスタイルを どのように なぜ選択するのか いくつかの例を挙げて説明します そして最後に San Franciscoの多くの機能を 他の文字体系に 導入することについて SF ArabicとSF Arabic Roundedを紹介します さっそくですが San Franciscoの概要から ご紹介しましょう San Franciscoは Appleがデザインした 機能的で汎用性の高いフォントファミリーで 私たちのプラットフォームの 至るところで使用されています San Franciscoは長年にわたり 製品や体験のエコシステムと 並行して成長し UIデザインのさまざまな ニーズに適応できる新しい スタイルとファミリーを 提供してきました 現在San Franciscoには iOS iPadOS macOS tvOSなど 当社の多くの プラットフォームで使用さる 主要なシステムフォントである SF ProやSF Pro Roundedなど 共通の視覚言語を持ちながら 異なる環境やApp向けに 特別に設計された 独自の機能を持つさまざまな フォントファミリーがあります SF Compactと SF Compact Roundedは 狭いカラムと小さなポイントサイズに 最適化されたSan Franciscoの種類で watchOSのデフォルト システムフォントでもあります そして 等幅のSF であるSF Mono： XcodeやSwift Playgroundsなど コーディング環境で使用されます これらのフォントファミリーを 組み合わせることで さまざまな文脈で テキストを表現するための 優れた機能性と表現力の 幅が生まれます ほとんどのSFファミリーは ウルトラライトからブラックまで 幅広いウェイトパレット を備えており 強調やタイポグラフィーの 階層を作るのに 十分な文体のバリエーションを 提供します ほとんどのフォントファミリーに 「Optical Sizes」が搭載され テキストのポイントサイズに 応じてフォントの デザイン機能を自動的に 調整することができます 例えば、「i」の上にある ドットを基本形から遠ざけたり 特定のグリフの 開口部を開いたり 小さいポイントサイズのテキストを 徐々にトラッキングアウトするなどです これらの調整により 異なるポイントサイズに適合する 独自のデザインを 生成するフォントを ディスプレイとテキストの 両方のタイプセット （大と小のテキストを参照する タイポグラフィ用語）に最適化します San Franciscoフォントは 全てのAppleプラットフォームで 一貫して読みやすいインターフェイスを 描写するコントロールと柔軟性を与えます これらはSFの ハイライトですが 他にもたくさんあります Optical Sizes Variable fonts Dynamic Typeについて もっと深く知りたい方は WWDC 2020の「UIタイポグラフィー の詳細」をご覧下さい さて 今日はSF Proに 焦点を当てますが SF Proはユーザインターフェイス をデザインする素晴らしいツールです ウェイトやオプティカルサイズは 多くのデザイナーのニーズをカバーしていますが ウェイト軸や オプティカル軸だけでは 満たすことのできない 特定のタスクがあります 例えば写真Appでは 「思い出のタイトル」の 文体バリエーションを拡充しています 「ニュース」では SFが見出しの エディトリアルボイスとして 表現力豊かでスペース効率の 良いスタイルで提供します そして最後に地図ですが 文体の選択肢を増やすことで タイポグラフィのコントラスト と読みやすさを向上させました そこで 新しい機能を 設計することで SFの能力を さらに拡大しました 「ウェイト」と「視覚サイズ」 はすでに用意されており 「幅」の軸を 追加することは SFの自然な進化でした 幅が狭くスペースをとらない 「Condensed」 SFの中で最もコンパクトな 「Compressed」 そしてその反対の 「Expanded」です これらはSFに新たに 追加された幅で 「ウェイト」と組み合わせることで さまざまな選択肢が生まれ 様々な用途に対応できるよう 新たな声と 機能性を提供します どのスタイルも それなりに機能的ですが 設計意図によって より優れた 性能を発揮するものがあります タイポグラフィーに 絶対的なルールはありませんが SFのスタイルマップの 中心に位置するスタイルは よりニュートラルな声を持ち 周辺に位置するスタイルは 極端なウェイトと 幅の比率を特徴とし より表情豊かで強い声を持ち UIの特定のエリアに 人々の注目を集めたい場合や タイポグラフィック 階層を強化する場合に 役立つ属性であると 考えてよいでしょう これらのスタイルに共通する 特徴やユニークな点を探り フォントの選択と組み合わせの プロセスにおいて より多くの情報を得るための 方法を学びましょう まず最初に すべてのスタイルが 同じ言語をサポートしており 英語からベトナム語まで ラテン文字を使用する ほとんどの言語の タイプセットに使用ができます しかし ギリシャ語やキリル文字を ベースにした言語もあります すべてのスタイルに 共通しているのは 縦方向の比率で ウェイト間の視覚的なスケールの ズレをなくすよう配慮しています フォントの交換や混合を 予測しやすくする機能で 異なる幅スタイルを使用する場合 幅自体にのみ焦点を当てられます 事実 グリフの水平方向の 比率のみが変わり その副産物として 線の長さも変わります 徐々に細くなっていく プロポーションは 各スタイルの特徴である 軸の太さの関係を際立たせ 多少の視覚的 調整はあるものの ほぼ一貫したスタイルを 保っています その代わり グリフ内部の ネガティブエリアは より劇的な変化を見せ Widthスタイルによって よりタイトになったり ワイドになったりします このバランスは フォントの読みやすさだけでなく 個性に関してもスタイル的 機能的な意味を持っています それぞれのスタイルについて いくつかの注意点を挙げます Regular幅が最も一般的で 汎用性の高いスタイル であることは 驚くに値しないでしょう スタンダードなプロポーションで 文字が読みやすいのが特徴です 他の幅が提供する 機能が必要ない場合は Regular幅を 使用することができます Condensedは Regularタイプに比べ幅が狭く見え 快適な幅を持ち 存在感がありすぎずに より多くの文字に対応できます Compressedは 非常に密度の高いプロポーションと フラットなサイドシェイプが 特徴で これにより デザインはよりタイトになり 非常にスペース効率が 良くなっています そして最後に紹介する Expandedは ルーズでオープンな 外観が印象的で Displayタイプセット だけでなく 小さなラベルや セカンダリコンテンツにも使えます 同じテキストを 同じウェイトで 異なる幅でタイプセッティング している様子を見ることができ この新しいスタイルの 最も明白な使用例の一つである スペース効率に 注意を促しています 同じポイントサイズでも SFが タイトに見えたり ワイドに見えたりします また Condensedや Compressedは タイトルや 見出しを扱うときに 非常に便利です 幅寄せスタイルは長い文章を 制御するのに役立ち 1行により多くの文字を 収めることができるため 理想的で快適な 読書体験を実現するため 狭いカラムにも 対応できるようにしました 段落を長さ調整くしたり レイアウトの スペースを埋め空けできます この例ではCompressedスタイルが 小さな一行にはまだ 機能的であっても このような長い文章には きつすぎると強調されています Regular幅以外を選択する場合 常に読みやすさを考慮しましょう これらの新しいスタイルの 主な特徴を見たところで Appのタイポグラフィを 改善 拡張するのに 役立ったいくつかの 例を紹介しましょう まず 写真から 見てみましょう 新しい幅のシリーズと 他のスタイルにより 思い出のタイトルが さらに視覚的に面白くなり UIの他の部分から コンテンツを区分し 浮かばせるテキスト処理が 施されています よく見ると スケールの違いによって タイポグラフィの 階層が形成され どちらが主情報で どちらが従情報なのかが 明確に示されています CompressedとExpandedのような 対照的な2つの幅スタイルが テキストをよりユニークで視覚的に インパクトのあるものにします SFのワイドスタイルとCondensedスタイルを 異なるウェイトで組み合わせることで フォントの組み合わせは 無限に近いほど多様になります 例えば 幅のスタイルを 1つだけにして （この場合はExpanded） ブラックとライトのように対照的な 重さを使用することができます 1つのウェイトを選び ExpandedとCompressedのように 対照的な幅を使い分ける ことも可能です 幅とウェイトを反対にすることで 両方のアプローチを組み合わせ さらにコントラストを 際立たせることができます SF Pro Rounded SF Mono そしてセリフ系フォントの New Yorkなど 他のSan Franciscoファミリー と合わせて 新しい幅スタイルが 可能な世界を広げます ニュースでは Appのエディトリアル コンテキストを補完するだけでなく 幅のスタイルによって 柔軟性と実用性を高めました この例のように Condensedを使用すると 長い見出しをを5行から 4行にまとめることができ さらにCompressedを 使用すると タイトルを3行にまとまり スペース効率が良くなります レイアウトに かなりの余裕を持たせ タイトルを立たせることで より個性を出しています 見出しと対比させるために 使用されるExpanded幅が キャプションや傍線に どう馴染むかにも注目しましょう このスタイルの 水平方向の比率の広さと 緩やかなトラッキングの 組み合わせは 山脈のような大きな 地理的領域を表現するのに 完璧に機能します しかしもちろん 地図製作は 山だけではありません 「地図」は他の幅のSFを採用することで 豊かなタイポグラフィを実現し 互いに首尾一貫した スタイルでありながら 多様で対照的な 道路　国　大陸など あらゆる種類の ラベルを読みやすく 見分けやすくしました 多くの場合 2～3種類の スタイルで効果的な階層を デザインすることが できますが SF Proがいかに凝った グラフィックシステムにも 対応できるかを示す 素晴らしいデモです これらは新しい幅スタイルを 活用するほんの一例に過ぎません 機能性と表現力の 幅が広がり SF Proはさらに 強力なコミュニケーション ツールになりました しかし タイポグラフィの 大きな力には大きな責任が伴います フォントは インターフェイスを 美しくするためのデザインツールで 最も重要なのは読みやすく アクセスしやすいことです 新スタイル Compressed Condensed Expandedの 考察を簡単にまとめます 特に新しい幅スタイルでは レイアウトを過去にないレベルで制御でき テキストの幅を 広げたり狭めたりすることで App内のタイポグラフィ要素を 効率的にデザイン 配置できます 幅 サイズ 色に加え 新たに幅スタイルが追加され より明確で正確な タイポグラフィの階層作成の スタイルオプションが 用意されました ウェイトと幅の 比率がより高いフォントは ディスプレイポイントサイズに 最適な表現力を持ち タイトルや見出しをUIの 他の部分より際立たせられます すべてのSF Proフォントは ラテン文字 ギリシャ文字 キリル文字を使用する ほとんどの言語をカバーます しかし ローカライゼーションは Appの重要な要素であり 前述のシステム以外の 複数の文字システムで 一貫した体験を 提供しようとする場合 Appのローカライゼーション を支援する 代替ソリューションを確認し 予備プランを用意しておく 必要があります ここまでシステムフォントの 新機能を様々見てきましたが まだ終わりではありません もうひとつ ファミリーが 広がる方法があります Appleでは 世界中の人々の ためにデザインしています 私たちの機器は 色々な文字や言語を読み書きする 世界中の人々に 利用されています フォントは 多言語間で スタイルと機能の両方が 一貫している インターフェイスを設計する上で 大きな役割を果たし テキストを含む多くの グラフィック要素に整合性を与えます これらの画面の 大きなタイトルや テーブルの行 ボタン プラッター アイコンラベルなど いたるところにテキストが 使われています ウィジェット キーボード タブバー その他多くの言語で テキストが表示されます! これらの原則を取り入れ 最高レベルの一貫性を実現できる 分野のひとつが 自己完結型で 究極のローカライズ体験を 実現するために 私たちがデザインした フォントを使用できる体験です Macのスクリーンセーバは 象徴的な「こんにちは」の筆記体で 日本語やその他多くの言語で あなたを迎えることができます iPhoneで アラビア数字 アラビア数字 デーヴァナーガリー数字で 同じ書体で時刻を 表示することもできます 新しいチャイニーズ インデックスを含む 5種類の数字セットを 搭載した タイポグラフ文字盤 でも同様です より幅広い用途に対応すべき システムフォントにも 同じレベルの一貫性を 持たせたいと考えています その為に San Franciscoの 言語的なカバー範囲を広げ 他の文字体系にもウェイト や視覚サイズなどの機能の 恩恵を受けられるようにし どのプラットフォームでも どの文字や言語でも 同じtifで 視覚的に魅力的かつ 快適な読書体験を 提供することが必要です 昨年 アラビア語の 新システムフォント SF Arabic を導入したのを皮切りに このような展開が 始まっています SF ArabicはSan Franciscoの 他のファミリーと シームレスに統合されるよう 設計しました SF Arabicは ナスク語を 現代的に解釈した 合理的で柔軟なデザインで ラテン語 ギリシャ語 キリル文字 に続く最新の文字体系で Appleプラットフォームで 利用できる 最先端のフォント技術の 恩恵を受けています 他のSan Francisco ファミリーと同様に UltralightからBlackまでの 全ウェイトを搭載し 9つのウェイトはそれぞれ SFでサポートされる 他のスクリプトや言語との 適合性と組み合わせに 細心の注意を払って 設計されています また SF Arabicには アラビア文字専用の 視覚サイズが 付属しています フォントがストロークの コントラストと端末と間隔を 自動的に調整し ディスプレイサイズとテキストサイズの間で デザインを適応 拡大縮小 できるようにします テキストスタイルは 読みやすさと親しみやすさを追求し ストロークのコントラストを上げ 間隔を広くしています ディスプレイのスタイルは よりシンプルなジオメトリデザインに変化し San Franciscoのクリーンで 現代的な外観と調和しています これらすべてを システムが自動的かつ 動的に処理することで あらゆるサイズで快適な 読書体験を可能にしています ラテン語や キリル文字と同様に アラビア文字は 多言語性が高く アラビア語だけでなく ペルシャ語 パシュトー語 シンド語など さまざまな言語の 表記に使用されますが いずれもSF Arabicに 対応しています SF Arabicは 発声 音調 詩的なマーク 拡張母音記号 敬語 クルアーン注釈など 豊富な文字セットを サポートしています そして今年は San Franciscoの新しい仲間 SF Arabic Roundedを 紹介できることを うれしく思います SFアラビックの 特徴をそのままに 充実したウェイトと視覚 サイズを搭載しています 新しいRoundedデザインは 多くのAppやUIを豊かにします リマインダや フィットネスAppなどです SF Arabicの 文体の幅を広げ 他のシステムフォント と合わせて Appleプラットフォームのアラビア語 タイポグラフィをモダンでクリア 洗練させます 新しいSF Arabicフォントを 実際に見てみたい方や アラビア語ユーザ向けの Appデザインと最適化について もっと知りたい方は モハメド氏のセッション 「アラビア語デザイン」をご覧ください 最新のSF Pro SF Arabic SF Arabic Rounded その他すべての フォントファミリーは developer.apple.comのサイトから ダウンロードすることが可能です 以上で このセッションは 終了です システムフォントの 最新情報を 楽しんで いただけたでしょうか？ ご視聴ありがとう ございました チャオ！