和文の組み実例集
和文が崩れるのは、約物・数字・欧文が交ざった行からです。よく出る3つの場面を、完成コードごと固定します。
和文組版 の実例編です。禁則と折り返しの基本は親ページで決めます。ここで扱うのは、その先にある行の中の細部です。
実例1 約物が連続して、すき間だらけに見える#
実表示 約物の詰めを並べて比較
調整前
お知らせ（第3号）「営業時間の変更」について
調整後
お知らせ（第3号）「営業時間の変更」について
「お知らせ（第3号）「営業時間の変更」について」のような見出しでは、括弧と句読点が連続します。和文の約物は全角で、字面の前後に半分のアキを持ちます。連続するとアキが重なり、そこだけ間延びして見えます。
| 場面 | やること |
|---|---|
| 本文 | font-feature-settings: "palt" 1 を body に。出発点のCSS に入っている |
| 大きな見出し | palt を先に。それでも残る一律の緩みは字間 -0.02em 前後まで |
| 特定の2〜3文字だけ気になる | その箇所だけ span で詰める。全体を触らない |
palt はフォントが持つ詰め情報を使う指定なので、詰め情報を持たない書体では変化しません。効いているかどうかは、括弧が連続する実物の行で確かめます。本文をベタ組み（詰めなし）に保つ流儀もありますが、この資料の出発点のCSSは palt を既定にしています。どちらを選ぶにしても、サイト内で統一します。
実例2 数字と単位で桁が揃わない#
実表示 等幅数字と単位の強弱
11,000円
8,800円
550円
料金表・営業時間・実績数字。数字が縦に並ぶ場所では、幅の管理がそのまま読みやすさになります。
| 崩れ | 直しかた |
|---|---|
| 列ごとに桁の位置がずれる | font-variant-numeric: tabular-nums。書体は変えない |
| 同じ桁なのに幅が揃わない | 半角数字に統一する。全角と半角が交ざると幅が別物になる |
| 単位が数字と同じ強さで並ぶ | 単位とラベルは1段小さく添える。主役は数字 |
| 時刻や期間がガタつく | 「10:00〜18:00」も等幅数字なら縦に揃う |
等幅数字は「数字だけ幅を揃える」指定です。本文の書体のまま効くので、数字のために等幅書体を持ち込む必要はありません。
実例3 欧文まじりの一文が沈む・割れる#
実表示 和文と欧文を同じ行で確認
新しい Studio Note の記事を公開しました。
欧文を先に指定し、固有名詞のまとまりを保つ。
和文の中のサービス名や英単語は、3通りの崩れ方をします。和文書体の欧文字形で描かれて見劣りする。行末で語の途中から割れる。まわりの和文より小さく沈んで見える。
| 崩れ | 直しかた |
|---|---|
| 欧文が和文書体の字形で出る | フォントスタックの先頭を欧文書体にする |
| 語の途中で割れる | overflow-wrap: anywhere で足りる。守りたい固有名詞だけ nowrap の span に |
| 欧文だけ沈んで見える | x-height の高い欧文書体を選ぶ。文字の骨格 で理由が追える |
| 強調したくて斜体にする | 和文に斜体は存在しない。太字にする |
印刷の組版では、和文と欧文の間に四分アキを取ります（JLReq）。ブラウザ標準では text-autospace として整備が進んでいますが、対応状況を確かめてから使います。手で空白文字を入れる方法は、コピー・検索・折り返しに副作用が出るので使いません。
コピーする#
このコードで動いている見本です
このコードで動いている見本です
確認する#
- 括弧や句読点が連続する行で、アキが二重に見えない
- 数字の表を縦に読んだとき、桁の位置が1本の線に揃う
- 和文の中の英単語が、和文書体の字形や斜体で出ていない