リュウミンL + Garamond Premier Pro Light Display + Cormorant Garamond

書体について

グラフィックデザインでもよく使われる「リュウミン」と「Garamond」の和欧混植（合成フォント）。これをWebデザインでコーデイング時にWebフォントを使用し、和欧混植をCSSで指定するとどう表示されるか検証してみました。

上のプレビュー機能に3種類のフォントを設定しました。
1番上が「リュウミンL」
2番目が「リュウミンL + Garamond Premier Pro Light Display(Adobe Fonts)」
3番目が「リュウミンL + Cormorant Garamond(Google Fonts)」
と3種類の組見本を準備しました。

今回の組み合わせの検証の主役は「2番目の」Adobe Fontsから配信されている「リュウミンL」と同じウエイトの「Garamond Premier Pro Light Display」の組み合わせです。
和文「リュウミン L」
欧文「Garamond Premier Pro Light Display」

コーディング時のフォント指定は下記となります。

font-family: garamond-premier-pro-display,a-otf-ryumin-pr6n,serif;
font-weight: 300;
font-style: normal;

リュウミンのサイズに対して、Garamondがひとまわり小さい印象です。グラフィックデザインの場合はフォントごとにサイズを指定できるので、調整可能ですがWebデザインのコーディング時はJavaScriptによるプログラムで英数字のみ拡大するためのプログラムが必要となってきます。プログラムを使用したくない場合は、字間をあければ、Garamondがひとまわり小さい印象は和らぎます。

Cormorant Garamond Light 300

Google Fontsの「Cormorant Garamond」を「リュウミンL」に組み合わせた例もプレビューで表示しています。数字のデザインが「オールドスタイルフィギュア」で、こちらもサイズもひとまわり小さい印象です。

まとめ

Webデザイン的には、フォント自体が細いので、14〜15px以上からの使用が現実的でしょうか？印象的には欧文をGaramondに変えると「リュウミン」単体と違って、雰囲気が出ていいとは思うのですが、英数字（Garamond）を大きくしたくなるのは正直なところです。字間をあけて対応するか、このまま妥協して使用するか、プログラムで処理して表示するかの3択になります。「リュウミン　L」に合うもっと良いWebフォントがあったら、また検証してページにまとめたいと思います。

Webフォントの和欧混植はまだまだ一筋縄ではいきません。ブラウザ、HTML、CSSのルールが発展して和欧混植がスムーズにできる時代が早くくればいいですね。Webフォントという技術がでてきてフォントの選択肢が広がったのは嬉しい限りですが、技術的にはまだまだ発展途中でグラフィックデザインのようには中々設定ができません。「リュウミンL」にあう、もっと良い欧文のWebフォントを知っているデザイナーさんは、よかったらこちらから教えてください。