フォント・行間・文字間隔設定の基礎 — CSS & ゲームエンジン対応
テキストのレイアウト調整はWebデザインからゲーム開発まで共通の課題です。フォントサイズ・行間・文字間隔の3要素を理解することで読みやすいUIを設計できます。
line-height（行間）の適切な値とは
CSSのline-heightは行の高さを指定するプロパティです。単位なしの数値（例: 1.6）で指定するとフォントサイズに対する比率になるためレスポンシブで安全です。本文テキストは1.5〜1.8が読みやすいとされ、見出しは1.1〜1.3に詰めることが多いです。行間が狭すぎると読みにくく、広すぎると文章のまとまりが失われます。
letter-spacing（文字間隔）の使い方
CSSのletter-spacingは文字と文字の間隔を指定します。大文字のタイトルや見出しに0.05em〜0.1emを設定するとエレガントな印象になります。日本語では文字間隔を広げすぎると読みにくくなる傾向があります。ゲームのUIでフォントの種類によっては0以下の負の値で詰めることもあります。
ゲーム開発でのテキスト設定
Unity・Godot・RPGツクールなどのゲームエンジンではフォントサイズ・行間・最大横幅のパラメータをゲームエンジン側の単位で設定します。Text Layout Checkerではこれらのパラメータをプレビューし、決定値をCSS形式またはJSON形式でコピーできます。ゲームの背景画像を重ねてリアルタイム確認できるデスクトップ版が特に有効です。
A/B比較モードの活用
2つのテキスト設定を左右に並べて比較するA/Bモード（デスクトップ版）を使うと、「現在の設定」と「新しい設定」を視覚的に比較できます。フォントのチョイスで迷ったとき、行間の広い版と狭い版を並べて選択するといった使い方が効率的です。