欧文の既定値のまま組まない

/* 和文の本文はこの2つで決まる。

   line-height: 1.7〜1.9
     CSSの既定値 1.2 は欧文の値。ラテン文字は小文字の高さが低く、
     行が詰まっても字面が重ならない。和文は正方形の枠いっぱいに
     字面があるため、1.2 では上下の行が接触して読めなくなる。

   letter-spacing: 0
     和文のフォントは、字と字の間隔をすでに含んだ設計になっている。
     ここをマイナスにすると設計を壊すだけで、読みやすくはならない。
     見出しでも 0 から下げない。 */
.prose {
  line-height: 1.85;
  letter-spacing: 0;
  font-size: 1rem;
}

/* 1行の長さも読みやすさを決める。日本語は 35〜45 文字くらいが目安で、
   em で指定すると文字サイズを変えても比率が保たれる。 */
.prose p { max-width: 40em; margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }

/* 見出しは本文より詰める。文字が大きいぶん、同じ比率だと
   行間が開きすぎて塊に見えなくなる。それでも 1.3 は下回らない。 */
.prose h2 {
  font-size: 1.35rem;
  line-height: 1.5;
  letter-spacing: 0;
  margin: 0 0 .5em;
}

/* 短い標識（ボタン・タブ・ラベル）だけは、少し開けると締まる。
   読ませる文ではないので、ここは例外にしてよい。 */
.tag {
  display: inline-block;
  font-size: .74rem;
  line-height: 1.8;
  letter-spacing: .12em;
}

<div class="card">
  <p class="card-cap">推奨のスタック — <code>var(--font-sans)</code></p>
  <p class="spec" data-probe>春はあけぼの。Web Typography 2026。</p>
</div>

<div class="card">
  <p class="card-cap">OSのUIフォント — <code>system-ui</code></p>
  <p class="spec ui-font" data-probe>春はあけぼの。Web Typography 2026。</p>
</div>

<div class="card">
  <p class="card-cap">指定なし（ブラウザ既定） — <code>初期値</code></p>
  <p class="spec" style="font-family: initial" data-probe>春はあけぼの。Web Typography 2026。</p>
</div>

<div class="card">
  <p class="card-cap">
    Yu Gothic を Medium 抜きで指定 — <code>"Yu Gothic", sans-serif</code>（Windowsで細くなる）
  </p>
  <p class="spec" style='font-family: "Yu Gothic", sans-serif' data-probe>春はあけぼの。Web Typography 2026。</p>
</div>

/* 和文のwebフォントは1書体で 2〜5MB になる。1文字ずつ字形を
   持つ必要があるためで、欧文の 20〜100KB とは桁が2つ違う。
   サブセット分割で改善はするが、それでも重い。
   「本文は OS 標準、必要ならロゴや見出しだけ webフォント」が
   現実的な落としどころになる。 */
