UIタイポグラフィーの詳細

UIタイポグラフィーの詳細

読みやすさや、アクセシビリティ、Appleプラットフォーム全体における一貫性を強化する卓越したタイポグラフィーをAppのユーザーインターフェース内で実現する方法について学習します。視覚上のサイズやウェイト調整を容易にする可変フォントへの動きを含め、San Franciscoフォントファミリーの最新の進化の内容について把握しましょう。システムフォントを最大限利用する方法や、カスタムフォントでDynamic Typeをサポートする方法についてのコツも公開します。San Franciscoフォントファミリーの背景となる原則について、知識を改めたい方は、WWDC15の"Introducing the New System Fonts"をご参照ください。

リソース
関連ビデオ

WWDC22
- 拡張されたSan Franciscoフォントファミリの紹介
WWDC20
- SF Symbols 2
- SwiftUIの新機能
WWDC19
- SF Symbolsの紹介
こんにちは WWDCへようこそ
“UIタイポグラフィーの詳細” 私はロイック･サンダーデザインチームの書体デザイナーです同僚のジャンと一緒にインターフェイスのタイポグラフィーの細部とアプリケーションに用いるためのツールを紹介します本日のトピックスはプラットフォームでのテキストのダイナミックな挙動の理解ですまずはフォントとインターフェイスのデザインについて話しますジャンからは便利なAPIとタイポグラフィーのよい事例を紹介します文字はフォントとサイズを選ぶだけでいいと大抵の人は考えるでしょうしかし実際のところ― テキストのサイズを変えるとさまざまな結果が生まれますオプティカル･サイズについて学ぶことで読みやすさをより理解できます
次にバリアブルフォントについて少し話しますプラットフォームでのテキストの挙動を向上しアプリケーションのタイポグラフィーを改善します
そしてインターフェイスのデザインに影響するトラッキングとレディングの話をレイアウトには不可欠なのでこの機会にぜひ知っておいてくださいジャンがテキストスタイルと Dynamic Typeを説明しますすばらしいデザインをかなえるツールです新しくないAPIもありますが最新の情報をお伝えしますでは始めましょう “オプティカル･サイズ” まず数年前のことから説明していきますシステムフォントの San Franciscoが開発された時です我々の目標はすべてのサイズの見た目のよさでした２つのバージョンを加えて目標を達成しましたサイズが20ポイント未満のSF Textとそれより大きいSF Displayですこれらがオプティカル･サイズです
文字がさらに読みやすくなります例えば SF TextとSF Displayの文字間隔はそれぞれのサイズに合わせて変えられます
それぞれの縦の比率も少し違います同じサイズでも SF Textのほうが少し大きく見えます小さいサイズでも読みやすいです
このデザインの発表はちょっとしたレボリューションでしたが “レボリューション”という言葉は面白い前進を意味すると思いがちですが “初めに戻る”の意味もありますオプティカル･サイズは活版印刷の時代から存在します何世紀も変わらない道具も含めて― 印刷工程もそのままですデジタル技術は柔軟性をもたらしましたがタイポグラフィーは昔ほど洗練されていませんそこで本来のオプティカル･サイズをご覧ください僕は活字と歴史好きでこの18世紀の本を持っていますいわゆる活字見本ですさまざまなサイズが載っています２つの例をお見せしますデザインは同じでサイズが違います SF TextとSF Displayのようです現代の印刷なら８ポイントと42ポイントくらいです
それぞれの文字サイズに合わせて金属の活字を手作業で作りました
スチールの型を使って活字の文字が作られますスチールの型は鋳造の過程で使われます型に金属を流し入れ金属の活字が出来上がります
細部を見ていくと手作業への物理的なサイズの影響が分かります８ポイントはサイズが小さいのででこぼこですオプティカル･サイズの点では変形が難しいということです
金属とインクで紙に印刷するという挑戦への鋳型職人の闘いとも言えます我々にとってはピクセルグリッドに― ラスタライズされたベクター画像の挑戦ですしかし出力の種類に関係なくオプティカル･サイズの変化は読みやすさと細部のバランスですこの２つは無関係でなく読みやすさは細部で決まります SF TextとSF Displayと同様に文字間隔が重要な細部です
文字が小さくなるとより間隔が必要ですそうすれば見分けやすくなります文字の形にも意味のある細部があります文字の細い部分はサイズが小さくなると目立つ必要があります
例えば“i”の点の位置が間違っていると思うかもしれませんしかしこれは意図的なもので小文字の“l”と間違わないためですインクでもピクセルでも隙間が狭いと埋まりやすくなります
相対的なサイズが関係しています意図された縮尺比率を見ていきましょうデザインの違いはそれほど目立ちませんそれがオプティカル･サイズの目的です読みやすさと見た目が釣り合い― デザインが縮尺と調和していますデザインを縮尺に合わせることは数世紀前は直接の作業でした実寸で作ったからですそれに対してデジタルは不運な問題に直面しました
ベクター画像の縮尺はほぼ無限でデジタルフォントでは各グリフの描画は１つだけです書体デザイナーは理想のサイズを選ぶ必要があります使用するフォントには効果を発揮するサイズがあります
複数サイズに適応したマルチプルなフォントも作れますしかしお勧めしません作業が大変で何よりも― 使いにくいフォントファミリーになります熟慮して San Franciscoを作りオプティカル･サイズを２つだけ持つことにしました
OSは２つのデザインを自動で切り替えられるからですそしてSF TextとSF Displayを公開することにしましたこの数年プラットフォームで最先端の機能でしたがもっと改善したいと思っていました TextとDisplayを切り替えなくても１つのフォントが各サイズに自動で適応すればすばらしいこれは数年後に可能になりました 2016年に発表したバリアブルフォントは OpenTypeの仕様を発展させたものですウェブフォントの人気の高まりと既存のフォントのフォーマットの限界への挑戦から作られましたフォーマットはグリフの収録方法を変えますグリフは１つの静的描画に限定されません関連している別のグリフを作る各ポイントの動きを記述しますこの動きはデザインの軸と結びつきソフトウェアが挙動をコントロールしますこれらの軸の１つがオプティカル･サイズの実行に関わっています SF Proをアップデートし既存のオプティカル･サイズを改良できましたこの新しい挙動の可能性はセリフ体のNew Yorkで示されますサイズへのさまざまな適応が目立ちます
オプティカル･サイズのおかげで縮尺に完璧に合った書体をデザインできます昔の活字の優れた点を取り戻しています今年は個別のフォントとしてのオプティカル･サイズから変わりますオプティカル･サイズだけでなくウエイトも統合されます大部分のシステムフォントは１つのバリアブルフォントとしてダウンロードされます移行緩和のため今年も TextとDisplayのフォントを公開しますデザインツールにはバリアブルフォントの新しいコントロールがあります大抵はパブリックな軸のスライダです
しかしこれは任意で事前登録されたフォントではいつもどおり使えますシステムフォントを使う場合は事前登録のフォントのままがいいです
オプティカル･サイズをサポートしている場合は特定の範囲のサイズを対象とした専用のスライダがあります使用しているポイントサイズに応じてスライダの値は変わります
アプリケーションによってはコントロールの値が自動で変わりません
スライダの値が適していない時は自分で設定する必要があります
ポイントサイズが大きくても問題ありません一番近い値に設定してください以前のOSでツールを使う場合はバリアブルフォントが使えないかもしれませんその場合は以前のように SF TextとSF Displayなど個別のオプティカル･サイズを使ってください
コードではこの挙動は自動ですオプティカル･サイズとポイントサイズを同期させていますシステムフォントに適応しますオプティカル･サイズの軸があればカスタムバリアブルフォントにも適応しますサイズごとのタイポグラフィーの最新情報はここまでですインターフェイスのテキストレイアウトをお話ししますトラッキングとレディングです
トラッキングはサイズごとのタイポグラフィーに不可欠ですオプティカル･サイズの説明をしましたが話してないことがありますトラッキングと組み合わせるとオプティカル･サイズは効果が出ますまずはトラッキングの説明をします最初にフォントのグリフを見ましょうある程度のスペースを組み込んでいますこのスペースはサイドベアリングですグリフの描画でデザインされデフォルトの間隔を決めます
しかしテキストはどのサイズでもよく見える― 文字の間隔を必要とします
文字間隔を取りそれを調整するのをトラッキングと呼びます CSSでのように文字間隔と同義ですがレイアウトでグリフの間にスペースを入れることを特に指します困惑している人もいるでしょう “カーニングだと思っていた”と
混同しがちですがトラッキングとカーニングは違います
カーニングは文字と文字の間の調整だけです書体デザイナーが調整するもので開発者が修正する必要はほぼありませんトラッキングに戻って― San Franciscoでの使い方を説明します
SF TextやSF Displayのようにサイズごとにスペースを調整する時でもトラッキングならうまく調整できます
トラッキングを使わず 20ポイントでフォントを切り替えると SF TextとSF Displayのスペースの違いが問題になります
青の最後の行とオレンジの最初の行はほとんど同じ長さですしかしポイントサイズは違います
デフォルトのスペースが違い― 急激な変化のためにトラッキングとオプティカル･サイズを使いますシステムフォントの挙動には不可欠な部分ですそこでトラッキングテーブルを Apple Design Resourcesで公開していますシステムフォントの挙動を正確に再現したいならトラッキングの適用の度合を知る必要があります今年はSF Proがバリアブルフォントになり 20ポイントに大きな変化はありません 17～28ポイントの間でデザインがTextからDisplayへ移行します挙動に基本的な変化がありトラッキングテーブルをアップデートしました新しいSF Proを使う時には 17～28ポイントのトラッキングの値の新しいセットを適用してくださいトラッキングのグラフを見てもう１点お伝えしますフォントには複数のトラッキングテーブルが入りますそれでトラッキングの値を加え文字列の調整も可能になります文章が途切れているとします
よくある解決策はカーニングのAPIでしょうかしかしカーニングは理想的でありません
トラッキングのAPIのほうがいい意味的に正しいですそれにトラッキングと相性が悪い合字などのタイポグラフィーの特徴の使用を停止できます
合字のある単語をカーニングAPIでトラッキングすると合字は残り単語のリズムが崩れますしかしトラッキングAPIは合字を切り離せます文字の間隔も均一です
しかし望ましい最良の解決策は自動的に間隔が狭くなることですタイトなトラッキングテーブルを使いますこのAPIでは読みやすい範囲内でシステムが文字列を調整しますトラッキングしすぎる場合があるからですそういう場合は途切れたままでいいでしょう
このAPIはサイズごとのトラッキングを適用します自分でトラッキングするなら手動で実行します “ドキュメントのフォントのトラッキング” それでは最後に少し告知を他社製のフォントもトラッキング可能にしました “trackとSTATのテーブルを含むすべてのフォント” フォント販売者は自分のフォントにテーブルを追加できますフォントにSTATのテーブルが含まれれば埋め込みのトラッキングがプラットフォームで可能です
kCTFontOpticalSizeAttributeの適用で古いOSでトラッキングデータと使えます
グリフの間のスペースは見ましたが次はラインの間のスペースについて考えましょう
再び言葉の意味から用語を明確にしていきます最初はラインハイトです
ラインハイトはフォントの縦方向の幅ですベースラインの間を測っても構いませんどの測り方でも長さは同じです
ラインの間の距離が増加しその間のスペースがレディングです
余談ですが名前は金属の活字時代に由来します活字の間に鉛の板が入っていたことからです
ラインの間にレディングがある場合はラインハイトにレディングが含まれます一方の値が変わればもう一方の値も変わります
レディングとラインハイトに困ることはほとんどありません大部分のインターフェイスの要素で設定済みですしかし修正の例を２つお見せしましょう
アラビア語による記述です上下に伸びる部分が多いです周りの線を越えていくかもしれませんその場合レディングを加えるのがいいでしょう
アラビア語など高いラインハイトの言語ではプラットフォームにレディングを増やしています
狭いレディングが役立つこともありコンパクトな表示になります watchOSでは狭いレディングを多用し最大限の情報を表示しています
テキストスタイルを使用した調整です後ほどジャンが説明します
この２つは我々の取り組みを示すよい実例となったと思います既存のシステムAPIで毎年のデザインの改良を利用できます新しいAPIは導入しやすいものを目指していますアプリケーションを向上してくれますジャンに引き継ぐいいタイミングですパワフルなフォントとテキストのAPIを紹介してくれますありがとうロイックタイポグラフィーの詳細に関する話の後はテキストスタイルとDynamic Typeの話ですこれらのシステムツールは一貫したタイポグラフィーを作成するのに役立ちます
テキストスタイルは Appleのインターフェイス構築の基本です柔軟で一貫したタイポグラフィーを実現する枠組みとして― 明確な階層と幅広いスタイルを備え大半のインターフェイスに対応できます
テキストスタイルは― システムフォントのウエイトポイントサイズレディングを組み合わせて定義したものですこのシステム機能はタイポグラフィーの階層を提供し― 読みやすいレイアウトを実現する助けになります
テキストスタイルには情報の階層を表せるよう幅広いフォントサイズがありますが― 細かな違いを表すのにサイズだけでは不十分なことがあります
例えばこれは“カレンダー”の年と月です標準のテキストスタイルより文字が太いですね強調版のテキストスタイルを使うと同じサイズでウエイトを変えられますシステムアプリケーションではよく見かけます例えば “メール”のタイトルバーで使っているのは― 強調版のタイトル用テキストスタイルですアプリケーションでの使用方法を紹介しましょう
title1フォントのラベルがあるとしますこのタイトルを強調するためウエイトを“bold”にします強調版のtitle1は次のようになります
UIFont preferredFont(withTextStyle:) APIの代わりに― UIFontDescriptor APIで title1スタイルの記述子を取得します boldシンボリックトレイトを適用すると強調版のtitle1スタイルになりますこれはSF Pro Boldに対応します
boldをNSFontやUIFontやSwiftUIフォントに使い強調版のフォントを作成できますこのシンボリックトレイト名は“bold”ですが実際のウエイトはテキストスタイルによって違います “medium”“semibold”“bold” また“heavy”もありますテキストスタイルにはラインハイトがあり大抵は適切な幅になっていますしかしスペースが限られる場合は― 行間を狭めることで情報の密度を高められますフィットネスアプリがいい例ですあるいは多くのテキストを表示する時― 読みやすさのためにもう少し空間が欲しいことがあるでしょう “マップ”などがそうですこれにはテキストスタイルのレディングで幅を調整します iOSとmacOSでは狭いレディングを使うとラインハイトが２ポイント減り― 広いレディングを使うと２ポイント増えます watchOSでは増減幅は１ポイントです
長い段落を考えてみましょう使っているのはbodyテキストスタイルです今ラインハイトは22ポイントですが― この幅を狭くするとどう見えるか試してみます分かりますね TightLeadingシンボリックトレイトを適用すると― ラインハイトは20ポイントになりますこれは長い段落には狭すぎるように見えるので― 今度は広いレディングを使います LooseLeadingトレイトで 24ポイントにしました見やすいですね強調する時に行ったことと同様の処理です今度はTightLeadingとLooseLeadingの― シンボリックトレイトを使いました今年からテキストスタイルのレディング調整は SwiftUIでも可能です
Appleはシステムとアプリケーションに New YorkとSF Pro Roundedを使っています “ブック”と“リマインダー”の例ですこれらは単独のタイプフェースとして使われるほか― テキストスタイルとも連動します
リマインダーのようなラベルを作りたいとします強調版テキストスタイルを使ってみましょうテキスト“Today”にタイトル用の強調版テキストスタイルを使います今これはSF Pro Boldです
FontDescriptor withDesign APIで丸いデザインにしましょうフォントはSF Pro Roundedに変わります
柔軟なAPIを使ってこうしたデザインを― どのシステムUIフォントにも適用できます AppKitとUIKitでは FontDescriptor withDesign APIをどのUIフォントにも使えます
SwiftUIの場合 APIは少し違いますフォント作成時に最初にデザインを渡し― 修飾子を使った既存フォントの変換は行いませんテキストスタイルをデザインと指定する時― デザイン以外の要素は変わりませんフォントサイズウエイトラインハイトは同じですウェブページやアプリケーションのウェブ表示を扱う方も多いでしょう Webkitへの“-apple-system” フォントファミリーの導入以来― CSSではSan Franciscoを使用できますこれは広く普及しました
今は“-apple”のない “system-ui”が標準名です今年初めには新しい CSSフォントファミリー名として― “ui-rounded”“ui-serif” “ui-monospace”なども加わりました今年からテキストスタイルのAPIは macOSでフルサポートされています AppKitでCocoaアプリケーション向けに導入された新しいAPIは― iOSと同様にあらゆるテキストスタイルに対応しますフォントサイズはmacOSテキストに沿って調整され― Dynamic Type未対応ながらテキストスタイルの他の利点を活用できます去年紹介したCatalystアプリケーションのテキストスタイルサイズは― iOS向けに77％縮小したサイズです今年 CatalystアプリケーションのインターフェイスがMac用に最適化され新しいテキストスタイルサイズが定められました
77％版に近いサイズなので― アプリケーションの変更は最小限で済みます
“Scale Interface to Match iPad”を選ぶと 77％のiOSサイズを引き続き使用できます新しい動作をご希望なら― “Optimize Interface for Mac”を選びます
iOSにはテキストスタイルの新機能 Dynamic Typeが加わりました設定に沿ってフォントを自動的に拡大縮小する機能です
Dynamic Typeを使うとテキストスタイルのサイズを調整できますテキストが読みやすくなるのでアプリケーションでの Dynamic Type対応をご検討ください
システムフォントAPIとテキストスタイルを併用すると― iOSでこの動作が自動的に実現します Dynamic Typeはカスタムフォントにも使えますその方法を紹介しましょう
この表は多くのことを示していますまず拡大縮小の動作は― テキストスタイルによって違います bodyとtitle1とfootnoteを Dynamic Typeで拡大縮小するとこうなります Dynamic Typeをカスタムフォントに使う場合もここに注意が必要ですタイポグラフィーはブランドの個性を表す重要なものです多くのアプリケーションは専用にデザインしたカスタムフォントを使うと思いますが― アクセシビリティのため Dynamic Typeへの対応も必要です
iOSシステムアプリケーションと同様にテキストサイズの設定変更にアプリケーションを対応させるには？
これはたびたび出る話題なので以前のセッションの内容を再び紹介します iOS 11から UIFontMetricsクラスが導入されていますこのクラスでテキストスタイルの Dynamic Type機能を取得し― 任意のフォントに適用できます
使用例を見てみましょうまず標準のUIFont APIで通常どおりカスタムフォントを指定します次にbodyテキストスタイルから UIFontMetricsを作成できます bodyMetricsオブジェクトにより scaledFont APIの生成フォントは― テキストサイズの設定変更時 bodyと同様に拡大縮小します
この方法はカスタムレイアウトの定数値を拡大縮小するのにも使えます例えばこれはラベル間のスペースの指定です SwiftUIのデベロッパからはリリース以来多くの反応があり― 今年 SwiftUIでもUIKitと同様のフォントの拡大縮小が可能になりました例えばこのSwiftUIの ContentViewのテキストは― テキストサイズの設定変更に合わせてこのように拡大縮小されます
このテキストを“Avenir-Medium”の 34ポイントにしてみましょう指定したとおりにフォントが適用されましたしかしiOS 13ではカスタムフォントを使うと― Dynamic Typeに対応できなくなる問題がありました
iOS 14ではこの問題は解決していますタイトルとして適切に拡大縮小されるか確かめるため― relativeToで titleスタイルと相対的に拡大縮小させてみます
タイトルテキストが自動的に拡大縮小されています
次は本文テキストを追加しますタイトルテキストを追加する時と同様にテキスト段落を宣言し― VStackでTextに割り当てます
relativeToパラメータは不要です iOS 14ではカスタムフォントは― デフォルトでbodyスタイルと相対的に拡大縮小されます
タイトルも本文も自動的に拡大縮小されていますね本文テキストの周囲にパディングが欲しいところです画面の端とタイトルに近づきすぎています
パディングを追加しましょう 20ポイントの固定サイズを指定してみます
よくなりましたパディングもテキストサイズに合わせて拡大縮小させたいと思います新しいScaledMetricプロパティラッパーでパディングを値“20”で定義しますが―
bodyスタイルと相対的な拡大縮小も可能です
動作を見てみましょうテキスト周囲のパディングも固定でなく相対的に拡大縮小しています
今お話ししたことをまとめましょう font custom APIの新しい任意のパラメータ relativeToで― 拡大縮小の基準とするテキストスタイルを指定します指定しなければ bodyが基準になりますこれはiOS 14での動作変更です拡大縮小しない固定サイズのカスタムフォントは fixedSizeパラメータで作成できます
UIFontMetricsの時と同じように定数も拡大縮小するには― ScaledMetricプロパティラッパーを使いますいろいろお話ししましたが最後に基本原則をお伝えしておきます Appleのシステムフォントは高品質で幅広いスタイルがあります “SF Pro”“SF Pro Rounded” “SF Mono”“New York”などを― ぜひ使ってみてください
タイポグラフィーに重要な階層の構築にはテキストスタイルを活用できます
カスタムフォントを使う場合も多くの方法でDynamic Typeに対応でき― アクセシビリティに有効です
今日はタイポグラフィーの重要な要素の話もしましたデフォルトのシステム動作から変更するのは例外的な場合のみとしましょう
インターフェイスでカスタムのトラッキングを使う場合サイズを限定します小さいサイズのトラッキングは大きいサイズに合わないことがあります Appleプラットフォームでのテキストの動作を理解し― テキストとフォントのAPIをアプリケーションのタイポグラフィー向上にご活用ください

