リーディングと行間: その概要とiOS・Androidでの設定方法

リーディングと行間とは

リーディング（発音は“レディング”）— タイポグラフィにおける隣接する行のベースライン間の垂直距離です。ベースラインはテキストの文字が配置される目に見えない線です。リーディングが大きいほど、行は互いに対してより自由に配置されます。デジタルタイポグラフィでは、リーディングはしばしば行間またはライン高さと呼ばれます。

歴史的には、この用語は金属活版印刷の時代に生まれました。組版作業者が行間を広げるために、薄い鉛のストリップを行の間に挿入していました。現代のフォントでは、リーディングはフォントサイズに対する比率として設定されます。デフォルトのシステム値は1.2（フォントサイズの120%）ですが、長いテキストやモバイルインターフェースではより大きな値が推奨されます。Material Design Typography Guidelinesによると、Webおよびモバイルインターフェースの本文テキストに最適なライン高さは1.4〜1.5です。

リーディングと行間の違い: リーディングはベースラインからベースラインまでの完全な距離であり、行間はある行の下端と次の行の上端との間の距離です。ほとんどのモバイルAPI（iOS NSParagraphStyle、Android TextView）では、行間は行の自然な高さに加えて追加のスペースとして使用されます。これは合計の行間を計算する際に重要です。

モバイルインターフェースに最適なリーディング値

最適なリーディングの選択は、フォントサイズ、行の長さ、使用コンテキスト、対象読者など複数の要因に依存します。典型的な行幅40〜60文字のモバイルインターフェースでは、フォントサイズの1.4〜1.6のリーディングが推奨されます。短い行（ラベル、ボタン）はより小さいリーディング（1.0〜1.2）を使用できます。長いテキスト（記事、説明文）は最大1.8までのより大きいリーディングが最大の可読性のために適しています。

実験データ: Wichita State University Software Usability Laboratoryの研究によると、リーディング1.5は同じ行幅でリーディング1.0と比較して読書速度を7.5%向上させることが示されました。ディスレクシアのユーザーにとって最適なリーディングはさらに高く、最大1.8です。これらのデータはWCAG 2.2の推奨事項によって確認されており、コンテンツを失うことなく行間を1.5まで増やす機能を要求しています。

書体の影響: x-height（小文字の相対的な高さ）が高いフォントは、x-heightが低いフォントよりも大きなリーディングを必要とします。例えば、Helvetica（高いx-height）は本文テキストにリーディング1.5を推奨し、Didot（低いx-height）は1.3を推奨します。これは、高いx-heightの場合、同じ行間でも行が視覚的により早く融合するためです。

iOSでのNSParagraphStyleによるリーディングの実装

iOSでは、行間はNSMutableParagraphStyleクラスを通じて制御され、2つの主要なプロパティを含みます: lineSpacing（行間の追加スペース、ポイント単位）とlineHeightMultiple（行の高さの乗数）。これらのプロパティは連携して動作します: 最終的な行の高さは、フォントの自然な高さにlineHeightMultipleを掛け、lineSpacingを加えたものとして計算されます。

let paragraphStyle = NSMutableParagraphStyle()

// 方法1: 行の高さの乗数
paragraphStyle.lineHeightMultiple = 1.5

// 方法2: 行間の追加スペース
paragraphStyle.lineSpacing = 4.0

// NSAttributedStringで適用
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — 好ましい方法です。フォントサイズが変更されると自動的にスケーリングされるためです。lineSpacingは絶対的なポイントで設定されスケーリングされないため、Dynamic Typeを使用する際に不整合が生じる可能性があります。Apple Text Programming Guideによると、アクセシビリティ対応のインターフェースには、UIFontMetricsと組み合わせてlineHeightMultipleを使用してください。

