詰まった文字の組み合わせを1か所だけ広げるには、まず見出しのトラッキングとフォントのカーニングを確認します。短いラテン文字のラベルなら、局所的なインラインマージンで1か所の境界を広げられますが、その位置でシェーピングが途切れます。このMacでの作業手順では、そうしたトレードオフが適切な場合を説明します。

問題はトラッキング、カーニング、それとも局所的な詰まり？

このガイドは、Macでウェブ見出しを調整し、そのHTMLとCSSを編集できる人を対象としています。目的は、残りのテキストを通常のブラウザのフローに保ったまま、見た目の悪い組み合わせを1か所改善することです。架空の見出し NOVA STUDIO を具体例として使いますが、すべてのフォントでこの文字が詰まるという意味ではありません。

トラッキングは、選択範囲全体の文字間隔を調整します。CSSでは letter-spacing で指定し、正の値は間隔を広げ、負の値は詰めます。そのため、このプロパティを見出し全体に適用すると、問題の組み合わせ以外も変わります。まず、継承された負の値が原因かどうか確認してください。MDN: letter-spacing

カーニングは、フォントに保存された文字間隔の情報を使います。CSSプロパティ font-kerning が受け付ける値は auto、normal、none で、指定した文字の組み合わせに対する任意の距離は設定できません。normal にするとフォントのカーニング情報が使われますが、欠けている組み合わせの調整を補ったり、特定の組み合わせが適切に見えることを保証したりはできません。MDN: font-kerning

マークアップを追加する前に、次の判断表を参考にしてください。

見た目 最初にすること 次に進む場合
ほとんどの間隔が詰まりすぎている 見出しを letter-spacing: normal にして比較する それでも1組だけ調整が必要な場合に限り、次に進む
テキストアニメーションの開始後に見出しの見た目が変わる 分割前のテキストと比較する 補正を加える前に、分割の設定を調べる
短いラテン文字の単語で、ほかは問題ないのに1か所だけ詰まって見える 局所的な間隔調整を検討する その境界でシェーピングが変わることを許容する
元のシェーピングを正確に保つ必要がある テキストランを分割せず、適切な別のフォントやフォントバージョンを比較する 境界を挿入せずにうまく表示できるものを選ぶ

Chromeで確認中のページを開き、Command–Option–C を押してから見出しをクリックします。Elements パネルでマークアップが選択され、Styles タブに適用されるCSSが表示されます。見出しのルール、継承されたトラッキング、個々の文字を囲む要素を確認してください。この手順は、Chromeが案内するMacでの操作方法に沿っています。Chrome DevToolsを開く

実際に使うフォント、ウェイト、見出しサイズで比較してください。例のArialテキスト向けに選んだ調整値はあくまで説明用です。意図した見出しを表示しながら、実際の値を決めてください。変更を1つずつ比較できるよう、元の宣言を記録しておきます。

局所的な調整で何を保てる？

単純な span は、それ自体に意味を持たせずにスタイル指定の目印を設けます。子要素を表すため、見出しのテキスト NOVA STUDIO はそのままにして、問題の境界で終わる接頭部分をクラスで識別できます。WHATWG HTML Standard: span要素

ただし、インライン要素によるラッパーと間隔調整では、それぞれ異なる影響が生じます。W3Cの現行の「CSS Text Level 3 Candidate Recommendation Draft」では、実質的な書式変更がないインライン境界をまたいでも、シェーピングを連続させる必要があるとされています。また、文字の間にあるインラインマージン、ボーダー、パディングが0でない場合、その境界でシェーピングが途切れるとも規定されています。したがって、局所的なマージンを使うと、調整対象の文字の組み合わせで元のカーニングが保たれるとは限りません。CSS Text Module Level 3: 要素境界をまたぐシェーピング

この例では、NOV を1つのインラインspanで囲み、その直後に A を置きます。その接頭部分に末尾マージンを加えると、V–A の境界が広がります。ほかの文字は通常のインラインテキストのままです。すべての文字に個別のボックスを付ける必要はありません。横書きの左から右へのテキストでは、margin-inline-end は右マージンに対応します。MDN: margin-inline-end

結果を評価する際は、この制約が重要です。目に見える変化には、境界をまたぐシェーピング調整が失われることと、マージンが加わることの両方が含まれます。元の文字間隔に指定した値を正確に足した結果になるとは限りません。元のシェーピングを保つ必要がある場合は、テキストランを分割せず、フォントを比較してください。

Macで局所調整の完全な例を試す

この方法を管理中の見出しに適用する前に、独立したプレビューを作成します。TextEditで File → New を選択し、次に Format → Make Plain Text を選びます。以下の文書全体を貼り付け、pair-preview.html として保存し、確認されたら Use .html を選択します。AppleはHTMLファイルの作成手順を案内しています。MacのTextEditでHTML書類を扱う

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local pair spacing preview</title>
  <style>
    body {
      margin: 2rem;
      background: #fafafa;
      color: #222;
    }

    main {
      max-width: 48rem;
    }

    h1 {
      --pair-gap: 0.02em;
      font-family: Arial, sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: normal;
      font-kerning: normal;
    }

    .keep-word {
      white-space: nowrap;
    }

    .pair-prefix {
      margin-inline-end: var(--pair-gap);
    }
  </style>
</head>
<body>
  <main>
    <p>Heading preview</p>
    <h1><span class="keep-word"><span class="pair-prefix">NOV</span>A</span> STUDIO</h1>
    <p>Change the pair gap, save, and reload to compare.</p>
  </main>
