![見出し画像](https://assets.st-note.com/production/uploads/images/135240152/rectangle_large_type_2_c991d7955eaa488084dd16e51717cd5d.png?width=1200)
従属欧文をやめて和欧混植にしてみよう
こんにちは、シナジーマーケティング株式会社のデザイナー瀬戸です。
デザインをするにあたり、和文と欧文が混ざってなんかしっくりこないケースってありますよね?
そんな時に、私が行っているタイポグラフィーの工夫点をご紹介します。
新ゴで文字を打ってみたが…
実際にタイポグラフィーを作りながら解説していきたいと思います。
文言は「PhotoshopとLightroomで写真をもっとキレイに」とします。
バナー制作で文言が上記だったと想定してください。
早速、一般的な和文書体である新ゴで文字を打ってみました。
![](https://assets.st-note.com/img/1711500981023-aCtJaGfk5g.png?width=1200)
うーん、どうでしょうか…なんとも言えない違和感を覚えないでしょうか…?
そうです。欧文がダサいのです。
このダサさは一体どこから来るのか。
以降で、その原因を説明するとともに、改善策を検討していきたいと思います。
ダサさの原因は、従属欧文
ダサさの原因、それは従属欧文です。
従属欧文とは、和文書体の中に含まれる欧文書体のこと。
たとえば、和文書体である新ゴの中に含まれる英数字は全て従属欧文になります。
従属欧文は、和文のなかに欧文が混ざった場合に、文章が読みやすいように設計されています。
本文組みにおいては、従属欧文によって文章が読みやすくなるというメリットがあります。
しかし、和文書体の仕様上、仮想ボディという枠内に押し込まれているため窮屈な字体になっています。
見出しのように欧文が目立つケースでは、従属欧文の不恰好さが強調されてしまい、美しくないタイポグラフィーになってしまいます。
![](https://assets.st-note.com/img/1711501076564-TkjBLJ7kdH.png?width=1200)
美しくするには、和欧混植を使う
では、美しいタイポグラフィーにするにはどうすればよいのでしょうか。
それは和欧混植を使うことです。
具体的には、従属欧文を欧文書体に置き換えます。
置き換える欧文書体をどう決めるかが悩みどころですが、これが正解というものはないので、いろいろな書体を試してみるのが良いと思います。
ここでは、Helveticaを使ってみます。
新ゴの従属欧文をHelveticaに置き換えてみました。
![](https://assets.st-note.com/img/1711501224529-Pzheb6o7tr.png?width=1200)
美しくなりました!
でも何かが変です…。
そうです。欧文が小さいのです。
欧文を110〜120%に拡大する
一般的に、欧文は和文に比べて一回りほど小さく設計されています。
そのため、単に従属欧文を欧文書体に置き換えただけでは、欧文が小さくなってしまいます。
和文との整合性を取るために、欧文を少し拡大する必要があります。
どれぐらい拡大するかは書体によりますが、110〜120%程度が良いとされています。
今回のケースでは、118%に拡大しました。
![](https://assets.st-note.com/img/1711501272710-BG87o5fp21.png?width=1200)
Goodです!
和文とのサイズ感が揃い、無事に美しいタイポグラフィーになりました。
![](https://assets.st-note.com/img/1711501289768-xIbUIC03fO.png?width=1200)
あらためて3つを比較してみました。
やはり3つ目が一番美しいですね。
さいごに
今回は、和文と欧文が混ざっている場合のタイポグラフィーにおいて、従属欧文を欧文書体に置き換えることで美しくする方法をご紹介しました。
ちなみに、手動で和欧混植を設定しましたが、InDesignやIllustratorであれば、合成フォントという機能を使うことで、一括して設定することも可能です。
また、従属欧文は必ずしも欧文書体に置き換える必要はなく、従属欧文が美しく設計された和文書体も存在するため、状況に応じていろいろな選択肢を使い分けるのが良いと思います。
最後までお読みいただき、ありがとうございました。