アプリ開発におけるLine Height — その概要とタイポグラフィへの影響

タイポグラフィにおけるLine Heightとは

Line Height（行の高さ）は、連続する行のベースライン間の距離を決定する基本的なタイポグラフィパラメータです。Webおよびモバイル開発において、line heightはテキストの垂直リズムを設定します。各行は特定の高さを占め、このパラメータは次の行に移動する際に累積されます。Line heightには、グリフの実際の高さ（アセンダー＋ディセンダー）だけでなく、読みやすさを向上させる追加のスペースも含まれます。

数学的には、line heightは次のように表されます：line-height = font-size × multiplier。font-size = 16 px、multiplier = 1.5の場合、line-height = 24 pxになります。この場合の行間（leading）は24 -（アセンダー＋ディセンダー）ピクセルです。ほとんどのデザインシステムやプラットフォームが乗数を使用するのは、フォントサイズが変更されたときに自動的にスケールするからです。

Material Design Type Scale（2025）によると、line heightはfont-sizeやfont-weightと並んで、アプリケーションのタイポグラフィシステムの3つの主要パラメータの1つです。タイポグラフィ階層のすべてのレベルで一貫したline height値は、インターフェースを視覚的に統合する垂直リズムを生み出します。最適値から10%のline-heightのずれは肉眼でも確認でき、インターフェースの知覚品質を低下させます。

Line HeightとLeadingの違い

Leading（「レディング」と発音）は、グリフの高さを差し引いたベースラインからベースラインまでの行間距離を表す歴史的なタイポグラフィ用語です。金属活版印刷では、leadingは行間を広げるために挿入される鉛の線を指していました。Line heightは、フォントの高さとleadingの両方を含む、より現代的な概念です。

実際には、FigmaやSketchのデザインをコードに変換する際にこの違いが重要になります。デザインツールは通常line-height（または単に行の高さ）を指定します。モバイルプラットフォームのAPIは異なる用語を使用する場合があります。iOSはminimumLineHeight/maximumLineHeightとともにlineSpacing（leadingに近い）を使用し、Androidはalignmentとtrimを持つLineHeightStyleを使用し、Flutterはheight（単位なしの乗数）を使用します。

// iOS: difference between line height and line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Direct line height setting
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Line spacing (additional space between lines)
paragraphStyle.lineSpacing = 4.0  // added to natural line height of font

重要な違い：minimumLineHeightを設定すると、すべての行が同じ高さになり、リズミカルなグリッドに適しています。lineSpacingのみを設定すると、行の高さはフォントサイズによって変化します。これはより柔軟ですが、予測可能性は低くなります。デザインシステムでは、厳密に制御された結果が得られるminimumLineHeightが推奨されます。

IBM Carbon Design System — Typography Guidelines（2025）によると、line heightとleadingの違いは、カスタムフォントを使用する場合に特に顕著です。フォントに大きな組み込みleadingがある場合（SF Proなど）、lineSpacing = 0でも許容できる結果が得られます。フォントのleadingが小さい場合（一部のオープンソース書体）、追加のlineSpacingがないと行が詰まって見えます。

モバイルインターフェースに最適なLine Height

最適なline heightは、フォントサイズ、行の長さ、書体、対象読者など、いくつかの要因によって異なります。モバイルデバイスの本文テキスト（行の長さ35〜55文字）の場合、推奨範囲はfont-sizeの1.4〜1.6倍です。この値は、テキストの視覚的な結束を失うことなく、行間での快適な視線移動に十分な垂直間隔を提供します。

見出しの場合、行の長さは通常短く（2〜6語）、line heightは小さくできます（font-sizeの1.1〜1.25倍）。見出しは長時間の読書ではなく注意を引くことが主な機能であるため、大きな行間を必要としません。さらに、大きな見出しフォントサイズ（24〜32 pt）でline-height 1.5を使用すると、ページの垂直リズムを乱す過剰なスペースが生じます。

• 本文（16〜18 pt） — line-height 1.4〜1.6。行の長さが画面幅によって制限されるモバイルデバイスでの快適な読書のための最小値です。
• 小さなテキスト（11〜13 pt） — line-height 1.3〜1.5。フォントサイズが小さいほど行が短くなり、目が次の行をより速く見つけられるため、乗数は小さくて済みます。
• 大きなテキスト（20〜32 pt） — line-height 1.1〜1.25。フォントが大きいほど、読みやすさに必要な相対的な行間は少なくなります。
• 等幅テキスト — line-height 1.3〜1.5。等幅フォント（コード用）は通常メトリクスが大きいため、line-heightを1.3に減らせます。

// Flutter: line height in design system
class AppTextStyles {
    static const body = TextStyle(
        fontSize: 16,
        height: 1.5,      // line-height 24px
    );

    static const headline = TextStyle(
        fontSize: 28,
        height: 1.2,      // line-height 33.6px
    );

    static const caption = TextStyle(
        fontSize: 12,
        height: 1.4,      // line-height 16.8px
    );
}

W3C — Accessibility Requirements for Typography（2025）によると、本文テキストのline heightが1.2未満はアクセシビリティの障壁と見なされます。失読症や視覚障害のあるユーザーは、密度の高いテキストを読む際に大きな困難を経験します。WCAG 2.2はメインコンテンツに少なくとも1.5のline-heightを推奨していますが、モバイルインターフェースでは画面幅が限られていることを考慮して1.4に下げることもできます。

iOSにおけるLine Height：UIKitとSwiftUI

