SwiftUIで文字の見た目を細かく調整したい時に便利なのが .kerning(_:) です。
文字と文字の間隔（字送り）を変更できるモディファイアで、デザイン性の高いUIや、読みやすさを意識した文字表示に役立ちます。
この記事では .kerning(_:) の基本的な意味や使い方、引数の意味、活用シーン、注意点 までわかりやすく解説します。
.kerning(_:) とは？
.kerning(_:) は SwiftUI の Text に対して使えるモディファイアで、文字同士の間隔を広げたり詰めたりできます。
例えば「Swift」という文字を kerning(5) とした場合、S と w、w と i の間隔がそれぞれ広がります。
逆にマイナスの値を指定すると、文字がギュッと詰まった見た目になります。
これは「文字ごとの間隔（カーニング）」を調整するものです。
文章全体のレイアウトや読みやすさに影響するため、デザイン調整ではよく使われます。
具体例：文字間隔を広げたり詰めたりする
「SwiftUI」という文字を.kerning(_:) の値をいくつか変えて、どのようにテキストの幅が変わるかを確認してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import SwiftUI struct ContentView: View { var body: some View { VStack(spacing: 20) { Text("SwiftUI") .font(.title) .kerning(5) // 間隔を広げる Text("SwiftUI") .font(.title) .kerning(-1) // 間隔を詰める Text("SwiftUI") .font(.title) .kerning(0) // デフォルト } .padding() } } |
表示は下記の通りで、比較すると文字の間隔が変わっているのがぱっと見でわかります。
- 一行目：
.kerning(5)→ 文字がゆったりと間隔を空けて表示される - 二行目：
.kerning(-1)→ 文字が詰まって表示される - 三行目
.kerning(0)→ デフォルトの文字間隔
このように、.kerning(_:)を使えば、デザインや雰囲気に応じて「読みやすくしたい」「クールに見せたい」といった目的で調整できます。
指定の仕方
.kerning(_:) の引数はシンプルで、間隔をポイント数（CGFloat）で指定するだけです。
|
1 2 3 |
Text("Hello SwiftUI") .kerning(2) // 文字間隔を2pt広げる |
数値を変えるだけで文字の見た目を自由に調整できます。
.kerning(_:) の活用シーン
.kerning(_:) は特にタイトルや見出しのデザインで使うと効果的です。
以下に具体的な活用シーンを挙げます。
- ロゴ風のタイトル文字をデザインするとき
- 見出しテキストを強調して「間」を持たせたいとき
- デフォルトの文字詰めだと読みにくいフォントを調整したいとき
- 海外風デザインやモダンな印象を出したいとき
UI デザインでは「文字の間隔」が全体の印象に直結するため、kerning を使うと見栄えがぐっと良くなります。
注意点
.kerning(_:) は便利ですが、使う際にはいくつか注意点があります。
- フォントによって効果が違う
同じ値でもフォントごとに見た目の変化が異なるため、実際のUIで確認が必要です。 - 全体に一律で適用される
.kerning(_:)はテキスト全体に均一に適用されます。細かい調整が必要ならAttributedStringを使いましょう。 - 日本語フォントでは効果が薄い
アルファベットや数字に比べると効果が分かりにくいことがあります。 - .tracking(_:) との違い
.tracking(_:)は文字ごとの間隔を均等に広げるのに対し、.kerning(_:)は文字ペアごとの補正に基づく間隔を調整します。自然な見た目にしたい場合は.kerning(_:)が適しています。
まとめ
今回は文字間隔を調整する.kerning(_:)を紹介しました！
.kerning(_:)は文字の間隔を調整するモディファイア- 正の値で広げ、負の値で詰められる
- タイトルやロゴ風テキストなどデザイン面でよく使われる
- 日本語フォントでは効果が薄い場合がある
.tracking(_:)との違いを理解して使い分けると便利
文字の見た目をちょっと工夫するだけで、アプリ全体の印象がグッと洗練されます。
ぜひ .kerning(_:) を活用して、デザイン性の高いテキストUIを作ってみてくださいね！
