多言語タイポの難しさ
日本語と英語が同じページに並ぶサイトは、フォント選定で 2 つの難題を抱える。
- フォントメトリクスが違う: 日本語フォントは英文フォントより字面が小さい。同じ font-size を指定しても、日本語の方が小さく見える。
- 欧文 / 和文のペアリング: 「Inter + Noto Sans JP」のような無難な組み合わせは大量のサイトで採用されていて、識別性が薄い。
私は 7 種類のフォントセットで組み直した:
- Bricolage Grotesque (英 display, variable wdth/opsz)
- Instrument Sans (英 body)
- Fraunces (英 serif italic, SOFT/WONK 軸)
- Zen Kaku Gothic New (和 display)
- Noto Sans JP (和 body)
- Noto Serif JP (和 serif)
- JetBrains Mono (mono)
なぜ Bricolage Grotesque を選んだか
英文 display を Inter から差し替えるのが最大の出発点だった。Inter は無印良品の文字みたいに「正解だが個性が無い」。デザイン業界の汎用解になりすぎている。
選んだのが Bricolage Grotesque（Mathieu Triay 設計）。variable axis に wdth (幅) と opsz (光学サイズ) があって、見出しを condensed で詰める / 本文サイズで自然に開く、という調整が同じ family 内で完結する。
/* condensed な大型見出し */
font-family: 'Bricolage Grotesque', sans-serif;
font-variation-settings: "wdth" 75; /* 幅 75% */
font-weight: 200; /* 細く */
font-size: 180px;
これで「Atlas（観測図）」のキャラクターを作る巨大ナンバリングが組める。
Zen Kaku Gothic New は和文 display 用
和文 display は Zen Kaku Gothic New にした。「Zen Kaku Gothic」より字面が現代的で、クセが少ない。Notable な文字の特徴は、あ の上部の払いが鋭くなく丸い。
ただし、和文の Zen Kaku Gothic New + 英文の Bricolage Grotesque を同じ font-family stack に並べると、英文の方が 字面が大きく 見える。これを補正するために英文 size を 0.92 倍に下げる、というレシピもあるが、私は そのまま並べた。むしろこの「字面の差」が雑誌的なリズムを生む。
本文は Instrument Sans + Noto Sans JP
本文は Instrument Sans。これも比較的新しいフォントで、Inter ほど中庸ではない。日本語との混植時に違和感が少ない。
--font-body: 'Instrument Sans', 'Noto Sans JP', system-ui, sans-serif;
CJK は「preload しない」設定にする:
const fontNotoJp = Noto_Sans_JP({
weight: ['400', '500', '700'],
preload: false, // 重いので必要時のみ
});
英文が即座に出て、日本語が遅れて読み込まれる動きになる。display: swap と組み合わせると体感は悪くない。
Fraunces は Drop Cap と引用にだけ使う
Fraunces (variable serif, SOFT/WONK 軸付き) は本文には使わない。Drop Cap と blockquote のためだけに読み込む。
.reader-prose > p:first-of-type::first-letter {
font-family: 'Fraunces', serif;
font-style: italic;
font-variation-settings: "SOFT" 100, "WONK" 1;
font-size: 3.6em;
}
SOFT 100, WONK 1 で、文字の角を丸めて若干グネッとさせる。これだけで「ふつうの serif Drop Cap」が「ちょっと怪しいヒゲのある Drop Cap」になる。記事の最初の文字を 儀式の道具 として扱う。
まとめ
「日本語 + 英語の見出しを揃える」のは、実は揃えないのが正解だった。和文と欧文は字面が違う、という当たり前の事実を、雑誌のリズムとして受け入れる。
7 フォントは多いように見えるが、display / body / serif / mono の 4 グループ × 2 言語 (-1 重複) = 7 になる。役割が決まっていれば管理は難しくない。
多言語のタイポは、揃えるのではなく、ばらしを設計する。