iOSでは、line heightはNSMutableParagraphStyleまたはSwiftUIの組み込みモディファイアを介して制御されます。UIKitは3つの主要なプロパティを提供します：minimumLineHeightとmaximumLineHeight（正確な行の高さを設定）とlineSpacing（行間の追加スペース）。TextKit（NSTextStorage、NSLayoutManager）を使用する場合、line heightはlineFragmentRectで考慮され、テキストブロックのジオメトリ計算に影響を与えます。

// iOS UIKit: setting line height via NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Important: minimum + maximum = fixed line-height

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .paragraphStyle: paragraphStyle
]

let label = UILabel()
label.attributedText = NSAttributedString(
    string: "Text with fixed line height",
    attributes: attributes
)

SwiftUIでは、line heightは.lineSpacing(value)モディファイア（行間に追加スペースを追加）またはline heightを含むカスタムTextStyleを備えた.fontを介して設定されます。SwiftUIはダイナミックタイプもサポートしています。設定されたline heightは、ユーザーが設定でフォントサイズを変更するとスケールします。

// SwiftUI: line height via lineSpacing
Text("Text with custom line spacing
second line
third line")
    .font(.body)
    .lineSpacing(4)     // additional space between lines

// SwiftUI: fixed line height via custom style
Text("Heading with line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // compensation for precise line-height

Apple HIG — Typography Implementation（2025）によると、minimumLineHeightを介して固定line-heightを使用する場合、値がフォントの自然なline-heightより小さくないことを確認する必要があります。minimumLineHeightがアセンダー＋ディセンダーより小さい場合、UIKitは設定を無視して自然な高さを使用します。フォントやサイズを変更すると、予期しない結果が生じる可能性があります。

AndroidにおけるLine Height：ViewシステムとCompose

Android開発では、line heightは従来のViewシステムとJetpack Composeで異なる方法で管理されます。Viewシステムでは、TextView.setLineSpacing(extra, multiplier)メソッドが使用されます。extraパラメータはピクセル単位の追加スペース、multiplierは自然な行の高さの係数です。結果の高さ = 自然なline-height × multiplier + extraです。

// Android View system: line spacing
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Usage in XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

Jetpack Composeでは、LineHeightStyleクラスを使用してline heightを管理し、行間スペースのアライメント（Alignment）とトリム（Trim）を設定できます。これは単純な乗数よりも細かい制御を提供します。たとえば、追加の行間スペースを行の上下に均等に配置する（align.Center）か、完全に上に追加する（align.Top）かを指定できます。

// Jetpack Compose: LineHeightStyle example
Text(
    text = "Sample text
with custom LineHeightStyle
in Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Simple multiplier via TextStyle
Text(
    text = "Line height multiplier",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Android Developers — Compose Text Styling（2025）によると、LineHeightStyle.Trim.None（デフォルト）は最初と最後の行のスペースを保持するため、CardやColumnのアライメントが崩れる可能性があります。固定高さのコンテナにはTrim.Both、下端が重要なテキストブロックにはTrim.LastLineが推奨されます。

FlutterにおけるLine Height：TextStyleとStrutStyle

Flutterでは、line heightはTextStyleクラスのheightプロパティを介して設定されます。これはfont-sizeの単位なし乗数です。fontSize: 16でheight: 1.5の場合、line-heightは24.0になります。height値は暗黙的にfontSizeと乗算されるため、フォントサイズが変更されるとline-heightは比例してスケールします。FlutterはStrutStyleも提供します。これは、行内の実際のグリフに関係なく固定のline-heightを強制するメカニズムです。

// Flutter: line height via TextStyle.height
Text(
    'Text with line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle for fixed line height
Text(
    'Text with StrutStyle
fixed line height
independent of glyphs',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyleは、異なるフォントサイズのリスト（チャット、ニュースフィードなど）で特に役立ちます。コンテンツに関係なくすべての行の高さを同じにする必要があります。StrutStyleがない場合、ディセンダーのない文字のみを含む行は、「p」や「y」などの文字を含む行よりも実際の高さが小さくなり、スクロール時にテキストがガタつく原因になります。

Flutter Documentation — Text Layout（2025）によると、forceStrutHeight: trueのStrutStyleは、各行の高さが指定された値と等しいことを保証し、実際のグリフはこのスペース内でベースラインによって整列されます。これは、垂直リズムが視覚的認識にとって重要なテキストリストの標準的なアプローチです。

異なる画面に対応するアダプティブなLine Height

モバイルアプリケーションは、さまざまな画面サイズ、ピクセル密度、アクセシビリティ設定を持つデバイスで動作します。Line heightは読みやすさを維持しながらこれらの変化に適応する必要があります。主なルール：pxやptの固定値ではなく、単位なしの乗数（unitless）を使用して、line-heightがfont-sizeとともにスケールするようにします。

Dynamic Type（iOS）やfontScale（Android）を使用する場合、フォントサイズはベースラインから20〜50%増加する可能性があります。乗数で指定されたline-heightは自動的にスケールします。line-heightが固定値（例：font-size 16 ptで24 px）として設定されている場合、フォントが22 ptに増加すると相対的なline-heightは1.09に低下します。これはすでに読みやすさのしきい値を下回っています。

// iOS: adaptive line height with Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Calculate line-height as multiplier from dynamic font
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = lineHeight
paragraphStyle.maximumLineHeight = lineHeight

Material Design — Responsive Typography（2025）によると、タブレットや大画面（幅600 dp以上）の場合、行の長さが大きくなるため、本文のline-heightをスマートフォンより0.1〜0.2増やすことが推奨されます。画面幅が動的に変化する折りたたみデバイスの場合、構成が変更されるたびにline-heightを再計算する必要があります。