Typography
hr.icon
Appleは、iOSアプリケーションで使用できる2種類のタイプファミリーを提供しています。
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の視覚的な明瞭さに合わせてデザインされたシステムフォントは、読みやすく、中立的です。
https://gyazo.com/9cc8dbfae672d677ff93a915951b45c8
New York（NY）
New Yorkは、SFフォントを補完するためにデザインされたユニークなトーンを提供するセリフ書体です。
NYは、グラフィックディスプレイ（大きなサイズ）でも、リーディングコンテクスト（テキストサイズ）でも同じように機能します。
https://gyazo.com/6977b73c96d353f283e7d4c0e8ada454
San FranciscoとNew Yorkのフォントはこちらからダウンロードできます。 iOS 14以降、システムはSan FranciscoとNew Yorkのフォントを可変フォントフォーマットで提供しています。
このフォーマットは、異なるフォントスタイルを1つのファイルにまとめ、スタイル間の補間をサポートして中間的なフォントを作成します。
補間機能により、各サイズに合わせてデザインされたように見せながら、すべてのサイズに対応することができます。
また、補間によってオプティカルサイジング（異なるサイズに合わせて異なるタイポグラフィデザインを作成すること）も可能になります。
iOS 14以降では、システムフォントがダイナミックオプティカルサイズに対応しており、SF ProとSF CompactのTextとDisplay、New YorkのSmall、Medium、Large、Extra Largeなど、フォントの個別のオプティカルサイズが、単一の連続したデザインに統合されます。
このデザインにより、各グリフやレターフォームを補間して、ポイントサイズに正確に適合した構造を作り出すことができます。
補足
以前のバージョンのiOSを使用しているデザインツールで可変フォントを使用すると、予期しない結果になることがあります。
その場合は、引き続きテキストとディスプレイを使用してください。
SF ProとNYは互換性があるため、一貫したルック＆フィールを維持しながら、タイポグラフィのコントラストや多様性をiOSインターフェースに取り入れる方法は数多くあります。
例えば、両方の書体を使うことで、より強い視覚的な階層を作ったり、コンテンツの意味的な違いを強調したりすることができます。
Appleがデザインした書体は、幅広いウエイト、サイズ、スタイル、言語をサポートしているので、アプリケーション全体で快適で美しい読書体験をデザインすることができます。
システムフォントでテキストスタイルを使用すると、ダイナミックタイプとより大きなアクセシビリティタイプサイズのサポートも得られます。
これにより、ユーザーは自分に合ったテキストサイズを選ぶことができます。
システムでは、SFおよびNY書体を簡単に使用できるAPIを定義しています。
SF Pro and SF Compact
システムフォントの柔軟性は、あらゆるポイントサイズで最適な読みやすさを実現し、アプリ全体の精密な組版に必要な幅と深さを提供します。
SF ProとSF Compactは以下をサポートしています。
100以上の言語（ラテン文字、ギリシャ文字、キリル文字）に対応
UltralightからBlackまでの9種類のウェイトを、アップライトとイタリックの両方で使用可能
テキストのサイズに応じて自動的に調整される可変文字間隔
スモールキャピタル、分数、および下・上の数字
ダイナミックなオプティカルサイズ
SF Pro Rounded and SF Compact Rounded
システムフォントの丸みを帯びたバリエーションは、テキストスタイルをソフトまたは丸みを帯びたUI要素の外観と調和させたり、代替のタイポグラフィボイスを提供したりするのに役立ちます。
SF Pro RoundedとSF Compact Roundedが対応しています。
100以上の言語（ラテン文字、ギリシャ文字、キリル文字）に対応
UltralightからBlackまでの9種類のウェイトのアップライト
文字の大きさに応じて自動的に調整される可変文字間隔
スモールキャピタル、分数、下・上の数字
ダイナミックなオプティカルサイズ
SF Mono
SF MonoはSan Franciscoの等幅バージョンで、すべての文字の幅が同じである書体です。
一般的に等幅の書体は、コーディング環境などでテキストの列を揃えたい場合に使用します。
例えば、XcodeやSwift Playgroundsでは、デフォルトでSF Monoを使用しています。
注意
SF Proでは、OpenTypeの表組み機能を使用して、等幅の数字や通貨の表示をサポートしています。
SF Monoは以下をサポートしています。
100以上の言語（ラテン文字、ギリシャ文字、キリル文字）に対応
ライトからヘビーまでの6つのウェイト（アップライトとイタリック）をサポート
すべてのウェイトで等幅表示（フォントウェイトを変更してもテキストがリフローしない）
ダイナミックなオプティカルサイズ
New York
New Yorkは、インターフェイスや伝統的な読書体験を提供するために使用できる古典的なセリフ書体です。
NYは以下をサポートしています。
100以上の言語（ラテン文字、ギリシャ文字、キリル文字）に対応
レギュラーからブラックまでの6種類のウエイト、アップライトとイタリックの両方に対応
テキストのサイズに応じて自動的に調整される可変文字間隔
ダイナミックなオプティカルサイズ
Choosing Fonts to Enhance Your App
可能な限り内蔵のテキストスタイルを使用します。
内蔵されているテキストスタイルを使えば、読みやすさを維持しつつ、視覚的にはっきりとした方法でコンテンツを表現できます。
見出し、本文、吹き出し、数サイズのタイトルなどのスタイルは、システムフォントをベースにしており、フォントサイズごとにトラッキングとリーディングを自動的に調整するDynamic Typeなどの主要なタイポグラフィ機能を利用することができます。
開発者向けのガイダンスは、[]を参照してください。
重要な情報を強調する。
フォントの太さ、サイズ、および色を使用して、アプリ内の最も重要な情報を強調します。
テキストサイズの変更に対応する際は、コンテンツを優先してください。
すべてのコンテンツが同じように重要なわけではありません。大きなサイズを選択する人は、重要なコンテンツを読みやすくしたいのであって、画面上のすべての文字を大きくしたいわけではありません。
インターフェイスに使用する書体の数は最小限に抑えましょう。
あまりにも多くの異なる書体を混在させると、アプリが断片的でだらしない印象を与えてしまいます。
読みやすさを向上させたり、スペースを節約するためにリーディングを変更します。
リーディングとは、テキストの行間のスペースのことです。
場合によっては、このスペースを増やしたり減らしたりすることで、テキストのレイアウトがうまくいくことがあります。
幅の広いコラムや長い文章を表示する場合は、行間のスペースを広く取る（リーディングを緩くする）ことで、人が次の行に移動する際に自分の場所を確保しやすくなります。
逆に、リストのように高さが制限されている場所に2行のテキストを表示する場合は、行間のスペースを小さくする（タイトリード）ことで、テキストがうまく収まるようになります。
3行以上のテキストを表示する必要がある場合は、高さが制限されている場所でもタイトリードは避けてください。
システムでは、行間のスペースを2ポイント増減できるAPIを定義しています。
カスタムフォントが読みやすいことを確認します。
特に、小さなサイズで表示されたときに文字の形を判別しにくくするようなスタイル属性を持っている場合は、読みにくい可能性があります。
ブランディングや没入感のあるゲーム体験の実現など、アプリケーションにカスタムフォントがどうしても必要な場合を除き、通常はシステムフォントを使用するのが最善です。
カスタムフォントを表示用テキストにのみ使用することを検討してください。
読み物やインターフェイスのテキストに使用する場合は、小さいサイズでも読みやすいことを確認してください。
カスタムフォントにアクセシビリティ機能を実装する。
システムフォントは、太字や大きな文字などのアクセシビリティ機能に自動的に対応します。
カスタムフォントを使用するアプリでも、アクセシビリティ機能が有効になっていることを確認し、変更されたときの通知を登録することで、同じ動作を実現します。
インターフェイスのモックアップでは、必要に応じてトラッキングを調整します。
実行中のアプリでは、システムフォントがポイントサイズごとに動的にトラッキングを調整します。
可変システムフォントを使用するUIの正確なインターフェイスモックアップを作成するには、トラッキングの調整が必要な場合があります。
注意
iOSでは、ラテン文字、ギリシャ文字、キリル文字のシステムフォントとしてSan Franciscoが使用され、その他の文字にはさまざまな書体が使用されます。
Dynamic Type Sizes
Dynamic Typeは、読者が好みのテキストサイズを選択できるようにすることで、さらなる柔軟性を提供します。
以下は、Dynamic Typeの各サイズにおける各テキストスタイルのウェイト、サイズ、およびリーディングの値です。
table: Large (Default)
Style Weight Size (points) Leading (points)
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
table: xSmall
Style Weight Size (points) Leading (points)
Large Title Regular 31 38
Title 1 Regular 25 31
Title 2 Regular 19 24
Title 3 Regular 17 22
Headline Semi-Bold 14 19
Body Regular 14 19
Callout Regular 13 18
Subhead Regular 12 16
Footnote Regular 12 16
Caption 1 Regular 11 13
Caption 2 Regular 11 13
table: Small
Style Weight Size (points) Leading (points)
Large Title Regular 32 39
Title 1 Regular 26 32
Title 2 Regular 20 25
Title 3 Regular 18 23
Headline Semi-Bold 15 20
Body Regular 15 20
Callout Regular 14 19
Subhead Regular 13 18
Footnote Regular 12 16
Caption 1 Regular 11 13
Caption 2 Regular 11 13
table: Medium
Style Weight Size (points) Leading (points)
Large Title Regular 33 40
Title 1 Regular 27 33
Title 2 Regular 21 26
Title 3 Regular 19 24
Headline Semi-Bold 16 21
Body Regular 16 21
Callout Regular 15 20
Subhead Regular 14 19
Footnote Regular 12 16
Caption 1 Regular 11 13
Caption 2 Regular 11 13
table: xLarge
Style Weight Size (points) Leading (points)
Large Title Regular 36 43
Title 1 Regular 30 37
Title 2 Regular 24 30
Title 3 Regular 22 28
Headline Semi-Bold 19 24
Body Regular 19 24
Callout Regular 18 23
Subhead Regular 17 22
Footnote Regular 15 20
Caption 1 Regular 14 19
Caption 2 Regular 13 18
table: xxLarge
Style Weight Size (points) Leading (points)
Large Title Regular 38 46
Title 1 Regular 32 39
Title 2 Regular 26 32
Title 3 Regular 24 30
Headline Semi-Bold 21 26
Body Regular 21 26
Callout Regular 20 25
Subhead Regular 19 24
Footnote Regular 17 22
Caption 1 Regular 16 21
Caption 2 Regular 15 20
table: xxxLarge
Style Weight Size (points) Leading (points)
Large Title Regular 40 48
Title 1 Regular 34 41
Title 2 Regular 28 34
Title 3 Regular 26 32
Headline Semi-Bold 23 29
Body Regular 23 29
Callout Regular 22 28
Subhead Regular 21 28
Footnote Regular 19 24
Caption 1 Regular 18 23
Caption 2 Regular 17 22
Larger Accessibility Type Sizes
標準的なダイナミックタイプのサイズに加えて、アクセシビリティを必要とするユーザーのために、さらに大きなサイズが用意されています。
ここでは、各テキストスタイルのウェイト、サイズ、およびリーディングの値を、大きなアクセシビリティ・タイプ・サイズで示します。
table: AX1
Style Weight Size (points) Leading (points)
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
table: AX2
Style Weight Size (points) Leading (points)
Large Title Regular 48 57
Title 1 Regular 43 51
Title 2 Regular 39 47
Title 3 Regular 37 44
Headline Semi-Bold 33 40
Body Regular 33 40
Callout Regular 32 39
Subhead Regular 30 37
Footnote Regular 27 33
Caption 1 Regular 26 32
Caption 2 Regular 24 30
table: AX3
Style Weight Size (points) Leading (points)
Large Title Regular 52 61
Title 1 Regular 48 57
Title 2 Regular 44 52
Title 3 Regular 43 51
Headline Semi-Bold 40 48
Body Regular 40 48
Callout Regular 38 46
Subhead Regular 36 43
Footnote Regular 33 40
Caption 1 Regular 32 39
Caption 2 Regular 29 35
table: AX4
Style Weight Size (points) Leading (points)
Large Title Regular 56 66
Title 1 Regular 53 62
Title 2 Regular 50 59
Title 3 Regular 49 58
Headline Semi-Bold 47 56
Body Regular 47 56
Callout Regular 44 52
Subhead Regular 42 50
Footnote Regular 38 46
Caption 1 Regular 37 44
Caption 2 Regular 34 41
table: AX5
Style Weight Size (points) Leading (points)
Large Title Regular 60 70
Title 1 Regular 58 68
Title 2 Regular 56 66
Title 3 Regular 55 65
Headline Semi-Bold 53 62
Body Regular 53 62
Callout Regular 51 60
Subhead Regular 49 58
Footnote Regular 44 52
Caption 1 Regular 43 51
Caption 2 Regular 40 48
Tracking Values
正確なインターフェイスのモックアップを作成するために、SF Pro、SF Pro Rounded、New Yorkの各サイズにシステムが定義するトラッキング値を使用します。
table: SF Pro
Size (points) Tracking (1/1000em) Tracking (points)
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
table: SF Pro Rounded
Size (Points) Tracking (1/1000em) Tracking (points)
6 +87 +0.51
7 +80 +0.54
8 +72 +0.57
9 +65 +0.57
10 +58 +0.57
11 +52 +0.56
12 +46 +0.54
13 +40 +0.51
14 +35 +0.48
15 +30 +0.44
16 +26 +0.41
17 +22 +0.37
18 +21 +0.37
19 +20 +0.37
20 +18 +0.36
21 +17 +0.35
22 +16 +0.34
23 +16 +0.35
24 +15 +0.35
25 +14 +0.35
26 +14 +0.36
27 +14 +0.36
28 +13 +0.36
29 +13 +0.37
30 +12 +0.37
31 +12 +0.36
32 +12 +0.38
33 +12 +0.39
34 +12 +0.38
35 +11 +0.38
36 +11 +0.39
37 +10 +0.38
38 +10 +0.39
39 +10 +0.38
40 +10 +0.39
41 +10 +0.38
42 +10 +0.39
43 +9 +0.38
44 +8 +0.37
45 +8 +0.37
46 +8 +0.36
47 +8 +0.37
48 +8 +0.35
49 +8 +0.36
50 +7 +0.34
51 +6 +0.32
52 +6 +0.33
53 +6 +0.31
54 +6 +0.32
56 +6 +0.30
58 +4 +0.25
60 +4 +0.23
62 +4 +0.21
64 +3 +0.19
66 +2 +0.16
68 +2 +0.13
70 +2 +0.14
72 +2 +0.11
76 +1 +0.07
80 0 0.00
84 0 0.00
88 0 0.00
92 0 0.00
96 0 0.00
table: New York
Size (Points) Tracking (1/1000em) Tracking (points)
6 +40 +0.23
7 +32 +0.22
8 +25 +0.20
9 +20 +0.18
10 +16 +0.15
11 +11 +.12
12 +6 +0.07
13 +4 +0.05
14 +2 +0.03
15 +0 +0.00
16 -2 -0.03
17 -4 -0.07
18 -6 -0.11
19 -8 -0.15
20 -10 -0.20
21 -10 -0.21
22 -10 -0.23
23 -11 -0.25
24 -11 -0.26
25 -11 -0.27
26 -12 -0.29
27 -12 -0.32
28 -12 -0.33
29 -12 -0.34
30 -12 -0.37
31 -13 -0.39
32 -13 -0.41
33 -13 -0.42
34 -14 -0.45
35 -14 -0.48
36 -14 -0.49
38 -14 -0.52
40 -14 -0.55
42 -14 -0.57
44 -14 -0.62
46 -14 -0.65
48 -14 -0.68
50 -14 -0.71
52 -14 -0.74
54 -15 -0.79
58 -15 -0.85
62 -15 -0.91
66 -15 -0.97
70 -16 -1.06
72 -16 -1.09
80 -16 -1.21
88 -16 -1.33
96 -16 -1.50
100 -16 -1.56
120 -16 -1.88
140 -16 -2.26
160 -16 -2.58
180 -17 -2.99
200 -17 -3.32
220 -18 -3.76
240 -18 -4.22
260 -18 -4.57