欧文フォントの見せ方、どっちが正解？ フォント選びのセンスを磨こう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
Web／DTP／グラフィックデザイナーの倉又美樹です。
この記事では、欧文を使った簡単なクイズを通して、文字組みの基本を解説します。
今回、私は「欧文のフォントを使った文字組み」についてのクイズを出題します。
フォントにおける「欧文」とは、アルファベット、数字、そして一部の記号のことです。
簡単に言うと、日本語の「和文」に対して、英語などのヨーロッパの言語で使われる文字を指しています。
それでは早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの欧文がより整っていて魅力的に見えますか？
1問目「ゴシック体の欧文」（難易度★）
2問目「明朝体の欧文」（難易度★）
3問目「丸ゴシック体の欧文」（難易度★★）
いかがでしたか？
私が考える答えは……
1問目の答え：A
2問目の答え：B
3問目の答え：B
以上が私なりの解答です。
みなさまの答えはどちらでしたか？
ではここからは、各クイズの問題について解説していきます。
それぞれの作例のAと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の「合成フォント」機能について解説します。
「合成フォント」を使って混植を効率的に
「合成フォント」とは、欧文と和文にそれぞれ別のフォントを組み合わせて、ひとつのフォントのように扱えるIllustratorの機能のことです。
この機能を使うことで、文字の種類ごとにフォントを切り替える手間が省けるため、混植を効率化できます。
それでは、合成フォントの設定方法について、ステップごとに説明していきます。
ステップ1：合成フォントのダイアログを開く
「書式」メニューから「合成フォント」を選択し、ダイアログ（ウィンドウ）を開きます。
ステップ2：合成フォントに名前を付ける
ダイアログ内の「新規」ボタンをクリックし、新たに作成する合成フォントの名前を付けます。
このとき、「Noto-sans-CJK+DIN」のように構成するフォント名が使い、半角の英数字と記号のみで設定するのがオススメです。（全角文字の使用は推奨されていません）
名前を入力したら、「OK」ボタンをクリックしましょう。
ステップ3：文字種ごとにフォントを割り当てる
合成フォントを新規作成すると、「文字種」の選択画面が表示されます。
漢字、かな、全角約物、全角記号、半角欧文、半角数字の6種類で、それぞれに別のフォントを割り当てられます。
最初に、「漢字」「かな」「全角約物」「全角記号」を shift + クリック で複数選択し、ベースとなる和文フォントを指定しましょう。
次に、「半角欧文」と「半角数字」に欧文フォントを指定します。
ステップ4：フォントサイズやベースラインの調整
さらに、各文字種に対して、サイズやベースラインなどを細かく調整します。
異なるフォントを合成して使うため、統一感を重視してコントロールしましょう。
最後に「保存」ボタンで保存し、「OK」ボタンをクリックすれば合成フォントの作成が完了です。
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つご紹介します。
コツ1：欧文フォントのサイズを拡大する
合成フォントの設定で欧文部分のサイズを105〜120%前後の倍率に拡大することで、視覚的なバランスを整えられます。
具体的な数値は使用するフォントの組み合わせによって異なるため、プレビュー（サンプル）を見ながら最適な値を見つけましょう。
合成フォントのプレビューはズームの倍率を変更できます。デフォルトの100%だと文字が小さいため、200〜400%に変更してサイズを検証するとよいでしょう。ベースラインをはじめとした文字のガイドを表示することもできます。
コツ2：ベースラインを微調整する
サイズ調整だけでは、文字の上下位置が揃わない場合があります。
特に、和文と欧文の設計思想により、ベースラインの見え方に違和感が生じることがあります。
このようなときは、ベースライン設定を使って欧文の縦位置を微調整します。
多くの場合、わずかに下げることで和文との調和が取れます。
まとめ：欧文のフォントを使いこなすポイント
今回は欧文のフォントに関するクイズと、混植についての基礎知識、合成フォント作成のテクニックなどを取り上げました。
最後に今回のノウハウをまとめます。
1．混植で文字表現をワンランクアップ
- 和文と欧文で異なる書体を使い分けて洗練させることを「混植」と呼ぶ
- 混植はIllustratorの「合成フォント」機能を使うと効率化できる
2．書体の相性を考えて混植する
- 「合成フォント」機能を使って混植をする際は、特徴が近い書体を選ぶ
- ゴシック体の場合はサンセリフ体、明朝体の場合はセリフ体を組み合わせる
3．サイズとベースラインの微調整が重要
- 「合成フォント」を作成する際は、欧文と和文のフォントを指定するだけでなく、サイズやベースラインも調整する
- これにより文字のサイズが整って見え、統一された印象を与えられる
欧文（英字）と和文フォントを扱う際は、組み合わせるフォントの選び方や、ちょっとした調整で大きく印象が変わります。
今回ご紹介したノウハウを使って、クオリティアップを心がけてみましょう。
お相手はデザイナーの倉又美樹（まるみ）でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。クイズの答えはひとつの参考としてください。
執筆：倉又美樹（まるみ）
フリーランスデザイナー。制作者としてだけではなく、デザイナーを育てることをライフワークとしている。女子美術大学デザイン・工芸学科 プロダクトデザイン専攻 非常勤講師
師匠と弟子で交流し、駆け出しデザイナーを一人にしないコミュニティ「まるみデザインファーム」を運営中。
Adobe Community Expert, Adobe Community Leaders Club