見出し画像

【和欧混植徹底解説!前編】2万フォント超えのAdobe Fontsからヒラギノフォントに合わせる欧文フォントを紹介

2023年4月からAdobe Fontsにヒラギノフォントが加わりました✨
Adobe Fontsに搭載されたヒラギノフォントはこちらからご覧ください。

今回はAdobe Fontsで使える20,000点を超えるフォントの中から、ヒラギノフォントと合うおすすめの欧文フォントの紹介、日本語フォントと欧文フォントを組み合わせる「和欧混植」の考え方や日本語に合う欧文フォントの選び方をわかりやすく紹介します。

この記事を通して、和欧混植の重要性やポイントを理解することで、Adobe FontsとAdobeツールを用いた和欧混植がもたらすデザインの幅を広げることができますので、最後までご覧ください。


Adobe Fontsで使えるヒラギノフォントの紹介

ヒラギノフォントは、スタンダードな明朝体・ゴシック体・丸ゴシック体の他に、ユニバーサルデザイン書体、行書体、簡体中文・繁体中文、仮名書体などを取りそろえています。

その中でも特に基本的な下記の4フォントが、2023年4月からAdobe Fontsで利用できるようになりました(2023年10月時点)。

ヒラギノフォントに搭載された欧文

最初に、ヒラギノフォントにもともと入っている欧文(日本語フォントに含まれる欧文字形の集まりを従属欧文、附属欧文と呼ぶことがあります)の形状を確認しましょう。

ヒラギノ角ゴ、ヒラギノ明朝の欧文は、仮名や漢字が持つ文字の明るさに合わせた形状になっています。雑誌やサイネージ、画面表示に適した形状と小文字の高さ(エックスハイト)で、仮名や漢字と混ざりすぎず、文中で英単語・英文を認識しやすくなっています。

ヒラギノ明朝の欧文は、日本人にもなじみのある「ローマン体※1」の「トラディショナル系※2」に分類される書体の特徴があります。ヒラギノ明朝の仮名と同様に、鋭く強いセリフ(文字の先端にある飾り)のエレメントが特徴的な、シャープでモダンな印象のローマン体です。

ヒラギノ角ゴの欧文は、書体の分類のひとつである「サンセリフ体※3」の中でも「グロテスク系」の特徴である、シンプルで均一な太さの線でデザインされています。

※1 ローマン体:セリフ体と同義。セリフを持つ書体の総称。

※2 トラディショナル系:標準的なローマン体。特徴は適度にコントラストがあり、文字の軸がほぼ水平・垂直でシャープで現代的な印象。わずかに手書きの雰囲気も残し、可読性が高い。

※3 サンセリフ体:「セリフ」がない書体の総称。和文書体の「ゴシック体」に該当する。ちなみにサンセリフの「サン」は「ない」を意味する。

和欧混植がなぜ必要か

先ほど触れたとおり、日本語フォントに含まれる欧文のデザインは、日本語組版を中心とした文章における、和欧の一体感が重視されています。

日本語フォントに含まれる欧文は、もちろん統一感があるデザインで設計されていますが、すべてのシーンにおいて最適とは限りません。例えば、ヒラギノ明朝よりもクラシックな印象に調整する場合は、伝統的な雰囲気の欧文フォントを組み合わせることで、デザイナーの意図する印象に近づくでしょう。企業や商品のブランドロゴタイプと雰囲気の近い欧文フォントを組み合わせることで、統一感のある表現が可能となります。

和欧混植のポイント

まず、明朝体にはローマン体、ゴシック体にはサンセリフ体のように、スタイルの似たものを選ぶという定石があります。一方で和文と欧文とではルーツや文字の造形が異なるため、全く同じ雰囲気のフォントを用意することは困難です。無理にそろえすぎるのではなく、それぞれのフォントの特徴を活かしながら「読みやすい組版はどれくらいのバランスかな?」と読み手の立場で考えることが大切です。

違和感のない和欧混植を実現するための、欧文フォントの選定ポイント

和欧混植のポイント
  • スタイルが近い(明朝体にはローマン体、ゴシック体にはサンセリフ体)ウエイト(太さ)が近い(太さの名称ではなく実際の見た目で太さをそろえる)

  • 骨格の差に違和感がない

  • エレメント(書体に共通するパーツのデザイン)の差に違和感がない

  • 和文組版を妨げないようディセンダー(gやjなどベースラインより下に伸びている部分の長さ)が設計されている

  • 文字幅の印象が和文と近い

  • エックスハイト(小文字の高さ)が低すぎず、和文と組み合わせても違和感がない

  • 和文のウエイトをカバーできるウエイトがそろっている

上記のポイントを踏まえて最適な印象の欧文フォントを選ぶことで、より幅広い組版デザインを実現できます。

Adobe Fontsを使った欧文混植の組み合わせ例