:root {
  /* 欧文と和文を1つのスタックに並べる。ブラウザは1文字ずつ
     前から順に探すので、欧文書体を先に書けば英数字はそちらが当たり、
     かなと漢字は後ろの和文書体が当たる。1行で混植ができる。 */
  --font-sans:
    /* 1. 欧文（英数字だけをここで拾わせる） */
    "Helvetica Neue", Arial,
    /* 2. macOS / iOS */
    "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    /* 3. Windows。Yu Gothic は素の指定だと細すぎるので
          Medium を先に置く。ここを外すと Windows だけ薄く見える。 */
    "Yu Gothic Medium", "Yu Gothic", "Meiryo",
    /* 4. Android / Linux */
    "Noto Sans JP", sans-serif;

  /* 等幅は数字とコードのため。和文は等幅にしない
     （和文の等幅は全角幅になり、英数字と揃わない）。 */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body { font-family: var(--font-sans); }

/* system-ui は「OSのUIフォント」を指す。ブラウザのUIと同じ見え方に
   なるので、アプリ的な画面では選択肢になる。ただし何が当たるかを
   こちらで決められないため、読み物の本文には向かない。 */
.ui-font { font-family: system-ui, sans-serif; }

// 指定したスタックのうち、実際にどの書体が使われたかを調べる。
// getComputedStyle は「指定した文字列」を返すだけなので、描画して測る。
//
// 和文でここが難しくなる理由:
//   欧文なら「幅が変われば別の書体」で判定できる。しかし和文の字は
//   どれも同じ全角幅なので、書体が変わっても width は 1px も動かない。
//   そこで width だけでなく、実際に墨が乗る範囲（actualBoundingBox）
//   まで含めた署名で比べる。書体が違えば字の高さや張り出しが変わる。
const GENERIC = ["monospace", "serif", "sans-serif"];

// 欧文と和文を別々に測る。同じスタックでも当たる書体が違うからで、
// それを見せるのがこのサンプルの目的。
const SAMPLES = { 欧文: "Web Typography 2026", 和文: "春はあけぼの年鬱" };

function signature(font, text, cv) {
  cv.font = font;
  const m = cv.measureText(text);
  return [
    m.width,
    m.actualBoundingBoxAscent,
    m.actualBoundingBoxDescent,
    m.actualBoundingBoxLeft,
    m.actualBoundingBoxRight,
  ]
    .map((v) => Math.round((v || 0) * 100) / 100)
    .join("/");
}

// 「その書体 → 総称ファミリ」の署名が、総称ファミリ単体と違えば、
// その書体が実在して使われている。総称ファミリ3種のどれか1つでも
// 違えば有りとする（1種類だけだと偶然の一致で取りこぼす）。
function fontCovers(name, size, cv, sample) {
  return GENERIC.some(
    (g) =>
      signature(`${size} "${name}", ${g}`, sample, cv) !==
      signature(`${size} ${g}`, sample, cv),
  );
}

function actualFont(el, sample) {
  const cs = getComputedStyle(el);
  const size = cs.fontSize;
  const cv = document.createElement("canvas").getContext("2d");
  const stack = cs.fontFamily
    .split(",")
    .map((s) => s.trim().replace(/^["']|["']$/g, ""));

  for (const name of stack) {
    // 総称ファミリ（sans-serif / system-ui など）は書体名ではなく
    // 「ブラウザに選ばせる」という指示。ここに到達したら、
    // それ以降は実際の書体名を特定できない。
    if (GENERIC.includes(name) || name.startsWith("ui-") || name === "system-ui") {
      return `${name}（ブラウザ任せ）`;
    }
    if (fontCovers(name, size, cv, sample)) return name;
  }
  // この方法の限界。当たっている書体が、総称ファミリの既定と
  // まったく同じ書体だった場合、測っても差が出ないので区別できない。
  return "判別できず（総称ファミリと同じ字形）";
}

for (const el of document.querySelectorAll("[data-probe]")) {
  const p = document.createElement("p");
  p.className = "actual";
  p.textContent = Object.entries(SAMPLES)
    .map(([label, sample]) => `${label}: ${actualFont(el, sample)}`)
    .join("　/　");
  el.after(p);
}

<div class="card">
  <p class="card-cap"><i>推奨</i> — line-break: strict / overflow-wrap: break-word / text-wrap</p>
  <div class="prose demo">
    <h2>見出しは各行の長さを均す</h2>
    <p>
      仕様書は
      <span class="nowrap">2026年9月1日</span>
      に更新しました。詳細は
      <span class="nowrap">https://example.com/docs/typography</span>
      を参照してください。処理は、およそ
      <span class="nowrap">120ms</span>
      で完了します。
    </p>
  </div>
</div>

<div class="card">
  <p class="card-cap"><b>word-break: break-all</b> — 和文の行末は揃うが、英単語が途中で切れる</p>
  <div class="prose demo bad-break">
    <h2>見出しは各行の長さを均す</h2>
    <p>
      仕様書は 2026年9月1日 に更新しました。詳細は https://example.com/docs/typography を参照してください。処理は、およそ 120ms で完了します。
    </p>
  </div>
</div>

<div class="card">
  <p class="card-cap"><b>指定なし</b> — 小書きのかなが行頭に来ることがある</p>
  <div class="demo no-linebreak no-wrap-style">
    <h2>見出しは各行の長さを均す</h2>
    <p>
      しゃっくりがちょうど止まったところで、きゅうに雨が降ってきました。仕様書は 2026年9月1日 に更新しています。
    </p>
  </div>
</div>

/* 和文は単語の切れ目が無いので、既定でどこでも折り返す。
   そのままだと「行頭に句読点が来る」「英単語が途中で切れる」
   といった読みにくさが出る。指定すべきは次の4つ。 */

/* 1. 禁則処理の強さ。
      normal は小書きのかな（っゃゅょ）や長音を行頭に許すが、
      strict にすると許さなくなる。読み物では strict のほうが整う。
      句読点や閉じ括弧が行頭に来ないのは、どちらでも既定で守られる。 */
.prose { line-break: strict; }

/* 2. 長い英数字やURLのはみ出し対策。
      anywhere ではなく break-word にする。anywhere は
      はみ出しの計算方法まで変わり、隣の要素の幅に影響する。 */
.prose { overflow-wrap: break-word; }

/* 3. 英単語を途中で切らない。
      word-break: break-all は和文の行末は揃うが、英単語が
      無意味な位置で切れる。和欧混植では使わない。 */
.prose { word-break: normal; }

/* 4. 行の分け方。
      見出しは balance で各行の長さを均す（最大4行程度まで）。
      本文は pretty で、最終行が1文字だけ残る状態を避ける。 */
.prose h2 { text-wrap: balance; }
.prose p { text-wrap: pretty; }

/* 切りたくない語のまとまりは、その範囲だけ nowrap にする。
   製品名・数値と単位・日付などが対象。 */
.nowrap { white-space: nowrap; }

<p class="cap">縦書き（writing-mode: vertical-rl）</p>
<div class="tategaki">
  <p>
    <ruby>春<rt>はる</rt></ruby>はあけぼの。やうやう白くなりゆく山ぎは、すこしあかりて、むらさきだちたる雲のほそくたなびきたる。
  </p>
  <p>
    この文章は<span class="kenten">圏点</span>で強調しています。日本語の強調は、太字や下線ではなく点を打つのが古くからの方法です。
  </p>
  <p>
    この記事は<span class="tcy">26</span>日に公開しました。行間は横書きより<span class="tcy">20</span>%ほど広く取ってあります。2桁の数字は縦中横で1マスに収めますが、4桁の年号のような長い数字には使いません。潰れて読めなくなるからです。
  </p>
</div>

<p class="cap">同じ指定を横書きで（比較用）</p>
<div class="yoko">
  <p>
    <ruby>春<rt>はる</rt></ruby>はあけぼの。この文章は<span class="kenten">圏点</span>で強調しています。ルビも圏点も、書き方は縦横で変わりません。
  </p>
</div>

.tategaki {
  /* 縦書きの本体。右の行から左へ流れる。 */
  writing-mode: vertical-rl;

  /* 英数字の向き。既定（mixed）は英数字が横倒しになる。
     upright にすると1文字ずつ立つが、単語が読みにくくなるので
     本文では mixed のままにして、必要な箇所だけ縦中横にする。 */
  text-orientation: mixed;

  /* 縦書きでは line-height が「行と行の左右の間隔」になる。
     横書きより広めに取ると読みやすい。 */
  line-height: 2;

  /* 高さを決めないと1行に全部入ってしまう。縦書きでは
     height が「1行の長さ」にあたる。 */
  height: 17em;
  padding: 1.2rem 1.4rem;

  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-family: var(--serif);
  font-size: 1rem;

  /* はみ出したら横方向にスクロールする。縦書きでは
     行が増える方向が「左」なので、これは横スクロールになる。 */
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.tategaki p { margin: 0 0 1em; }
.tategaki p:last-child { margin-bottom: 0; }

/* 縦中横。2桁までの数字を1マスに収めて横向きに組む。
   「26日」「20%」のような箇所に使う。3桁以上や4桁の年号に
   当てると潰れて読めなくなるので、対象は2桁までにとどめる。 */
.tcy { text-combine-upright: all; }

/* 圏点（傍点）。日本語の強調は、太字や下線ではなく点を打つのが
   伝統的な方法で、縦書きとの相性がよい。 */
.kenten {
  text-emphasis: filled dot;
  text-emphasis-position: over right;
}

/* ルビは ruby / rt。縦書きでも横書きでも同じ書き方で通る。 */
ruby { ruby-position: over; }
rt { font-size: .5em; line-height: 1; }