Typography(印刷)
Apple は、iOS アプリで使用できる 2 つの型のファミリーを提供しています。
San Francisco (SF)。 San Francisco は、SF Pro、SF Pro Rounded、SF Mono、SF Compact、および SF CompactRounded を含むサンセリフ型のファミリーです。SF Pro は、iOS、macOS、および tvOS のシステムフォントです。SF Compact は、watchOS のシステムフォントです。プラットフォーム UI の視覚的な明瞭さに一致するようにデザインされており、システムフォントは読みやすく自然です。
New York (NY)。 New York は、SF フォントを補完するようにデザインされた独自のトーンを提供するセリフ書体です。NY は、グラフィック表示コンテキスト (大きいサイズ) でも、読み取りコンテキスト (テキストサイズ) と同様に機能します。
サンフランシスコとニューヨークのフォントは こちら からダウンロードできます。
(訳注：このリンクは当面日本語化の予定はありません。)
iOS 14 以降、システムはサンフランシスコとニューヨークのフォントを variable (可変) フォント形式で提供しています。この形式は、異なるフォントスタイルを 1 つのファイルに結合し、スタイル間の補間をサポートして中間スタイルを作成します。補間を使用すると、書体はすべてのサイズに適応しながら、各サイズ用に特別にデザインされたように見えます。
補間により、光学的サイズ化も可能になり、これはさまざまなサイズに合わせてさまざまな印刷デザインを作成することを意味します。iOS 14 以降では、システムフォントは 動的な光学サイズ をサポートし、フォントの個別の光学サイズ (SFPro および SF Compact の場合はテキストとディスプレイ、New York の場合は Small、Medium、Large、Extra Large など) を 1 つの、継続的デザインにに結合します。このデザインにより、各グリフまたは文字形式を補間して、ポイントサイズに正確に適合した構造を作成できます。
注意
以前のバージョンの iOS で実行されているデザインツールで可変フォントを使用すると、予期しない結果が生じる可能性があります。この場合、引き続き テキスト と Display(表示) を使用してください。
SF Pro と NY は互換性があるため、一貫したルックアンドフィールを維持しながら、活印刷のコントラストと多様性を iOS インターフェイスに組み込むことができる多くの方法があります。たとえば、両方の書体を使用すると、より強力な視覚的階層を作成したり、コンテンツの意味の違いを強調したりするのに役立ちます。
Apple がデザインした書体は、さまざまなウェイト、サイズ、スタイル、そして言語をサポートしているため、あなたのアプリ全体を通して快適で美しい読書体験をデザインできます。システムフォントでテキストスタイルを使用すると、Dynamic Type (動的タイプ) と、より大きなアクセシビリティタイプのサイズもサポートされ、これにより人々は自分に合ったテキストサイズを選択できます。具体的な値については、動的タイプサイズ および より大きなアクセシビリティタイプサイズ を参照してください。追跡値を含むサイズ情報は、iOS 用の Sketch、Photoshop、および Adobe XD Apple Design Resources でも入手できます。
システムは、SF および NY 書体を簡単に使用できるように API を定義しています。開発者向けガイダンスについては、UIFontDescriptor の withDesign メソッド と SystemDesign 構造体 (SystemDesign structure) を参照してください。
SF Pro と SF Compact
システムフォントの柔軟性は、すべてのポイントサイズで最適な読みやすさを実現するのに役立ち、あなたのアプリ全体を通して正確な植字に必要な幅と深さを提供します。
SF Pro と SF Compact は以下をサポートします：
開発者向けガイダンスについては、SystemDesign 構造体 (SystemDesign structure) の default プロパティ) を参照してください。
SF Pro Rounded と SF Compact Rounded
システムフォントの rounded (丸みのある) バリアントは、テキストスタイルをソフトまたは丸みを帯びた UI 要素の外観と調整したり、代替の印刷の voice (声?) を提供するのに役立ちます。
SF Pro Rounded と SF Compact Rounded は以下をサポートします：
開発者向けのガイダンスについては、SystemDesign 構造体 (SystemDesign structure) の rounded プロパティ) を参照してください。
SF Mono
SF Mono は、San Francisco の等幅バリアントです。つまり、すべての文字の幅が等しい書体です。コード化する環境などでテキストの列を揃えたい場合は、通常、等幅書体を使用して下さい。たとえば、Xcode と Swift Playgrounds はデフォルトで SF Mono を使用します。
注意
SF Pro は、OpenType の表形式の行描写機能を使用して、等幅の数値と通貨の表示をサポートします。
SF Mono は以下をサポートします：
開発者向けガイダンスについては、SystemDesign 構造体 (SystemDesign structure) の 等幅プロパティ (monospaced property) を参照してください。
New York
New York は、インターフェイスで使用したり、従来の読書体験を提供したりできる古典的な serif (セリフ) 書体です。
NY は以下をサポートします：
直立の書体と斜体の両方で、通常から黒までの 6 つのウェイト
テキストのサイズに基づいて自動的に調整される可変文字間隔
動的光学サイズ
開発者向けガイダンスについては、SystemDesign 構造体 (SystemDesign structure) の serif プロパティ を参照してください。
アプリを強化するフォントの選択
可能な限り、組み込みのテキストスタイルを使用してください。 組み込みのテキストスタイルを使用すると、最適な読みやすさを維持しながら、視覚的に区別できる方法でコンテンツを表現できます。見出し、本文、吹き出し、いくつかのサイズのタイトルなど、これらのスタイルはシステムフォントに基づいており、すべてのフォントサイズの追跡と誘導を自動的に調整する 動的タイプ などの主要な印刷機能を利用できます。開発者向けガイダンスについては、 UIFontTextStyle を参照してください。
重要な情報を強調します。 フォントのウェイト、サイズ、色を使用して、あなたのアプリで最も重要な情報を強調します。
テキストサイズの変更に対応する場合は、コンテンツに優先順位を付けて下さい。 すべてのコンテンツが等しく重要とは限りません。誰かがより大きなサイズを選択するとき、彼らは気にかけているコンテンツを読みやすくしたいと思います。スクリーン上のすべての単語を大きくしたいとは限りません。
インターフェイスで使用する書体の数を最小限に抑えます。 あまりにも多くの異なる書体を混在させると、あなたのアプリが断片化されてずさんなように見えます。
読みやすさを向上させるか、スペースを節約するために誘導を変更しましょう。 Leading (誘導) は、テキスト行間のスペースです。場合によっては、このスペースを増減すると、テキストレイアウトがより良く機能します。幅の広い列や長い文章でテキストを表示する場合、行間のスペースを増やすと (loose leading (ゆるい誘導))、ある行から次の行に移動するときに人々が場所を維持しやすくなります。逆に、高さが制限されている領域 (たとえば、リストの行) に 2 行のテキストを表示する必要がある場合は、行間のスペースを減らす (窮屈な誘導) と、テキストをうまく収めることができます。3 行以上のテキストを表示する必要がある場合は、高さが制限されている領域でも窮屈な誘導を避けてください。システムは、行間のスペースを 2 ポイント増減できる API を定義しています。開発者向けのガイダンスについては、loose と tight (SwiftUI)、および traitLooseLeading と traitTightLeading (UIKit) を参照してください。
カスタムフォントが読みやすいことを確認してください。 カスタム書体は iOS でサポートされていますが、特に小さいサイズで表示されたときに書体を識別しにくくするスタイルの属性がある場合は、特に読みにくい場合があります。ブランド化の目的や没入型のゲーム体験を作成するためなど、あなたのアプリにカスタムフォントがやむを得ず必要な場合を除いて、通常はシステムフォントを使用するのが最適です。表示テキストのみにカスタムフォントを使用することを検討してください。テキストの読み取りやインターフェースに使用する場合は、小さいサイズでも読みやすいことを確認してください。
カスタムフォントのアクセシビリティ機能を実装しましょう。 システムフォントは、太字や大きな文字などのアクセシビリティ機能に自動的に反応します。アクセシビリティ機能が有効になっていることを確認し、変更されたときに通知を登録することで、カスタムフォントを使用するアプリに同じ動作を実装します。ガイダンスについては、テキストのサイズとウェイト を参照してください。
インターフェイスのモックアップで必要に応じて追跡を調整します。 実行中のアプリでは、システムフォントがすべてのポイントサイズで追跡を動的に調整しています。可変システムフォントを使用する UI の正確なインターフェイスモックアップを作成するには、追跡を調整する必要があります。ガイダンスについては、追跡値 にリストされ、Apple Design Resources で利用可能な値を参照してください。
注意
iOS は、ラテン語、ギリシャ語、キリル文字アルファベットのシステムフォントとして San Francisco を使用し、他のスクリプトでは他のさまざまな書体を使用します。
動的タイプサイズ
動的タイプは、読者が好みのテキストサイズを選択できるようにすることで、追加の柔軟性を提供します。さまざまな動的タイプサイズでの各テキストスタイルのウェイト、サイズ、および誘導値は以下のとおりです。
| xSmall | Small | Medium | Large (Default) | xLarge | xxLarge | xxxLarge |
Large (Default)
| スタイル | ウェイト | サイズ (pts) | 誘導 (pts) |
| Large Title | Regular | 34 | 41 |
| Title 1 | Regular | 28 | 34 |
| Title 2 | Regular | 22 | 28 |
| Title 3 | Regular | 20 | 25 |
| Headline | Semi-Bold | 17 | 22 |
| Body | Regular | 17 | 22 |
| Callout | Regular | 16 | 21 |
| Subhead | Regular | 15 | 20 |
| Footnote | Regular | 13 | 18 |
| Caption 1 | Regular | 12 | 16 |
| Caption 2 | Regular | 11 | 13 |
ポイントサイズは @2x の場合は 144 ppi、@3x デザインの場合は 216 ppi のイメージ解像度に基づきました。
より大きなアクセシビリティタイプサイズ
標準の動的タイプサイズに加えて、システムはアクセシビリティを必要とするユーザ向けに、さらに大きなサイズを多数提供しています。アクセシビリティタイプのサイズが大きい場合の各テキストスタイルのウェイト、サイズ、および誘導の値は以下のとおりです。
| AX1 | AX2 | AX3 | AX4 | AX5 |
AX1
| スタイル | ウェイト | サイズ (pts) | 誘導 (pts) |
| Large Title | Regular | 44 | 52 |
| Title 1 | Regular | 38 | 46 |
| Title 2 | Regular | 34 | 41 |
| Title 3 | Regular | 31 | 38 |
| Headline | Semi-Bold | 28 | 34 |
| Body | Regular | 28 | 34 |
| Callout | Regular | 26 | 32 |
| Subhead | Regular | 25 | 31 |
| Footnote | Regular | 23 | 29 |
| Caption 1 | Regular | 22 | 28 |
| Caption 2 | Regular | 20 | 25 |
ポイントサイズは @2x の場合は 144 ppi、@3x デザインの場合は 216 ppi のイメージ解像度に基づきました。
追跡値
正確なインターフェイスモックアップを作成するのを補助するため、さまざまなサイズの SF Pro、SF Pro Rounded、および New York に対してシステムが定義する追跡値を使用します。
| SF Pro | SF Pro Rounded | New York |
SF Pro
| サイズ | 追跡値 (1/1000em) | 追跡値 (pts) |
| 6 | +41 | +0.24 |
| 7 | +34 | +0.23 |
| 8 | +26 | +0.21 |
| 9 | +19 | +0.17 |
| 10 | +12 | +0.12 |
| 11 | +6 | +0.06 |
| 12 | 0 | 0.0 |
| 13 | -6 | -0.08 |
| 14 | -11 | -0.15 |
| 15 | -16 | -0.23 |
| 16 | -20 | -0.31 |
| 17 | -26 | -0.43 |
| 18 | -25 | -0.44 |
| 19 | -24 | -0.45 |
| 20 | -23 | -0.45 |
| 21 | -18 | -0.36 |
| 22 | -12 | -0.26 |
| 23 | -4 | -0.10 |
| 24 | +3 | +0.07 |
| 25 | +6 | +0.15 |
| 26 | +8 | +0.22 |
| 27 | +11 | +0.29 |
| 28 | +14 | +0.38 |
| 29 | +14 | +0.40 |
| 30 | +14 | +0.40 |
| 31 | +13 | +0.39 |
| 32 | +13 | +0.41 |
| 33 | +12 | +0.40 |
| 34 | +12 | +0.40 |
| 35 | +11 | +0.38 |
| 36 | +10 | +0.37 |
| 37 | +10 | +0.36 |
| 38 | +10 | +0.37 |
| 39 | +10 | +0.38 |
| 40 | +10 | +0.37 |
| 41 | +9 | +0.36 |
| 42 | +9 | +0.37 |
| 43 | +9 | +0.38 |
| 44 | +8 | +0.37 |
| 45 | +8 | +0.35 |
| 46 | +8 | +0.36 |
| 47 | +8 | +0.37 |
| 48 | +8 | +0.35 |
| 49 | +7 | +0.33 |
| 50 | +7 | +0.34 |
| 51 | +7 | +0.35 |
| 52 | +6 | +0.33 |
| 53 | +6 | +0.31 |
| 54 | +6 | +0.32 |
| 56 | +6 | +0.30 |
| 58 | +5 | +0.28 |
| 60 | +4 | +0.26 |
| 62 | +4 | +0.24 |
| 64 | +4 | +0.22 |
| 66 | +3 | +0.19 |
| 68 | +2 | +0.17 |
| 70 | +2 | +0.14 |
| 72 | +2 | +0.14 |
| 76 | +1 | +0.07 |
| 80 | 0 | 0 |
| 84 | 0 | 0 |
| 88 | 0 | 0 |
| 92 | 0 | 0 |
| 96 | 0 | 0 |
すべてのアプリが追跡値を 1/1000 em として表現しているわけではありません。ポイントサイズは @2x の場合は 144 ppi、@3x デザインの場合は 216 ppi のイメージ解像度に基づいたものです。
