【Swift UI】フォントサイズの全ての違いを一覧形式で紹介！

2025.05.03 2025.05.03

今回はSwift UIのフォントサイズ一覧について。

「headlineとtitle3ってどっちがフォントサイズ大きかったっけ？」とわからなくなることが多かったので一覧で整理してみた。

Contents

1 フォントスタイル一覧
2 フォントスタイルの適用方法
3 固定サイズフォントの指定
4 フォントスタイルの見た目を比較してみよう
5 まとめ

フォントスタイル一覧

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()モディファイアを使用することで適用できる。

Text("セクションタイトル")
    .font(.title)

Text("セクションタイトル")

.font(.title)

この例では、テキストに.titleスタイル（28pt）が適用される。

Dynamic Type対応により、ユーザー設定に基づいてサイズが自動調整されるため、柔軟性が高い。

固定サイズフォントの指定

一方で必要に応じて、特定のポイント数を指定してフォントサイズを固定することも可能だ。

その際には.system(size:)を使用する。

Text("20pt固定テキスト")
    .font(.system(size: 20))

Text("20pt固定テキスト")

.font(.system(size: 20))

ただし、この方法だとDynamic Typeによる調整が無効となるため、ユーザーがアクセシビリティで文字の大きさを変えても反映しないという問題点がある。

フォントスタイルの見た目を比較してみよう

実際に複数のフォントスタイルを一覧で比較したい場合は下記のようにコードを記述すると視覚的に把握しやすくなる。

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()
}

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の標準フォントスタイルをベースにしたほうが柔軟性が高くなるだろう。

少しでも参考になれば幸いだ。