// UIKit
label.attributedText =
    NSAttributedString(string: "hamburgefonstiv",
        attributes: [kCTTrackingAttributeName as NSAttributedString.Key: -0.5])

// SwiftUI
Text("hamburgefonstiv").tracking(-0.5)

12:45 - Allow tightening to use tight tracking from system fonts

// UIKit: UILabel
label.allowsDefaultTighteningForTruncation = true

// AppKit: NSTextField
textField.allowsDefaultTighteningForTruncation = true

// SwiftUI
Text("hamburgefonstiv").allowsTightening(true)

17:45 - Getting emphasized text styles

// Getting emphasized text styles

let label = UILabel()
label.text = "Ready. Set. Code."

if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .title1)
    .withSymbolicTraits(.traitBold) {
    // 28 pt Bold on iOS
    label.font = .init(descriptor: descriptor, size: 0)
}

18:05 - Getting emphasized text styles APIs

// Getting emphasized text styles

// AppKit
let descriptor = NSFontDescriptor
    .preferredFontDescriptor(forTextStyle: .body)
    .withSymbolicTraits(.bold)
// 13 pt Semibold on macOS
let emphasizedBodyFont = NSFont(descriptor: descriptor, size: 0)

// UIKit/Catalyst
if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .body)
    .withSymbolicTraits(.traitBold) {
    // 17 pt Semibold on iOS
    let emphasizedBodyFont = UIFont(descriptor: descriptor, size: 0)
}

