欧文フォントの見せ方、どっちが正解？ フォント選びのセンスを磨こう

現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。


Web／DTP／グラフィックデザイナーの倉又美樹です。

この記事では、欧文を使った簡単なクイズを通して、文字組みの基本を解説します。

今回、私は「欧文のフォントを使った文字組み」についてのクイズを出題します。


フォントにおける「欧文」とは、アルファベット、数字、そして一部の記号のことです。

簡単に言うと、日本語の「和文」に対して、英語などのヨーロッパの言語で使われる文字を指しています。


それでは早速ですが、3問クイズを出します。

以下の3つの作例を見て、AとB、あなたはどちらの欧文がより整っていて魅力的に見えますか？

1問目「ゴシック体の欧文」（難易度★）

2問目「明朝体の欧文」（難易度★）

3問目「丸ゴシック体の欧文」（難易度★★）

いかがでしたか？

私が考える答えは……

1問目の答え：A

2問目の答え：B

1. 欧文と和文で異なるフォントを使い分ける

では、先ほどの1問目を振り返ってみましょう。
私が選んだ答えは「A」でした。

AとBの違いは、欧文で使用しているフォントの種類です。

Aは、和文に「Noto Sans CJK JP」、欧文に「DIN」が使われています。
Bは、すべての文字に「Noto Sans CJK JP」のみを使用しました。

Bはよくある表現ではありますが、Aのようにひと手間かけ、欧文と和文で異なるフォントを使い分けることでクオリティを上げることができます。
このように異なるフォントを組み合わせる手法を、混植と呼びます。

実は、欧文と和文フォントのアルファベットや数字は、文字の形や視覚的な印象が大きく異なります。
なぜかというと、和文フォントに含まれるアルファベットや数字は、全体の調和を重視して設計されていることが多いからです。
そのため、単独で使用した際に美しさや読みやすさが犠牲になってしまうことがあります。

混植は、この問題を解決するための実用的な手法として発達しました。

混植によって、和文と欧文それぞれに最適化された書体を活かしつつ、文章全体のリズムや視認性を高めることができます。

あらためて、1問目の正解のAについて振り返ってみましょう。
フォントは「Noto Sans CJK JP」と「DIN 2014」を使用し、Illustratorの「合成フォント」機能で組み合わせました。

まずは、フォントについて詳しく解説します。

「Noto Sans CJK JP」は、C（Chinese）J（Japanese）K（Korean）の全てが入っており、その中で和文を優先的に表示するフォントです。

「DIN 2014」は、ドイツ工業規格の書体です。
ドイツにおける工業製品や道路標識などで使われています。

今回この2つを混植した理由は、数字の形です。

「DIN」は数字が幾何的な形で設計されているため、読みやすいことで人気があり、電話番号や値段の表記などにも使われる機会が多いフォントです。

一方で「Noto Sans CJK」の数字はやや丸く、ゆるやかな形をしています。
「1」や「4」に注目すると、各フォントの字形の差がわかりやすいですね。

「Noto Sans CJK」は多言語対応を前提としているため、複数の言語や文字体系にわたって統一感と調和を保つことを最優先に設計されています。

そのため、Webサイト内の本文で使う際には違和感はありませんが、グラフィックデザインなどで文字の形をコントロールしたい場合には、別のフォントを選択したいケースがあります。

今回は、幾何的でシンプルな英数字の形を持つ「DIN」を使うことで、見出しの読みやすさと形の美しさを優先しました。
このように、欧文の美しさや、文字単体としての読みやすさを重視したいなどの場合に、目的に応じた欧文を混植するとよいでしょう。

続いて、Illustratorの「合成フォント」機能について解説します。

2. 混植は特徴が近い書体同士を組み合わせる

続いて、2問目を振り返ります。
私が選んだ答えは「B」でした。

Aは、「明朝体」の和文に対して「ゴシック体」の欧文フォントを組み合わせています。
書体の特徴が大きく異なり、全体的な統一感に欠けています。

