![見出し画像](https://assets.st-note.com/production/uploads/images/120283056/rectangle_large_type_2_69033d8779d9285f178c0a343eb5d980.png?width=1200)
【和欧混植徹底解説!後編】「合成フォント」設定で違和感なく和文と欧文を組み合わせる方法と設定サンプル集
日本語フォントと欧文フォントを組み合わせる「和欧混植」徹底解説、後編です。
前編では、和欧混植の必要性や、和欧混植において選択する欧文フォントのポイント、そしてAdobe Fontsの中からヒラギノフォントに合う欧文のアイデアをご紹介しましたが、和欧混植はフォントを選ぶだけでは終わりません。
混植するフォントを選んだら、実際にアプリケーション上で使うための設定を行いましょう。Illustrator やIndesignなど、Adobeアプリケーションでの和欧混植の設定「合成フォント」を使うと、和文と欧文それぞれ設定したフォントでテキストを入力できるようになります。
本記事の後半では、前編で紹介したヒラギノフォントとAdobe Fontsの欧文の組み合わせ例について、合成フォントの設定サンプル集をご紹介します。ぜひ最後までご覧ください。
Adobeアプリケーションでの合成フォント設定方法
以下はIllustratorでの設定例となります。
設定の開き方
メニュー→「書式」→「合成フォント」を選択すると合成フォント画面が表示されます
![](https://assets.st-note.com/img/1698632170607-8cqse17ffH.png?width=1200)
合成フォントの新規作成
合成フォント画面が開いたら合成フォント設定を新規作成します。1つの合成フォントに対して、特定のフォントの組み合わせ(今回の例では「ヒラギノ明朝W6」と「Calluna Semibold」)を設定します。
![](https://assets.st-note.com/img/1698632186466-Tq5tZOhrXf.png?width=1200)
和欧混植するフォントの設定
合成フォントを新規作成できたら、フォントを設定します。
今回はシンプルな和欧混植の設定とするため、「漢字」「かな」「全角約物」「全角記号」には同じ和文フォントを、「半角欧文」「半角数字」に同じ欧文フォントを設定します。
![](https://assets.st-note.com/img/1698632226960-vzyStfr6V5.png?width=1200)
以上が最低限の設定ですが、ここからが本番です。
キャプチャ下部の混植サンプルを見ると、欧文がやや小さめに見えます。和欧混植はただ混植すればよいものではなく、漢字のサイズに対する欧文のサイズや、欧文の上下位置(ベースライン)の設定が和欧混植の品質を決めるカギとなります。
今回は和文を基準に、欧文のサイズとベースラインを調整していきます。
サイズの設定
欧文のサイズを変えるには、下記キャプチャの赤枠部分を変更します。
![](https://assets.st-note.com/img/1698632249104-R6DcXy4hW1.png?width=1200)
一旦120%に設定してみました。和文より欧文の方が大きく見えるので少しずつ数値を減らし調整します。
![](https://assets.st-note.com/img/1698632249142-uofP1uQsZg.png?width=1200)
110%で和文と欧文の大きさのバランスがとれました。厳密に高さを合わせるのではなく、視覚的にバランスがとれており、和欧どちらかが目立たないような状態を目指します。
ベースラインの設定
大きさのバランスがとれたら、上下の位置、ベースラインを調整します。欧文がやや低くみえるので、ベースラインを上げて(数値を増やして)いきます。
![](https://assets.st-note.com/img/1698632249401-BAofnO5fX5.png?width=1200)
5%にしてみました。今度は位置が高すぎるため、下げていきます。
![](https://assets.st-note.com/img/1698632249432-oNUkBigCrl.png?width=1200)
2%にしました。欧文がおおよそ和文の中央にきて、高さのバランスも取れましたね。
最後に画面中央の「保存」ボタンを押し、設定完了です(画面右下の「OK」→保存しますか「はい」でも可)。
合成フォントの使い方
他のフォントと同じように、フォントの一覧から作成した合成フォントを選択します。
![](https://assets.st-note.com/img/1698632249522-gZqaUKSZdW.png)
これで、設定した合成フォントでテキストを打てるようになりました。
![](https://assets.st-note.com/img/1698632942607-ewDOctUJfC.png?width=1200)
実際にテキストを打ってみて、違和感があれば合成フォントの設定を調整しましょう。
ヒラギノフォントとAdobe Fonts欧文フォントの合成フォント設定
前編で紹介したヒラギノフォントと欧文フォントの合成フォント設定を、Adobe Illustrator のキャプチャでご紹介します。ぜひご自身の和欧混植・合成フォントの設定方法の参考にしてみてください。
ヒラギノ明朝+Kepler
和文:ヒラギノ明朝 W3/欧文:Kepler Light
![](https://assets.st-note.com/img/1698633602324-F0bnrxVjQB.png?width=1200)
![](https://assets.st-note.com/img/1698633444230-JXfYq3ey9X.png?width=1200)
和文:ヒラギノ明朝 W6/欧文:Kepler Medium
![](https://assets.st-note.com/img/1698633620623-LU8fl9FT2E.png?width=1200)
![](https://assets.st-note.com/img/1698633449526-oIsfSwFtyd.png?width=1200)
ヒラギノ明朝+Filosofia
和文:ヒラギノ明朝 W3/欧文:Filosofia Regular
![](https://assets.st-note.com/img/1698633627028-R0ICLzUyut.png?width=1200)
![](https://assets.st-note.com/img/1698633458001-50EBANEl0O.png?width=1200)
和文:ヒラギノ明朝 W6/欧文:Filosofia Bold
![](https://assets.st-note.com/img/1698633631582-x92XHGI8BJ.png?width=1200)
![](https://assets.st-note.com/img/1698633475478-iL9bskM1y3.png?width=1200)
ヒラギノ明朝+Calluna
和文:ヒラギノ明朝 W3/欧文:Calluna Light
![](https://assets.st-note.com/img/1698633637536-StQ0asATsH.png?width=1200)
![](https://assets.st-note.com/img/1698633481405-VhZz9oYX3y.png?width=1200)
和文:ヒラギノ明朝 W6/欧文:Calluna Semibold
![](https://assets.st-note.com/img/1698633644164-peahCvNtmk.png?width=1200)
![](https://assets.st-note.com/img/1698633487210-eeEZHKdENA.png?width=1200)
ヒラギノ角ゴ+Mr Eaves XL Modern / Mr Eaves XL Sans
和文:ヒラギノ角ゴ W3/欧文:Mr Eaves XL Modern Book
![](https://assets.st-note.com/img/1698633648722-ZV7p5ViRzO.png?width=1200)
![](https://assets.st-note.com/img/1698633493951-5Cb0egD79v.png?width=1200)
和文:ヒラギノ角ゴ W6/欧文:Mr Eaves XL Modern Bold
![](https://assets.st-note.com/img/1698633653163-xitsD7rNHV.png?width=1200)
![](https://assets.st-note.com/img/1698633498175-64lvpJgLYN.png?width=1200)
和文:ヒラギノ角ゴ W3/欧文:Mr Eaves XL Sans Book
![](https://assets.st-note.com/img/1698633657278-bR0X5DAXAQ.png?width=1200)
![](https://assets.st-note.com/img/1698633503361-yQCRtK3685.png?width=1200)
和文:ヒラギノ角ゴ W6/欧文:Mr Eaves XL Sans Bold
![](https://assets.st-note.com/img/1698633661539-Vx1ilMrq4C.png?width=1200)
![](https://assets.st-note.com/img/1698633508353-bDyv9V4LPG.png?width=1200)
ヒラギノ角ゴ+Bernino Sans / Bernina Sans
和文:ヒラギノ角ゴ W3/欧文:Bernino Sans Regular
![](https://assets.st-note.com/img/1698633665999-cBpWgIDEbv.png?width=1200)
![](https://assets.st-note.com/img/1698633513475-RuielIIsSS.png?width=1200)
和文:ヒラギノ角ゴ W6/欧文:Bernino Sans Semibold
![](https://assets.st-note.com/img/1698633670026-NefIR8L813.png?width=1200)
![](https://assets.st-note.com/img/1698633517369-H3tzSHtCKw.png?width=1200)
和文:ヒラギノ角ゴ W3/欧文:Bernina Sans Regular
![](https://assets.st-note.com/img/1698633675826-gswvO8dLYv.png?width=1200)
![](https://assets.st-note.com/img/1698633521215-VTpHG6Ostf.png?width=1200)
和文:ヒラギノ角ゴ W6/欧文:Bernina Sans Semibold
![](https://assets.st-note.com/img/1698633681167-XSLSNNnjPg.png?width=1200)
![](https://assets.st-note.com/img/1698633525143-nhPr7JMEG9.png?width=1200)
ヒラギノ角ゴ+Acumin
和文:ヒラギノ角ゴ W3/欧文:Acumin Light
![](https://assets.st-note.com/img/1698633686344-8L8MwSidRX.png?width=1200)
![](https://assets.st-note.com/img/1698633533424-lNY4SSVRmq.png?width=1200)
和文:ヒラギノ角ゴ W6/欧文:Acumin Semibold
![](https://assets.st-note.com/img/1698633692529-uM0Mc6Kqko.png?width=1200)
![](https://assets.st-note.com/img/1698633538235-Hm4AfVzEiR.png?width=1200)
まとめ
後編の今回は「合成フォント」設定方法と、具体的なの混植設定サンプルをご紹介いたしました。
「和欧混植徹底解説!」前編・後編の記事を通して、ヒラギノフォントも使えるAdobe Fontsを活用した和欧混植の重要性と、和欧混植が生み出す多様性について感じていただき、これからの組版デザインに活用いただければ幸いです。
最後までご覧いただきありがとうございました。これからもヒラギノフォントに関するさまざまな情報、デザインに役立つフォントの情報を発信していきますので、ご期待ください。noteやX(Twitter)のフォローもよろしくお願いします。