// SwiftUI
let emphasizedFootnoteFont = Font.footnote.bold() // 13 pt Semibold on iOS

19:34 - Getting tight leading variant

// Getting tight leading variant
import UIKit

let label = UILabel()
label.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .body)
    .withSymbolicTraits(.traitTightLeading)
    // 20 pt line height
    label.font = UIFont(descriptor: descriptor, size: 0)
}

19:49 - Getting loose leading variant

// Getting tight leading variant
import UIKit

let label = UILabel()
label.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .body)
    .withSymbolicTraits(.traitLooseLeading)
    // 24 pt line height
    label.font = UIFont(descriptor: descriptor, size: 0)
}

20:03 - Getting tight/loose leading variant APIs

// Getting tight/loose leading variant

// AppKit
let descriptor = NSFontDescriptor.preferredFontDescriptor(forTextStyle: .headline)
    .withSymbolicTraits(.tightLeading) // Use .looseLeading for loose leading font
let tightLeadingFont = NSFont(descriptor: descriptor, size: 0) // 14 pt line height

// UIKit/Catalyst
if let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .title1)
    .withSymbolicTraits(.traitTightLeading) { // Use .traitLooseLeading for loose leading
    let tightLeadingFont = UIFont(descriptor: descriptor, size: 0) // 36 pt line height
}