Bは、「明朝体」の和文部分と調和する「セリフ系（明朝系）」の欧文フォントを選択しています。
書体の特徴が近いフォント同士を組み合わせることで、自然で読みやすい混植を実現します。

効果的な混植を行うには、特徴が近い書体同士を組み合わせることがセオリーです。
そのため、ゴシック体にはSans-serif体（サンセリフ体）、明朝体にはSerif体（セリフ体）の欧文を合わせるのがオススメです。

Sans-serif体とSerif体は、欧文書体の分類方法のひとつです。
Serif（セリフ）とは、文字の線の端に付く装飾のことで、「うろこ」や「ひげ」と呼ばれます。
Sans-serif体はセリフがない（装飾がない）書体、Serif体はセリフがある（装飾がある）書体を指しています。

それでは、正解のBで使ったフォントについて、詳しく見ていきましょう。
組み合わせたフォントは「貂明朝」（てん・みんちょう）と「Adobe Garamond」です。

「貂明朝」（てん・みんちょう）は、2017年にリリースされたアドビオリジナルの和文フォントです。
コンセプトは「可愛くも妖しい」であり、単純な可愛らしさだけでなく、日本の伝統的な要素を融合させた独創的なフォントです。
鳥獣戯画のような歴史ある日本古来の可愛さを始めとした「クラシック感」を追求しながらも「かわいさ」を表現するという、相反する要素をまとめています。

「Adobe Garamond」は、16世紀フランスの活字書体をもとにデジタル化され、1989年にアドビからリリースされました。
歴史的な書体を現代に蘇らせたことから、「リバイバル書体」と呼ばれることもあります。
リリース以来、定番のフォントとなり、印刷とデジタルメディアの両方で最も汎用性が高く愛されている書体の一つとなっています。

「貂明朝」と「Adobe Garamond」は、装飾が似ていることに加え、デザインのコンセプトである「クラシック感」と「リバイバル書体」という点で共通した世界観をもつため、今回の正解例の組み合わせとして採用しました。

3. 合成フォントのサイズ・ベースライン調整

最後に、3問目を振り返ります。
私が選んだ答えは「B」でした。

3問目では、A/Bともに和文は「筑紫A丸ゴシック」、欧文は「Proxima Soft」を使いました。

Aは、混植は行われているものの、欧文部分のサイズ調整が適切に行われていないため、全体のバランスが崩れています。
実は、欧文と和文をデフォルトのサイズ（100%）で組み合わせると、欧文が相対的に小さく見えてしまうのです。

Bは、欧文部分のサイズとベースラインが適切に調整されており、和文部分と自然に調和しています。
この微調整により、読みやすく美しいタイポグラフィが実現されています。

それでは、なぜこのような調整が必要なのか、もう少し掘り下げて解説していきます。

和文と欧文のフォントにおける設計思想は、それぞれ異なります。

和文フォントは、文字ごとに「仮想ボディ（正方形）」を基準に設計されています。
ひらがなや漢字は複雑で形の大小もバラバラなため、この「箱」に収めることで文字同士の整列や段落組みの安定感を確保しています。

一方で、欧文フォントは「アセンダーライン」「キャップライン」「ミーンライン」「ベースライン」「ディセンダーライン」といった水平線を基準に設計されています。
文字の高さは小文字・大文字・上下に突き出す部分などでバラつきがあるため、「箱」に収めるよりも流れるようなリズムを重視しています。

これらの設計思想の違いから、和文は大きく、欧文は小さくなります。Illustrator上で設定された同じフォントサイズでも実際の大きさは異なり、ベースラインをどこに置いているかの差異もあります。このため、和文と欧文フォントを同じサイズで組み合わせた時に違和感が生まれてしまうのです。

サイズの違いを解決するためには、Illustratorで「合成フォント」を作成する際に、フォントサイズやベースラインの位置を細かく設定する必要があります。

続いて、合成フォントを調整するコツを2つご紹介します。