文字を読ませる

行間を1.7〜1.9にする。字間は本文では触らない。詰めるのは見出しだけ。字間と行間

body { line-height: var(--leading-body); }
h1, h2, h3 { line-height: var(--leading-heading); letter-spacing: 0.02em; }

和文本文は1.7〜1.9、見出しは1.3〜1.5。行が長いほど広げる。字間と行間

:root { --leading-body: 1.9; --leading-heading: 1.35; }
body { line-height: var(--leading-body); }
h1, h2, h3 { line-height: var(--leading-heading); }

和文は全角35〜45字、欧文は45〜75字。ただし文字数で幅を指定せず、レイアウトで決める。版面と行長

<div class="page">
  <p>中央に寄せた本文列。幅を変えると1行に入る字数が変わります。</p>
</div>

:root {
  --page: 80rem;
  --gutter: 32px;
}
.page {
  max-inline-size: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

16pxを下限にする。指定はpxではなくremで、利用者のブラウザ設定に追従させる。大きさの体系

html { font-size: 100%; }
body { font-size: var(--text-base); } /* 16px相当 */

比1.2〜1.25の階段を作り、その中から選ぶ。1ページで使うのは4段まで。大きさの体系

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }

大きさだけで差をつけようとしている。太さと余白を併せて動かすと、大きさは控えめで足りる。視覚階層

h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-block: var(--space-8) var(--space-3);
  color: var(--color-text);
}

長文を静かに読ませるなら明朝、画面のUIとして操作させるならゴシック。混ぜるなら役割で分ける。書体の選び方

body { font-family: "Noto Sans JP", system-ui, sans-serif; }
.prose { font-family: "Noto Serif JP", serif; }

欧文側のx-heightが低い。和文に合う書体に替えるか、欧文だけ級数を上げる。和文組版

<p>和文の中に <span class="latin">Latin 2026</span> が混ざる見本</p>

.latin { font-family: Inter, system-ui, sans-serif; font-size: 1.05em; }

和文と欧文のあいだに四分アキ（全角の1/4）を入れる。CSSだけでは自動で入らないので、原稿側で半角の空きを入れるか、欧文を要素で包んで margin を付ける。和文組版

<p>コード <span class="code">API</span> と数字 <span class="num">2026</span></p>

.code, .num { margin-inline: 0.25em; } /* 原稿に半角スペースを入れる */

全角の約物は前後に余白を持っている。連続する箇所と行頭の始め括弧だけを詰める。和文組版

<h2>約物（「括弧」、句読点。）</h2>
<p>本文でも「引用」と、句読点。</p>

body { font-feature-settings: "palt" 1; }
h1, h2 { font-feature-settings: "palt" 1, "pkna" 1; }

1書体に絞る。preload と font-display: swap を付け、数百KBを超えるならサブセット化する。Webフォントの実装

<link rel="preload" href="/fonts/NotoSansJP.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/NotoSansJP.woff2") format("woff2");
  font-display: swap;
}

font-display が block になっている。swap にすると代替書体で先に出る。Webフォントの実装

<!-- HTML の変更は不要 -->

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/NotoSansJP.woff2") format("woff2");
  font-display: swap;
}

size-adjust と ascent-override で代替書体の見た目を本番に寄せる。Webフォントの実装

<!-- HTML の変更は不要 -->

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/NotoSansJP.woff2") format("woff2");
  size-adjust: 100%;
  ascent-override: 90%;
  font-display: swap;
}

合成太字になっている。太字のファイルを読み込み、font-weight で実在するウェイトを指定する。書体の選び方

<p>通常 <strong>太字</strong></p>

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/NotoSansJP-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
strong, b {
  font-weight: 700;
}

x-heightが違う。字面の大きさは font-size と一致しない。書体を替えたら級数も測り直す。文字の骨格

/* 書体を替えたら実寸で測り直す */
body { font-size: var(--text-base); }
.serif { font-family: "Noto Serif JP", serif; font-size: 1.05em; }

ボックスの上端で揃えている。ベースラインで揃える。文字の骨格

<div class="row"><span>12px</span><span>本文</span><span>A</span></div>

.row { display: flex; align-items: baseline; gap: var(--space-2); }

見出しは text-wrap: balance で行の長さが揃う。ここで折りたいと決まっているなら、折りたくない語を要素で包んで display: inline-block にする。和文組版

<h1>今日の<span class="keep">特別な</span>お知らせ</h1>

h1 { text-wrap: balance; }
.keep { display: inline-block; } /* 折りたくない語を包む */