和欧混植のデザインしてみよう
こんにちは、フロントエンドエンジニアのジャッキーです。2021年12月から弊社のデザイン部に所属し、今年の目標はデザインエンジニアになることです。
弊社のデザイン部では、毎週「デザトレ」というデザインに関しての勉強会が行われています。
そして今週、私が担当したテーマをご紹介させていただければと思います。
今回のデザトレでは、和欧混植のデザインしてみようというテーマにしました。
和欧混植とは？
和欧混植とは、日本語と英語が混ざっている文章のことです。
このような文章のデザインをする時、フォントの選択に注意する必要があります。
何故注意する必要がある？
和文フォントは欧文文書に適用しない場合があるので、そのまま使うと違和感が生じます。
例えば、こちらの和文欧文も和文適用フォントのゴシック体を使っています。
欧文が和文フォントを使っているので、欧文の文字が小さく見えたり、欧文のカーニングが広くなったりして、不自然に見えてしまいます。
なので、雑誌の表紙とか、文字を大きく映すデザインにおいては、もし和文専用フォントを使用する場合、和文に合わせるように、欧文フォントを選択する必要があります。あるいは、和文と欧文両方対応するフォントを選んでいきましょう。
フォントを選ぶ時の手順とポイント
和文に合わせるように、欧文のフォントを選択する時の手順とポイントを紹介させていただきたいと思います。
1）書体を揃える
フォントを選択する時はまず種類を揃えていきましょう。
和文が明朝体ならセリフ体を使用、ゴシック体ならサンセリフ体を使用するようにしましょう。
2）線の太さを揃える
Font-weightが同じであっても、和文と欧文の線の太さが違く見えることもあるので、文書とフォントは実際はどのように反映されているかを確認しながら調整していきましょう。
3）欧文書体の大きさを調整
和文フォントと欧文フォントの大きさが同じであっても、両方を比べれば、欧文の大きさが若干小さく見えることがありますが、かと言って、欧文を全く同じ大きさにすると、文章全体的には不自然に見えます。
なので、大きさを調整するには、一つ一つの文字を確認して作業するのではなく、文章全体を見渡って違和感をなくすように調整していきましょう。
4）微調整
ベースラインを揃えったり、文書全体を確認して、再度大きさを調整すれば、より自然にデザインが作成できます。
他のメンバーが作成されたデザイン
今回はこちらの文章でデザイン部の皆さんと一緒にデザインしてみました。
永遠のEternal旅Journey
まとめ
和文フォントは欧文が適用しない場合があるので、そのまま使うと不自然に見えます。なので和欧混植の文書には、和文と欧文にそれぞれのフォントや両方対応のフォントを使用することが重要です。
他のメンバーが担当されたのデザトレも以下のリンクから見れますので、興味がある方は見てみて下さい！
この記事が気に入ったらサポートをしてみませんか？