// SwiftUI
// Use .loose for loose leading font
let tightLeadingFootnoteFont = Font.footnote.leading(.tight) // 16 pt line height on iOS

20:56 - Access rounded system font design

// Access rounded system font design
import UIKit

let label = UILabel()
label.text = "Today"

if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .largeTitle)
    .withSymbolicTraits(.traitBold)?
    .withDesign(.rounded) {
    // SF Pro Rounded Bold
    label.font = UIFont(descriptor: descriptor, size: 0)
}

21:08 - Access system font designs

// Access system font designs

// Use .serif for New York, .monospaced for SF Mono

// AppKit
let descriptor = NSFontDescriptor.preferredFontDescriptor(forTextStyle: .body)
    .withDesign(.rounded)
let roundedBodyFont = NSFont(descriptor: descriptor, size: 0) // SF Pro Rounded

// UIKit/Catalyst
if let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .body)
    .withDesign(.rounded) {
    let roundedBodyFont = UIFont(descriptor: descriptor, size: 0) // SF Pro Rounded
}

// SwiftUI
let roundedBodyFont = Font.system(.body, design: .rounded) // SF Pro Rounded

25:05 - Support Dynamic Type with custom font in UIKit

// Support Dynamic Type with custom font in UIKit

if let customFont = UIFont(name: "Charter-Roman", size: 17) {
    let bodyMetrics = UIFontMetrics(forTextStyle: .body)
    
    // Charter-Roman scaled relative to body text style
    // in different content size categories.
    let customFontScaledLikeBody = bodyMetrics.scaledFont(for: customFont)
    label.font = customFontScaledLikeBody
    label.adjustsFontForContentSizeCategory = true

    // Scaling constant 10 relative to body text style.
    let scaledValue = bodyMetrics.scaledValue(for: 10)
}

