今回はSwift UIのフォントサイズ一覧について。
「headlineとtitle3ってどっちがフォントサイズ大きかったっけ？」とわからなくなることが多かったので一覧で整理してみた。
フォントスタイル一覧
Swift UIで用意されているフォントスタイル一覧は下記の通りだ。
| スタイル名 | デフォルトサイズ（pt） | フォントウェイト | 主な用途 |
|---|---|---|---|
.largeTitle | 34 | Regular | 画面全体のメインタイトルなど |
.title | 28 | Regular | セクションのタイトル |
.title2 | 22 | Regular | 小セクションのタイトル |
.title3 | 20 | Regular | 見出しより小さなラベル |
.headline | 17 | Semibold | 強調表示、短い見出し |
.body | 17 | Regular | 一般的な本文 |
.callout | 16 | Regular | 補足情報や注釈 |
.subheadline | 15 | Regular | サブタイトルや補助的なテキスト |
.footnote | 13 | Regular | 脚注、小さな補足情報 |
.caption | 12 | Regular | 画像などのキャプション |
.caption2 | 11 | Regular | 補助的キャプション |
実際のフォントサイズの表示の違いは下記の通りだ。
上記サイズはiOSにおけるDynamic Type（「設定」→「アクセシビリティ」→「画面表示とテキストサイズ」→「さらに大きな文字」で調整できるデバイスの文字サイズ調整）が「標準」に設定されている状態でのデフォルト値となる。
ユーザーがフォントサイズを拡大・縮小している場合にはこれらの値も自動的に調整されるので結構便利だ。
フォントスタイルの適用方法
フォントサイズの指定はTextビューに対して.font()モディファイアを使用することで適用できる。
1 2 3 | Text("セクションタイトル") .font(.title) |
この例では、テキストに.titleスタイル（28pt）が適用される。
Dynamic Type対応により、ユーザー設定に基づいてサイズが自動調整されるため、柔軟性が高い。
固定サイズフォントの指定
一方で必要に応じて、特定のポイント数を指定してフォントサイズを固定することも可能だ。
その際には.system(size:)を使用する。
1 2 3 | Text("20pt固定テキスト") .font(.system(size: 20)) |
ただし、この方法だとDynamic Typeによる調整が無効となるため、ユーザーがアクセシビリティで文字の大きさを変えても反映しないという問題点がある。
フォントスタイルの見た目を比較してみよう
実際に複数のフォントスタイルを一覧で比較したい場合は下記のようにコードを記述すると視覚的に把握しやすくなる。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import SwiftUI struct ContentView: View { var body: some View { VStack(alignment: .leading, spacing: 10) { Text("Large Title") .font(.largeTitle) Text("Title") .font(.title) Text("Title2") .font(.title2) Text("Title3") .font(.title3) Text("Headline") .font(.headline) Text("Body") .font(.body) Text("Callout") .font(.callout) Text("Subheadline") .font(.subheadline) Text("Footnote") .font(.footnote) Text("Caption") .font(.caption) Text("Caption2") .font(.caption2) } } } #Preview { ContentView() } |
このようにプレビューを実際のフォントサイズ一覧を表示することで、各スタイルの相対的なサイズや印象を簡単に確認することができる。
まとめ
今回はSwift UIの標準フォントスタイルの全違いを一覧形式で表示した。
固定値でフォントサイズを指定できる方法もあるが、ユーザーのデバイスの文字の大きさ設定が反映されないことを考えると、SwiftUIの標準フォントスタイルをベースにしたほうが柔軟性が高くなるだろう。
少しでも参考になれば幸いだ。
