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

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

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

Drop Cap の実装

ポイント:
> 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 章番号の実装

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」の境界を踏んでくれる。…