26:25 - Support Dynamic Type with custom fonts in SwiftUI example

struct ContentView: View {
    let prose = "Apple provides two type families you can use in your iOS apps. San Francisco (SF). San Francisco is a sans serif type family that includes SF Pro, SF Pro Rounded, SF Mono, SF Compact, and SF Compact Rounded."
    @ScaledMetric(relativeTo: .body) var padding: CGFloat = 20

    var body: some View {
        VStack {
            Text("Typography")
                .font(.custom("Avenir-Medium", size: 34, relativeTo: .title))
            Text(prose)
                .font(.custom("Charter-Roman", size: 17))
                .padding(padding)
        }
    }
}

28:29 - Support Dynamic Type with custom fonts in SwiftUI

// Support Dynamic Type with custom fonts in SwiftUI

// Text with font Avenir-Roman, scaling relative to title text style.
Text("Typography").font(.custom("Avenir-Roman", size: 34, relativeTo: .title))

// Text with font Helvetica, scaling relative to body text style.
Text("Title").font(.custom("Helvetica", size: 17))

// Text with font Courier, always use fixed size, do not scale according to user setting.
Text("Fixed").font(.custom("Courier", fixedSize: 17))

// Constant 10, scaled relative to title text style.
@ScaledMetric(relativeTo: .title) private var spacing: CGFloat = 10.0

リソース

関連ビデオ

WWDC22

WWDC20

WWDC19