iOS
GoodpatchDay 15

iOSでDynamic Typeを使ったときのFontのWeightとサイズの一覧

More than 3 years have passed since last update.

advent_calender_15.png

この記事は Goodpatch Advent Calendar 2015 14日目の投稿です。

昨日は @inoinojp による「フルスタックなフレームワーク『FuelPHP』に乗り換えよう!」でした。


Dynamic Typeについて

iOSではDynamic Typeという設定.appでフォントサイズを設定するとアプリに自動的に反映される仕組みがあります。

Dynamic TypeについてはHuman Interface Guidelineに説明があります。

Color and Typography

現状、Dynamic typeに対応しているアプリは少ないように見られますが

これを機にトライしてみてもいいかと思います。

また、Dynamic Typeを使用しない場合でもiOSアプリのデザインをするときにフォントサイズを決める際の参考になるのではないでしょうか。

iOS9から、iOSのシステムフォントは San Francisco になりました。

Dynamic Typeを使用するためのAPI(iOS7から利用可能)ではDynamic Typeはシステムフォントのみ対応しているようです。

また、システムフォントを使用すると日本語部分は Hiragino-Sansになります。


Dynamic Typeのスタイル一覧を対応OSバージョン

スタイル
対応OS

UIFontTextStyleTitle1
9.0

UIFontTextStyleTitle2
9.0

UIFontTextStyleTitle3
9.0

UIFontTextStyleHeadline
7.0

UIFontTextStyleSubheadline
7.0

UIFontTextStyleBody
7.0

UIFontTextStyleCallout
9.0

UIFontTextStyleFootnote
7.0

UIFontTextStyleCaption1
7.0

UIFontTextStyleCaption2
7.0


Dynamic Typeを使用したときに使用されるフォントとサイズ一覧


設定.appでフォントサイズを変更したとき

※フォントサイズは設定.app内で7段階で変更可能なので、それぞれのサイズを以下に載せておきます。

スタイル
Weight
1
2
3
4
5
6
7

Title1
Light
25
26
27
28
30
32
34

Title2
Regular
19
20
21
22
24
26
28

Title3
Regular
17
18
19
20
22
24
26

Headline
Semibold
14
15
16
17
19
21
23

Subheadline
Regular
12
13
14
15
17
19
21

Body
Regular
14
15
16
17
19
21
23

Callout
Regular
13
14
15
16
18
20
22

Footnote
Regular
12
12
12
13
15
17
19

Caption1
Regular
11
11
11
12
14
16
18

Caption2
Regular
11
11
11
11
13
15
17

※サイズが20以上のときはSFUIDisplay、20未満のときはSDUITextが適用されます。


システムフォント以外のフォントで(擬似的に)Dynamic Typeを使用する


+ (UIFont *)dynamicFontWithFontName:(NSString*)fontName style:(NSString*)style
{
//指定されたスタイルでシステムフォントのインスタンスを取得
UIFont* systemFont = [UIFont preferredFontForTextStyle:style];

//システムフォントのインスタンスからフォントサイズを取得
UIFontDescriptor *fontDesc = [systemFont fontDescriptor];
NSNumber* fontsize = [fontDesc fontAttributes][UIFontDescriptorSizeAttribute];

//使用したいフォント名を使って使いたいフォントを生成
UIFont* customFont = [UIFont fontWithName:fontName size:[fontsize floatValue]];

return customFont;
}