結論

プロは「日本語は英語よりも行間を広く・行長を短く・約物を詰める」の3点で可読性を組み立てる。一次情報のデジタル庁デザインシステム(DADS)を基準に、本文は font-size:16px 以上・line-height:1.5〜1.75・letter-spacing:0.02em を土台とし、約物の余分なアキは font-feature-settings:"palt" または YakuHanJP で詰める。さらに見出し/本文のジャンプ率を150〜200%取って階層を作り、重い日本語Webフォントは見出しだけに限定して本文は端末標準フォントで軽く流す。

01 — 行間は最低1.5、読み物は1.7前後にする

漢字は画数が多く字面が大きいため、英語基準の詰まった line-height:1.2 だと文字が団子状に潰れて素人臭くなる。DADSは本文を150%(標準)/160%/170〜175%(認知負荷軽減)と段階定義しており、WCAGの最低基準も1.5。読み物は1.75が無難な落としどころで、英語より+10〜15%広げるのが定石だ。字間も 0 のままより 0.02em 以上で呼吸させる。

✗ line-height:1.15 / letter-spacing:0 → 団子状に潰れる
✓ line-height:1.8 / letter-spacing:0.04em → 行が分離して快適

primaryタイポグラフィ（概要）｜デジタル庁デザインシステムβ版

blog日本語の文章とline-heightに対する考察 #CSS - Qiita

02 — 約物の余分なアキを palt / YakuHanJP で詰める

「」（）、。などの全角約物は前後に半角分の余白を持ち、行頭や連続時に不自然な穴が空いてリズムが崩れる。素のNoto Sans JPはこの状態だ。font-feature-settings:"palt" はOpenTypeプロポーショナルメトリクスで全体を一律に詰めて引き締まるので見出し向き。本文の自然なリズムを保ちたいなら約物だけ詰める YakuHanJP(明朝は YakuHanMP)が定石になる。

✗ palt なし → 約物の前後に穴が空く
✓ palt 1 → 約物が詰まりリズムが整う
使い分け：見出し・バナーで全体を締めたいなら palt。本文の読み物で自然なリズムを保ちたいなら約物だけ詰める YakuHanJP。

blog「Yaku Han JP」から、デジタル上における字詰めの技術を振り返る｜Undercurrent

blogWebで行う役物の文字詰め方法(font-feature-settings, YakuHanJP)

03 — ジャンプ率150〜200%で見出しと本文に階層をつける

見出しと本文のサイズ比が100〜125%だと区別がつかず、のっぺりして情報設計が無いように見える。150%以上で階層が成立し、一般Webは150〜200%が標準。バナーやヒーローの主役コピーは300〜400%まで上げて高コントラスト演出にする。見出しは line-height:1.4・letter-spacing:0.01em(36px以上)で締めるのがDADS流だ。

✗ ジャンプ率 約105% → 見出しが埋もれる
✓ ジャンプ率 約200% → 階層が明確

blog【行長・行間・ジャンプ率】タイポグラフィ事始め - クモのようにコツコツと

blogジャンプ率の定義や重要性を解説！｜envision Inc.

04 — 行長は1行25〜35字に制限する

日本語の最適行長は英語(45〜75字)の約半分で、25〜35字(モバイルは約20字)。PC全幅にベタ流しすると1行が50字を超え、視線の戻りが大きくて読み疲れる。max-width:34em 程度で字数を制御するのが手堅い。日本語はハイフネーション不要なので text-align:justify(両端揃え)も有効に効く。

✗ 全幅ベタ流し(50字超) → 視線の戻りが大きい
✓ max-width で約30字 + justify → 読みやすい

blogSeven rules for perfect Japanese typography - AQ

blogJapanese Web Typography: Anatomy and Best Practices | Masaharu Hayataki

05 — paltの過剰圧縮は letter-spacing で戻す

paltは仮名・約物を一律に詰めるため、小サイズ本文に強く効かせると過剰圧縮で窮屈になる。letter-spacing:0.02〜0.08em(きつければ0.1emまで)を併用して詰めた分を戻し、font-kerning:normal も添えるのが正解。一律圧縮を避けたいなら、仮名だけプロポーショナルにする pkna という緩い代替もモダンブラウザ全対応で使える。

✗ palt のみ / letter-spacing:0 → 詰まりすぎ
✓ palt + letter-spacing:0.06em → 余白が回復

blogpgmemo: 読みやすい日本語フォントCSSとカーニング

blogUsing CSS font-feature-settings for better kerning in Japanese text - ICS MEDIA

06 — 本文は端末標準フォント、Webフォントは見出しに限定する

日本語Webフォントは2MB超で英語(約500KB)の約4倍重く、本文全文に当てるとFOIT/FOUTで体験が劣化し安っぽく感じる。本文はヒラギノ角ゴ/游ゴシック/Meiryo等のweb-safeスタックで軽く流し、Webフォント(Noto Sans JP等)は見出しだけに限定するのが定石。可変フォント+サブセット化が使えるなら本文Webフォントも現実的になってきた。

✗ 本文全文にWebフォント → 重く表示が遅い
✓ 見出しのみWebフォント + 本文web-safe → 軽快

