LoginSignup
48
49

More than 5 years have passed since last update.

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

Posted at

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;
}
48
49
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
48
49