Drop Cap とローマ数字の使いどころ

装飾は「効くページ」を選ぶ

Drop Cap も Roman 章番号も、全ページに掛けると消費される。装飾は希少性で効く。私のサイトでは、これらは 記事本文（reader-prose）にだけ 適用する。法務ページにも About にも掛けない。

Drop Cap の実装

.reader-prose > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 3.6em;
  line-height: 0.92;
  float: left;
  padding: 0.18rem 0.6rem 0 0;
  color: var(--cat-color, var(--color-ink));
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

ポイント:

• > p:first-of-type — h2 等を飛ばして「最初の段落」だけに当てる
• ::first-letter — 段落の最初の 1 文字だけ
• float: left — テキストが Drop Cap の右に流れ込む
• font-variation-settings: "SOFT" 100, "WONK" 1 — Fraunces variable 軸で輪郭を柔らかく + ねじれさせる

サイズは 3.6em に落ち着いた。5em は派手すぎ、3em は弱い。3.6 が「目立つが浮かない」境界。

Roman 章番号の実装

.reader-prose {
  counter-reset: section;
}
.reader-prose h2 {
  counter-increment: section;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.reader-prose h2::before {
  content: counter(section, upper-roman) ".";
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.85em;
  color: var(--cat-color);
}

counter(section, upper-roman) で I. II. III. ... が h2 の前に自動付与される。色は部門色で、サイズは 0.85em（h2 本文より少し小さい）に落とす。主役を取らず、章を予告する役。

なぜ Drop Cap には italic を選んだか

Drop Cap は「本の最初の文字」の現代的なオマージュ。本だと 書体を本文と切り替える のが慣例。普通体の本文に対して italic を当てると、視覚的に「これは儀式の文字」と分かる。

私は Fraunces の italic を採用した。Fraunces は variable axis で WONK を持っており、WONK 1 にすると文字に少しグネりが入る。これが「ふつうのカリグラフィ風 Drop Cap」と「奇妙な Drop Cap」の境界を踏んでくれる。

二重表示の罠

法務ページで Drop Cap + Roman 章番号を有効にしたまま h2 を「1. 取得する情報」と書いたら、画面に 「I. 1. 取得する情報」 と並んだ。Roman と Arabic が両方出ている。

これは .legal-prose を別 class に切って解決した。法務系は連番が 本文側 に書かれているので、CSS counter は不要。Drop Cap も儀式的すぎるので外す。

「同じ装飾を全文に適用する」より「装飾を場所で限定する」方が結局美しくなる。

短い段落での Drop Cap

3.6em の Drop Cap は、段落が 3 行未満だと 段落より大きくなる 状況が起きる。短い段落の最初の段落には Drop Cap を出さない方が良いケースもある。

ただし、CSS だけで「段落が短い時だけ Drop Cap を消す」のは難しい。私は 書き手が最初の段落を 5〜7 文書く ルールに寄せた。書き手の規律で対応するほうが楽。

まとめ

Drop Cap と Roman 章番号は、効くページを選ぶ。全文に掛けると装飾は消費される。記事本文にだけ、法務 / About には掛けない。first-of-type と CSS counter を使うとほとんど自動で動く。

装飾は儀式。儀式は限定だから効く。