</body>
</html>

保存した文書をブラウザで開きます。見出し内のテキストは、表示された1行のソースのままにしてください。NOV と A の間にはスペースがなく、STUDIO の前には通常のスペースが1つあります。これにより、表示される空白文字や特殊な空白文字を挿入せず、ラベルの文言をそのまま保てます。

カスタムプロパティ --pair-gap で、選択した境界のマージンを調整します。初期値は説明用です。フォントサイズが 64px の場合、0.02em は 1.28 CSSピクセルのマージンに相当します。40px では 0.8 CSSピクセルです。マージンは文字サイズに応じて変わりますが、見た目の調整には引き続き確認が必要です。MDNでは em マージンは文字サイズに相対的であると説明されています。MDN: margin-inline-end

外側の .keep-word span は、NOVA のみに white-space: nowrap を適用します。これにより短い単語は分割されず、STUDIO の前にある通常のスペースでは折り返せます。意図的に1行に収める場合を除き、見出し全体には適用しないでください。MDN: white-space

後でTextEditがファイルをリッチテキストとして開く場合は、File → Open を選択してファイルを指定し、Show Options を選んで Ignore rich text commands を選択します。または、TextEdit → Settings → Open and Save で Display HTML files as HTML code instead of formatted text を有効にしてください。AppleのTextEdit HTMLガイド

必要最小限の調整値をどう選ぶ？

間隔が気になるまで繰り返し広げるのではなく、条件を揃えて比較します。

  1. --pair-gap を 0em に設定し、保存して再読み込みします。まず調整前の見出しを確認します。
  2. 0.01em、次に 0.02em を試し、それぞれの比較の間に保存して再読み込みします。これらは試行用の値で、タイポグラフィの推奨基準ではありません。
  3. 対象の文字の組み合わせを、すぐ隣の文字と合わせて評価します。単語全体のリズムになじんだら止めます。
  4. ブラウザの幅を狭めて見出しを折り返します。調整した文字だけでなく、見出し全体を確認します。
  5. レイアウトで実際に使う各見出しサイズとウェイトで繰り返します。

マージン0と0以外の比較は慎重に行ってください。0を超えると前述のシェーピング境界が生じるため、最初の変化は数値上のマージン以上に大きく見える場合があります。わずかな正の値でも文字の組み合わせが離れすぎるなら、この回避策をやめて、フォントや見出しの既存のスタイルを見直してください。

この調整はレイアウト上のスペースも消費します。境界より後ろの文字もテキストとともに移動するため、使用可能な幅ぎりぎりの見出しでは、折り返し位置が変わることがあります。局所的な間隔調整ならすべての文字間にトラッキングを加えずに済みますが、改行位置が変わらないとは限りません。編集を残す前に、狭い場合と広い場合のレイアウトを確認してください。

折り返さないラッパーは短い単語だけに使ってください。単語自体が使用可能な幅を超えると、はみ出すことがあります。そのレイアウトでは見出しのサイズを小さくするか、はみ出しを隠すのではなくラッパーの使用を再検討してください。MDNでは、white-space を使った折り返し制御と、単語内での改行を許可するプロパティを区別しています。MDN: white-space

見出しですでにSplitTypeを使っている場合は？

SplitTypeは、行、単語、文字を要素で囲むアニメーション用ユーティリティです。公式ドキュメントでは、分割や元に戻す際の文字のわずかな位置ずれを防ぐため、対象要素に font-kerning: none を指定することを推奨しています。この推奨はアニメーションのワークフローに関するもので、採用すると見出し全体の間隔が変わる場合があります。SplitTypeのドキュメント

既存の見出しでSplitTypeを使っている場合は、別の調整を加える前に元のテキストと比較してください。このライブラリのドキュメントでは、元の内容を復元するインスタンスメソッド instance.revert() が説明されています。SplitTypeインスタンスをすでに管理している実装では、ドキュメントに記載されたライフサイクルに沿って元の状態を確認してください。上のローカルHTMLの例には、ライブラリへの依存がありません。SplitType: 分割テキストを元に戻す

サイズ変更時の挙動も確認してください。SplitTypeによると、相対配置された単語や文字の分割は再配置に応じて折り返されますが、行単位の分割や絶対配置では、コンテナのサイズ変更後に再分割が必要です。幅を変えたときだけ詰まりが見える場合は、文字の組み合わせに対する恒久的な調整を追加する前に、そのレイアウトの挙動を調べてください。SplitType: レスポンシブテキスト

このように文字の組み合わせを1か所だけ調整する場合、実用上は間隔を指定する目的だけで文字分割を導入しないほうがよいでしょう。例に必要な以上のレイアウト境界が生じるためです。

テキストランを分割せずに保つべき場合は？

局所的なマージンの例は、シンプルなラテン文字間で意図的に選んだ境界にだけ使います。すべての文字列位置を囲む処理に一般化しないでください。W3Cは、要素境界で書記素クラスタや合字を分割すると、一貫しない、または望ましくない表示になる場合があると警告しています。文字列上の位置が、必ずしもシェーピングを中断するのに適した場所とは限りません。CSS Text Module Level 3: 文字とレター

シェーピングを正確に保つ必要がある場合は、見出しを連続したテキストのままにし、標準のカーニング設定を比較して、その文字の組み合わせを適切に表示できるフォントを選びます。局所的な例外を許容できる場合は、境界を1か所追加し、必要最小限のマージンを使って、単語と行の折り返しを合わせて確認します。

出典