SwiftUIはTextとVStackに.lineSpacing()モディファイアを提供します。UIKitとは異なり、SwiftUIでは行間はポイントで設定され、組み込みの乗数はありません。乗数を実装するには、開発者がフォントサイズに基づいて行間を手動で計算する必要があります。制限: SwiftUIはlineHeightMultipleを直接サポートしていません — 計算された値で.lineSpacing(CGFloat)を使用してください。

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // フォントサイズの50%
    }

    var body: some View {
        Text("行間")
        Text("1.5倍")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Androidでの行間の設定

Androidでは、行間はTextViewの2つの属性を通じて設定されます: lineSpacingExtra（px単位の追加スペース）とlineSpacingMultiplier（行の高さの乗数、デフォルト1.0）。iOSと同様に、乗数はフォントサイズが変更されるとスケーリングされ、extraは絶対値です。アクセシビリティ対応のインターフェースでは、乗数を使用することが推奨されます。

// XMLレイアウトで
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Text with line spacing"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.5"
    android:textSize="16sp" />

// Kotlinでプログラム的に
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — 現代のAndroid UIフレームワーク — はTextStyleモディファイアでlineHeightパラメータを使用します。XMLアプローチとは異なり、ComposeではlineHeightはsp単位の完全な行の高さとして設定されます（デフォルト = fontSize * 1.2）。乗数を設定するには、開発者はfontSizeのパーセンテージとしてlineHeightを指定します。例: TextStyle(fontSize = 16.sp, lineHeight = 24.sp)は乗数1.5を与えます。

制限: Android API 28までは、lineSpacingExtraとlineSpacingMultiplierは一部のフォント、特にカスタムフォント（TTF/OTF）で正しく動作しません。実際のデバイスでテストすることを推奨し、systemTextViewはデフォルトでlineSpacingMultiplier 1.0を使用することに注意してください — 追加のスペースはありません。ScrollView内の長いテキストでは、明示的に行間を設定する必要があります。

CSS line-heightによるWeb開発での行間

Webでは、行間はCSSプロパティline-heightによって設定され、数値（乗数）、パーセント値、長さの単位（px、em）、またはキーワードnormalを使用できます。数値の乗数が好ましい方法です。継承され、子要素のフォントサイズに対してスケーリングされるためです。normal値はほとんどのフォントで約1.2に相当します。

/* Numerical multiplier (recommended) */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* Percentage value */
.article-content {
    line-height: 150%;
}

/* Fixed value (does not scale) */
.small-text {
    font-size: 12px;
    line-height: 18px;
}

数値の乗数 vs em: line-height: 1.5とline-height: 1.5emは異なるものです。数値の乗数は計算値として継承され、各子要素のfont-sizeに基づいて再計算されます。emは親のfont-sizeに基づく固定の計算値として継承されます。これは重要な違いです: font-size: 20pxがfont-size: 16pxの中にある場合、line-height: 1.5は30pxになりますが、line-height: 1.5emは24px（親から）になります。推奨: 常に数値の乗数を使用してください。

iOS、Android、Webでのリーディング設定の比較

異なるAPIにもかかわらず、行間設定の原理はすべてのプラットフォームで同じです。乗数はフォントサイズが変更されるとスケーリングされ、アクセシビリティに優れています。絶対値（スペース）はスケーリングされず、Dynamic Typeや大きなテキスト設定を使用する際に問題を引き起こす可能性があります。

クロスプラットフォーム戦略: デザインシステムでlineHeightをfontSizeの乗数として設定します。例えば、デザイントークンで: line-height-body = 1.5、line-height-heading = 1.1。各プラットフォームはこの乗数を独自のAPIで実装します: iOS — lineHeightMultiple、Android — lineSpacingMultiplier、Web — line-height: 1.5。これにより、すべてのプラットフォームで同じ視覚的結果が保証されます。

重要なニュアンス: iOSではlineHeightMultipleは行の完全な高さ（フォントのascender + descenderを含む）に適用されますが、AndroidではlineSpacingMultiplierはMinikinレンダリングエンジンによって計算された行の高さに適用されます。実際には、同じ乗数値でも視覚的なリーディングにわずかな違いが生じます。ピクセルパーフェクトな一致のためには、プラットフォームに応じて調整した絶対値を使用してください。