Adobe Fontsが提供する膨大なフォントの海から、ヒラギノフォントと効果的なコラボレーションの発揮が期待できる欧文フォントの組み合わせ例を紹介します。


ヒラギノ明朝+Kepler

Keplerはシャープでモダンな印象でヒラギノ明朝の雰囲気と合います。エレガントさと手書きの温かみを持ち合わせており、ヒラギノ明朝と組み合わせることで落ち着いた印象になるでしょう。低すぎないエックスハイト設計は、漢字や仮名とのサイズを合わせる上でとても相性が良いです。デザイナーはAdobeのRobert Slimbach氏。

和文:ヒラギノ明朝 W3/欧文:Kepler Light
和文:ヒラギノ明朝 W6/欧文:Kepler Medium

ヒラギノ明朝+Filosofia

Filosofiaは幾何学的な要素を持ち、ヒラギノ明朝の漢字に見られるキリッとした縦画の印象と通ずるものがあります。ヒラギノ明朝と組み合わせることで、より上品な印象になります。

控えめなコントラスト(縦画と横画の太さの差)やセリフの丸い処理はヒラギノ明朝と異なる点であり、極端に大きな使用しなければ問題ないでしょう。デザイナーはEmigre Fontsの Zuzana Licko氏。

和文:ヒラギノ明朝 W3/欧文:Filosofia Regular
和文:ヒラギノ明朝 W6/欧文:Filosofia Bold

ヒラギノ明朝+Calluna

Callunaは、左右非対称なセリフが生み出す手書きのニュアンスや、肉厚な箇所と鋭利な箇所で構成された三角形のエレメントが特徴的です。これらの要素がヒラギノ明朝と親和性を持ちつつも、文章に動きが生まれます。デザイナーはexljbris Font FoundryのJos Buivenga氏。

和文:ヒラギノ明朝 W3/欧文:Calluna Light
和文:ヒラギノ明朝 W6/欧文:Calluna Semibold

ヒラギノ角ゴ+Mr Eaves XL Modern / Mr Eaves XL Sans

Mr Eaves XL Modernは小文字が大きいため、ふところが広く明るいヒラギノ角ゴと調和しつつ、幾何学的な印象がもともとのヒラギノ角ゴの欧文にない洗練さ・楽しさが加わる面白い組み合わせです。

XLが付くこのフォントは、Mr Eaves Modernよりも エックスハイトが高いため、より和文と合わせやすいです。見出しやリード文で大きめに使うと、より目を引くでしょう。デザイナーはさきほど紹介したFilosofiaと同じく、Emigre Fontsの Zuzana Licko氏。 

和文:ヒラギノ角ゴ W3/欧文:Mr Eaves XL Modern Book
和文:ヒラギノ角ゴ W6/欧文:Mr Eaves XL Modern Bold

 同じファミリーで手書きのニュアンスがアクセントであるMr Eaves XL Sansを本文に当ててみても、柔らかな印象になります。

和文:ヒラギノ角ゴ W3/欧文:Mr Eaves XL Sans Book
和文:ヒラギノ角ゴ W6/欧文:Mr Eaves XL Sans Bold

ヒラギノ角ゴ+Bernino Sans / Bernina Sans

Bernino Sansは可読性に優れており、本文に使用することですっきりと読みやすい文章となります。本文や見出しなどのシーンを選ばない性質が、ヒラギノ角ゴと共通しています。デザイナーはJust Another Foundry。

和文:ヒラギノ角ゴ W3/欧文:Bernino Sans Regular
和文:ヒラギノ角ゴ W6/欧文:Bernino Sans Semibold

手書きのニュアンスを持つBernina Sansと合わせても、Bernino Sansとは違ったやさしい印象となるためおすすめです。

和文:ヒラギノ角ゴ W3/欧文:Bernina Sans Regular
和文:ヒラギノ角ゴ W6/欧文:Bernina Sans Semibold

ヒラギノ角ゴ+Acumin

Acuminはヒラギノ角ゴと合わせることで、がっしりとした重厚感ある組版の印象に変化します。ウエイト展開が豊富なこの書体は合成フォントを作る上でとても使いやすいフォントです。デザイナーはAdobeのRobert Slimbach氏。

和文:ヒラギノ角ゴ W3/欧文:Acumin Light
和文:ヒラギノ角ゴ W6/欧文:Acumin Semibold

まとめ

今回は20,000を超えるフォントを使えるAdobe Fontsの中から、ヒラギノフォントに合う欧文フォントを紹介しました。また、和欧混植の必要性や、和欧混植において選択する欧文フォントのポイントも紹介しました。 

ですが和欧混植はフォントを選んで終わりではありません。漢字のサイズに対する欧文のサイズや、欧文の上下位置(ベースライン)の設定を行うことが和欧混植の品質を決めるカギとなります。

後編では、具体的にAdobeアプリケーションで和欧混植を使うための設定「合成フォント」について解説します。

後編を読む

みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!