元ページ
Typography - Visual Design - iOS - Human Interface Guidelines - Apple Developer
Typography（タイポグラフィ）
Apple provides two type families you can use in your iOS apps.
Appleは、iOSアプリで使用できる2つのタイプファミリーを提供しています。
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. SF Pro is the system font in iOS, macOS, and tvOS; SF Compact is the system font in watchOS. Designed to match the visual clarity of the platform UIs, the system fonts are legible and neutral.
San Francisco（SF）。
San Francisco は、SF Pro、SF Pro Rounded、SF Mono、SF Compact、SF Compact Roundedを含むサンセリフタイプファミリーです。
SF Proは、iOS、macOS、tvOSのシステムフォントです。
SF Compactは、watchOSのシステムフォントです。
プラットフォームUIの視覚的な明快さに一致するように設計されたシステムフォントは、読みやすく中立です。
New York (NY). New York is a serif typeface that provides a unique tone designed to complement the SF fonts. NY works as well in a graphic display context (at large sizes) as it does in a reading context (at text sizes).
New York（NY）。
New York は、SFフォントを補完するように設計されたユニークなトーンを提供するセリフ書体です。
NYは（テキストサイズの）読み取りコンテキストと同様に、（大きなサイズの）グラフィック表示コンテキストでも機能します。
You can download the San Francisco and New York fonts here.
San Francisco と New York のフォントはこちらからダウンロードできます。
Beginning in iOS 14, the system provides the San Francisco and New York fonts in the variable font format. This format combines different font styles together in one file, and supports interpolation between styles to create intermediate ones. With interpolation, typefaces can adapt to all sizes while appearing specifically designed for each size.
iOS 14以降、システムは San Francisco と New York のフォントを可変フォント形式で提供します。
このフォーマットは、異なるフォントスタイルを1つのファイルに結合し、スタイル間の補間をサポートして中間のスタイルを作成します。
補間により、書体はすべてのサイズに適応でき、各サイズ用に特別に設計されたように見えます。
Interpolation also enables optical sizing, which refers to the creation of different typographic designs to fit different sizes. Both San Francisco and New York provide specific optical size variants to ensure that text can look great at any size: Text and Display for SF Pro and SF Compact, and Small, Medium, Large, and Extra Large for New York. In iOS 14 and later, the system fonts support dynamic optical sizes, merging the discrete optical sizes like Text and Display into a single, continuous design. This design allows each glyph or letterform to be interpolated to produce a structure that's precisely adapted to the point size.
補間により、光学サイジングも可能になります。
これは、さまざまなサイズに合わせてさまざまな活版印刷デザインを作成することを意味します。
San Francisco と New York の両方で、SF ProとSF Compactのテキストとディスプレイ、ニューヨークのSmall、Medium、Large、Extra Largeのテキストとディスプレイがどのサイズでも見栄えがよくなるように、特定の光学サイズバリアントを提供しています。
iOS 14以降では、システムフォントは動的な光学サイズをサポートし、テキストやディスプレイなどの個別の光学サイズを単一の継続デザインにマージします。
このデザインにより、各グリフまたはレターフォームを補間して、ポイントサイズに正確に適合した構造を作成できます。
NOTE
Using variable fonts in a design tool that's running on an earlier version of iOS may produce unexpected results. In this case, continue using Text and Display.
注意
以前のバージョンのiOSで実行されているデザインツールで可変フォントを使用すると、予期しない結果が生じる可能性があります。
この場合は、引き続きテキストとディスプレイを使用してください。
Because SF Pro and NY are compatible, there are many ways you can incorporate typographic contrast and diversity into your iOS interfaces while maintaining a consistent look and feel. For example, using both typefaces can help you create stronger visual hierarchies or highlight semantic differences in content.
SF ProとNYは互換性があるため、一貫したルックアンドフィールを維持しながら、活版印刷のコントラストと多様性をiOSインターフェースに組み込むことができる多くの方法があります。
たとえば、両方の書体を使用すると、より強力な視覚的階層を作成したり、コンテンツの意味の違いを強調したりできます。
Apple-designed typefaces support an extensive range of weights, sizes, styles, and languages, so you can design comfortable and beautiful reading experiences throughout your app. When you use text styles with the system fonts, you also get support for Dynamic Type and the larger accessibility type sizes, which let people choose the text size that works for them. For specific values, see Dynamic Type Sizes and Larger Accessibility Type Sizes. Size information, including tracking values, is also available in the Sketch, Photoshop, and Adobe XD Apple Design Resources for iOS.
アップルがデザインした書体は、幅広いウェイト、サイズ、スタイル、言語をサポートしているため、アプリ全体で快適で美しい読書体験をデザインできます。
システムフォントでテキストスタイルを使用すると、ダイナミックタイプとより大きなアクセシビリティタイプサイズのサポートも利用できるようになり、ユーザーはそれらに適したテキストサイズを選択できます。
特定の値については、ダイナミックタイプのサイズと大きなアクセシビリティタイプのサイズを参照してください。トラッキング値を含むサイズ情報は、iOS向けのSketch、Photoshop、Adobe XD Apple Design Resourcesでも利用できます。
The system defines APIs that make it easy to use the SF and NY typefaces; for developer guidance, see the withDesign method and SystemDesign structure of UIFontDescriptor.
システムは、SFおよびNY書体を使いやすくするAPIを定義します。
開発者向けガイダンスについては、UIFontDescriptorのwithDesignメソッドとSystemDesign構造を参照してください。
SF Pro and SF Compact
The flexibility of the system fonts helps you achieve optimal legibility at every point size and gives you the breadth and depth you need for precision typesetting throughout your app.
システムフォントの柔軟性は、すべてのポイントサイズで最適な読みやすさを実現するのに役立ち、アプリ全体で高精度の組版に必要な幅と深さを提供します。
SF Pro and SF Compact support:
- Over one hundred languages using Latin, Greek, and Cyrillic scripts
- Nine weights — from Ultralight to Black — in both uprights and italics
- Variable letter spacing that automatically adjusts based on the size of the text
- Small capitals, fractions, and inferior and superior numerals
- Dynamic optical sizes, in addition to the Text and Display discrete optical sizes
For developer guidance, see the default property of the SystemDesign structure.
SF ProおよびSF Compactのサポート：
- ラテン語、ギリシャ語、キリル文字のスクリプトを使用する100以上の言語
- 直立およびイタリックの9つのウェイト— Ultralight から Black まで
- テキストのサイズに基づいて自動的に調整される可変文字間隔
- 小さな大文字、分数、および劣った数値と優れた数値
- テキストとディスプレイの離散光学サイズに加えて、動的光学サイズ
開発者向けガイダンスについては、SystemDesign構造のデフォルトプロパティを参照してください。
SF Pro Rounded and SF Compact Rounded
The rounded variant of the system fonts can help you coordinate your text style with the appearance of soft or rounded UI elements, or to provide an alternative typographic voice.
システムフォントの丸みを帯びたバリアントは、テキストスタイルをソフトまたは丸みを帯びたUI要素の外観と調整したり、代替の活版印刷の音声を提供するのに役立ちます。
SF Pro Rounded and SF Compact Rounded support:
- Over one hundred languages using Latin, Greek, and Cyrillic scripts
- Uprights in nine weights — from Ultralight to Black
- Variable letter spacing that automatically adjusts based on the size of the text
- Small capitals, fractions, and inferior and superior numerals
- Dynamic optical sizes
For developer guidance, see the rounded property of the SystemDesign structure.
SF Pro RoundedおよびSF Compact Roundedのサポート：
- ラテン語、ギリシャ語、キリル文字のスクリプトを使用する100以上の言語
- 9つのウェイトのアップライト — Ultralight からBlack まで
- テキストのサイズに基づいて自動的に調整される可変文字間隔
- 小さな大文字、分数、および劣った数値と優れた数値
- 動的光学サイズ
開発者向けガイダンスについては、SystemDesign構造の丸められたプロパティを参照してください。
SF Mono
SF Mono is a monospaced variant of San Francisco — that is, a typeface in which all characters are equal in width. You typically use a monospaced typeface when you want to align columns of text, such as in a coding environment. For example, Xcode and Swift Playgrounds use SF Mono by default.
SF Monoは、サンフランシスコのモノスペースバリアントです。 つまり、すべての文字の幅が等しい書体です。
コーディング環境などでテキストの列を揃えたい場合は、通常、等幅フォントを使用します。
たとえば、XcodeとSwift PlaygroundsはデフォルトでSF Monoを使用します。
NOTE SF Pro uses the OpenType tabular lining feature to support the display of monospaced numbers and currencies.
注意
SF Proは、OpenType表形式のライニング機能を使用して、等幅の数値と通貨の表示をサポートします。
SF Mono supports:
- Over one hundred languages using Latin, Greek, and Cyrillic scripts
- Six weights — from Light to Heavy — in both uprights and italics
- Monospacing across all weights (that is, changing the font weight doesn't cause the text to reflow)
- Dynamic optical sizes
For developer guidance, see the monospaced property of the SystemDesign structure.
SF Monoは以下をサポートします：
- ラテン語、ギリシャ語、キリル文字のスクリプトを使用する100以上の言語
- 直立からイタリック、Light から Heavy まで6つのウェイト
- すべての太さのモノスペース（つまり、フォントの太さを変更しても、テキストはリフローされません）
- 動的光学サイズ
開発者向けガイダンスについては、SystemDesign構造の等幅プロパティを参照してください。
New York
New York is a classical serif typeface you can use in the interface or to provide a traditional reading experience.
New York は、インターフェースで使用したり、従来の読書体験を提供したりできる、古典的なセリフ書体です。
NY supports:
- Over one hundred languages using Latin, Greek, and Cyrillic scripts
- Six weights — from Regular to Black — in both uprights and italics
- Variable letter spacing that automatically adjusts based on the size of the text
- Dynamic optical sizes, in addition to the Small, Medium, Large, and Extra Large discrete optical sizes
For developer guidance, see the serif property of the SystemDesign structure.
NYは以下をサポートします：
- ラテン語、ギリシャ語、キリル文字のスクリプトを使用する100以上の言語
- レギュラーから Black まで、直立とイタリックの6つのウェイト
- テキストのサイズに基づいて自動的に調整される可変文字間隔
- 小、中、大、および特大の個別の光学サイズに加えて、動的光学サイズ
開発者向けガイダンスについては、SystemDesign構造のserifプロパティを参照してください。
Choosing Fonts to Enhance Your App（アプリを拡張するためのフォントの選択）
Use built-in text styles whenever possible. The built-in text styles let you express content in ways that are visually distinct, while retaining optimal legibility. These styles — including headline, body, callout, and several sizes of title — are based on the system fonts and let you take advantage of key typographic features, such as Dynamic Type, which automatically adjusts tracking and leading for every font size. For developer guidance, see UIFontTextStyle.
可能な限り組み込みのテキストスタイルを使用します。
組み込みのテキストスタイルにより、最適な読みやすさを維持しながら、視覚的に区別できる方法でコンテンツを表現できます。
これらのスタイル（見出し、本文、吹き出し、タイトルのいくつかのサイズなど）はシステムフォントに基づいており、ダイナミックタイプなどの主要な活版印刷機能を利用して、すべてのフォントサイズのトラッキングとリーディングを自動的に調整できます。
開発者向けガイダンスについては、UIFontTextStyleを参照してください。
Emphasize important information. Use font weight, size, and color to highlight the most important information in your app.
重要な情報を強調します。
フォントの太さ、サイズ、色を使用して、アプリの最も重要な情報を強調します。
Prioritize content when responding to text-size changes. Not all content is equally important. When someone chooses a larger size, they want to make the content they care about easier to read; they don’t always want every word on the screen to be larger.
テキストサイズの変更に応答するときにコンテンツを優先します。
すべてのコンテンツが等しく重要であるわけではありません。
誰かがより大きなサイズを選ぶとき、彼らは自分が気にかけているコンテンツを読みやすくしたいと考えています。画面上のすべての単語が大きくなることを常に望んでいるわけではありません。
Minimize the number of typefaces you use in your interface. Mixing too many different typefaces can make your app seem fragmented and sloppy.
インターフェイスで使用する書体の数を最小限に抑えます。
さまざまな書体が多すぎると、アプリが断片化してずさんなように見えることがあります。
Make sure custom fonts are legible. Custom typefaces are supported on iOS, but may be tough to read, especially if they have stylistic attributes that make letterforms hard to discern when displayed at small sizes. Unless your app has a compelling need for a custom font — such as for branding purposes or to create an immersive gaming experience — it’s usually best to stick with the system fonts. Consider using a custom font for display text only; if you do use it for reading or interface text, make sure it’s legible, even at small sizes.
カスタムフォントが読みやすいことを確認します。
カスタム書体はiOSでサポートされていますが、特に小さいサイズで表示されたときにレターフォームを識別しにくくするスタイル属性がある場合は、読みにくいかもしれません。
アプリにカスタムフォント（ブランド化の目的や没入型のゲーム体験を作成するためなど）を強いる必要がない限り、通常はシステムフォントを使用するのが最善です。
表示テキストのみにカスタムフォントを使用することを検討してください。
テキストの読み取りやインターフェースに使用する場合は、小さいサイズでも判読できるようにしてください。
Implement accessibility features for custom fonts. System fonts automatically react to accessibility features like bold text and larger type. Implement the same behavior in apps that use custom fonts by making sure accessibility features are enabled and registering for notifications when they change. For guidance, see Text Size and Weight.
カスタムフォントのアクセシビリティ機能を実装します。
システムフォントは、太字のテキストや大きな文字などのユーザー補助機能に自動的に反応します。
ユーザー補助機能が有効になっていることを確認し、変更時に通知を登録することで、カスタムフォントを使用するアプリに同じ動作を実装します。
ガイダンスについては、テキストのサイズと太さを参照してください。
Adjust tracking as needed in interface mockups. In a running app, the system fonts dynamically adjust tracking at every point size. To produce an accurate interface mockup of a UI that uses the variable system fonts, you don't have to choose a discrete optical size at certain point sizes, but you might need to adjust the tracking. For guidance, see the values listed in Tracking Values and available in Apple Design Resources.
インターフェースのモックアップで必要に応じてトラッキングを調整します。
実行中のアプリでは、システムフォントがすべてのポイントサイズでトラッキングを動的に調整します。
可変システムフォントを使用するUIの正確なインターフェイスモックアップを生成するには、特定のポイントサイズで個別の光学サイズを選択する必要はありませんが、トラッキングを調整する必要がある場合があります。
ガイダンスについては、トラッキング値にリストされている値とApple Design Resourcesで利用可能な値を参照してください。
In interface mockups, use text size to determine when to use SF Pro Text and Display, SF Compact Text and Display, or NY Small, Medium, Large, and Extra Large. If you use these discrete optical sizes in an interface mockup, you need to use different variants at different text sizes. Use the values listed below for guidance. For tracking values, see Apple Design Resources.
- For SF, use Text for text that's smaller than 20 points; use Display for text that's 20 points or larger.
- For NY, use Small for text that's smaller than 20 points, Medium for text between 20 and 35 points, large for text between 36 and 53 points, and Extra Large for text that's 54 points or larger.
インターフェイスのモックアップでは、テキストサイズを使用して、SF Pro Text and Display、SF Compact Text and Display、またはNY Small、Medium、Large、Extra Largeをいつ使用するかを決定します。
インターフェイスモックアップでこれらの個別の光学サイズを使用する場合は、異なるテキストサイズで異なるバリアントを使用する必要があります。
以下の値をガイダンスとして使用してください。
トラッキング値については、Apple Design Resourcesを参照してください。
- SFの場合、20ポイント未満のテキストには Text を使用します。 20ポイント以上のテキストには Display を使用します。
- NYの場合、20ポイント未満のテキストには small、20〜35ポイントのテキストには Medium、36〜53ポイントのテキストには Large、54ポイント以上のテキストには Extra Large を使用します。
NOTE
iOS uses San Francisco as the system font for Latin, Greek and Cyrillic alphabets, and a variety of other typefaces for other scripts.
注意
iOSは、ラテン語、ギリシャ語、キリル文字のアルファベットのシステムフォントとして San Francisco を使用し、他のスクリプトでは他のさまざまな書体を使用します。
Dynamic Type Sizes（ダイナミックタイプサイズ）
Dynamic Type provides additional flexibility by letting readers choose their preferred text size. Here are the weight, size, and leading values for each text style at different Dynamic Type sizes.
ダイナミックタイプは、読者が好みのテキストサイズを選択できるようにすることで、さらに柔軟性を提供します。
以下は、異なるダイナミックタイプサイズでの各テキストスタイルの重み、サイズ、および先行値です。
Point size based on image resolution of 144ppi for @2x and 216ppi for @3x designs.
@2xでは144ppi、@3xでは216ppiの画像解像度に基づくポイントサイズ。
Larger Accessibility Type Sizes（より大きなアクセシビリティタイプサイズ）
In addition to the standard dynamic type sizes, the system offers a number of even larger sizes for users with accessibility needs. Here are the weight, size, and leading values for each text style at the larger accessibility type sizes.
標準の動的タイプサイズに加えて、システムは、アクセシビリティが必要なユーザー向けに、さらに多くのサイズを提供します。
これ（下記）は、より大きなアクセシビリティタイプサイズでの各テキストスタイルの重み、サイズ、および先行値です。
Point size based on image resolution of 144ppi for @2x and 216ppi for @3x designs.
@2xでは144ppi、@3xでは216ppiの画像解像度に基づくポイントサイズ。
Tracking Values（トラッキング値）
To help you create accurate interface mockups, use the tracking values the system defines for various sizes of SF Pro, SF Pro Rounded, and New York.
正確なインターフェースモックアップを作成するには、SF Pro、SF Pro Rounded、およびNew Yorkのさまざまなサイズに対してシステムが定義するトラッキング値を使用します。