blogJapanese Web Typography: Anatomy and Best Practices | Masaharu Hayataki

primaryタイポグラフィ（概要）｜デジタル庁デザインシステムβ版

実装スニペット

本文(読み物)— DADS準拠のベース。line-height:1.75・letter-spacing:0.02em・font-size:16px はDADS/WCAG準拠、max-width:34em で行長を25〜35字帯に収める。

body, .prose {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
               'Noto Sans JP', YuGothic, 'Yu Gothic', Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.75;          /* 漢字の字面に合わせ広め */
  letter-spacing: 0.02em;     /* DADS標準テキスト 2% */
  font-feature-settings: 'palt' 1;
  font-kerning: normal;
}
.prose p { max-width: 34em; } /* ≒1行34字に制限 */

約物だけ詰める — YakuHanJP(本文向き)。paltと違い仮名・英数は詰めず、約物のみ。本文の自然なリズムを保ちたい読み物に。明朝は yakuhanmp。

/* <link rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.min.css"> */
.prose {
  /* YakuHanJP を先頭に置くと約物だけ詰まり、本文リズムは維持 */
  font-family: 'YakuHanJP', 'Hiragino Kaku Gothic ProN',
               'Noto Sans JP', sans-serif;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

見出し / ヒーロー — paltで締める + 高ジャンプ率。見出しは line-height:1.4・letter-spacing:0.01em(DADS)、ヒーローはジャンプ率300%超で行間を詰める。

.heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 2rem;            /* 本文16px比 約200% ジャンプ率 */
  line-height: 1.4;           /* DADS見出し 140% */
  letter-spacing: 0.01em;     /* 36px+は1%、それ未満は0〜 */
  font-feature-settings: 'palt' 1;
}
.hero-copy {
  font-size: 3rem;            /* 本文比 300%超でヒーロー演出 */
  line-height: 1.25;
  letter-spacing: 0;
  font-feature-settings: 'palt' 1;
}

paltが小サイズで詰まりすぎる時の補正。letter-spacing で戻し、pkna(プロポーショナル仮名)を緩い代替に。

.note {
  font-size: 14px;
  font-feature-settings: 'palt' 1;
  letter-spacing: 0.06em;     /* 0.02–0.08em、きつければ0.1emまで */
  line-height: 1.8;
}
/* paltが強すぎる場合の代替: 仮名のみプロポーショナル */
.alt { font-feature-settings: 'pkna' 1; }

チェックリスト

  • 本文の line-height は1.5以上、読み物なら1.7前後にしたか
  • 本文 font-size は16px以上、補助テキストでも14pxを下限にしたか
  • letter-spacing をサイズ別に 0.02em / 0.01em / 0 で設定したか
  • 約物のアキを palt(見出し)か YakuHanJP(本文)で詰めたか
  • 見出し/本文のジャンプ率は150〜200%以上あるか
  • 本文の行長を max-width で25〜35字帯に収めたか
  • 小サイズにpaltを当てた箇所は letter-spacing で戻したか
  • 本文は端末標準フォント、Webフォントは見出しに限定したか

限界 / 出典

数値は「正解1点」ではなくレンジである点に注意。DADSは line-height 150〜175%・letter-spacing 0/0.01/0.02em を段階トークンとして提示しており、コンテンツ特性(読み物/UI/業務系)で選ぶ前提だ。記事採用の1.75は中間値の一例で、情報密度優先の管理画面UIなら120〜130%まで下げてよい。ジャンプ率150〜200%・行長25〜35字などの具体値は一次情報ではなく実務ブログ由来(confidence medium)が多く、権威度は DADS > AQ/ICS > 個人ブログの順。約物の palt/pkna はフォント側に当該OpenTypeテーブルがある場合のみ効き、フォールバックのweb-safeフォントでは効かない(Noto Sans JPは対応)。日本語フォント2MB・英語500KBは単一ブログの概算で、フォントやサブセットで大きく変動する(2024〜2026は可変フォント+サブセット化で緩和傾向)。letter-spacing:0.05em というHayataki固有値はDADSの0.02emと食い違い、小サイズや約物未処理時の代替値と解釈するのが妥当。DADSはβ版で改訂が続くため、実装前に最新版の数値確認を推奨する。

primaryタイポグラフィ（概要）｜デジタル庁デザインシステムβ版

blogSeven rules for perfect Japanese typography - AQ

blogJapanese Web Typography: Anatomy and Best Practices | Masaharu Hayataki

blogWebで行う役物の文字詰め方法(font-feature-settings, YakuHanJP)

blog「Yaku Han JP」から、デジタル上における字詰めの技術を振り返る｜Undercurrent

secondaryUsing CSS font-feature-settings for better kerning in Japanese text - ICS MEDIA

blogpgmemo: 読みやすい日本語フォントCSSとカーニング

blog【行長・行間・ジャンプ率】タイポグラフィ事始め - クモのようにコツコツと

blog日本語の文章とline-heightに対する考察 #CSS - Qiita

blogジャンプ率の定義や重要性を解説！｜envision Inc.