相性の良い英字フォント同士の組み合わせとは？
皆さん、こんにちは！Design Switchです。前回は「現役UIデザイナーがお勧めする、実務で使えるFigmaの覚えたい新機能3選！」について紹介しました。まだ前の記事を読んでいない方はこちらから是非読んでみてください👉
UIにおいてフォントは、ユーザーに読ませることを重視する場合は可読性が高い必要があります。✨しかし、ファーストビューなどでサイトの世界観にユーザーを引き込みたい場合などは、可読性よりもフォントの美しさを重視した方が良い時もありますよね。このユーザーに読ませるフォントと魅せるフォントですが、特に選び方が決まっているわけではないので、若干選びづらさを感じたことはないでしょうか？🤔
そこで今回は、相性の良いフォントの組み合わせ方法（あくまで一説）があるようなので、それを紹介していきたいと思います。🌟
初めのうちはサンセリフ体とセリフ体の組み合わせを考えてみよう。
一般的には、セリフ体とサンセリフ体の組み合わせが合うと言われています。ここで、セリフ体とサンセリフ体の違いを簡単に説明をさせていただきます。既に知っている方は、以下の説明文をスキップしてください。😎
セリフ体で、英文字を入力すると以下の左の写真のようにAの足にセリフがついたものになります。セリフとは、日本語で「ウロコ」のような意味があります。一方で、サンセリフ体は、Aの足にセリフのない以下の右の写真のような形のフォントの形のことを指します。
なぜ、この二つの異なるフォントスタイルの組み合わせが良いのかというと、一説には、コントラストの大きい異なるフォントを使用することでそれぞれのフォントの個性を目立たせることができ、相性の良さが生まれるからだそうです。
では、どちらのフォントを魅せるフォントとしてどちらのフォントを読ませるフォントにするのが良いのでしょうか？
これについては議論があるとは思いますが、ウェブ上で読みやすいのはサンセリフ体と言われています。その理由として、シンプルな字体であるため、様々な解像度の画面で文字を綺麗に表示できるからだそうです。そのため、ウェブ上ではサンセリフ体を読ませるフォントとして設定するのが良いかもしれませんね。そうなると、必然的にセリフ体が魅せるフォントになる可能性が高いです。
しかし、このフォントの組み合わせ方でも、相性が合わない場合はもちろんあります。さらに考慮すべき点があるので、それを次で説明していきたいと思います。
x-heightとは？
もう一点考慮すべき点は、フォントのx-heightです。
x-heightとは、フォントの小文字の高さのことを指します。この高さが同じ場合、サンセリフ体とセリフ体など異なるフォントスタイルでも相性が良いと言われています。
上記のセリフ体：Kaiti TCとサンセリフ体：Helveticaは同じサイズでありながらもx-heightが異なります。そのため、相性としてはよくないと言えます。
では、なぜこのx-heightが異なるとあまり綺麗に見えないのでしょうか？私が思うに、同じフォントサイズを使用した時に文字の高さが異なることで、整列していないように見えたり、そもそもフォントサイズ自体にばらつきがあるように見えてしまうのが原因なのではと思います。
では、この法則でフォントを組み合わせているサイトがあるのか実際にみていきたいと思います。
実際にいろんなサイトに使われているフォントの組み合わせをみてみよう。
まずは、マッシュルーム東京のサイト（https://mushroomtokyo.com/）を見てみたいと思います。このサイトでは、セリフ体はChromateを使用していて、サンセリフ体はSporting Grotesqueを使用しています。
また、以下の写真を見るとx-heightには10pxほどの差があります。10px程度の差だと、ぱっと見で二つのフォントが整っているように見えます。
さらに気づいたこととしては、両フォント共にレギュラーのフォントウェイトでボールドフォント並みの太さがあることです。フォントの太さを揃えることでさらに英文字同士の相性を高めているのかもしれませんね。
次に、Journal by Naris（https://journalbynaris.jp/）のサイトに使われているフォントからみていきましょう。
このサイトでは、セリフ体はCormorant Garamondを使用していて、サンセリフ体はHK Groteskを使用しています。以下を見るとx-heightは20pxほど差があります。並べてみると若干右のフォントが大きいように感じます。
フォント自体の太さは先程と同様で似ていますね。
また、以下の大文字比較した写真を見るとわかりますが、大文字にするとフォントの高さがほぼ同じくらいになり、ぱっと見は整っているように見えます。
このサイトでは、x-heightの合わないフォントを使用しているのですが、ぱっと見は整っているようにみせるため、同じフォントサイズでそれぞれのフォントスタイルを使用する場合は、両方とも全て大文字で表記しているのかもしれません。
実際にサイトをみて調査してみると、フォント自体の太さを揃えて相性をよく見せたり、x-heightが揃わない場合は、大文字を使いフォント自体の大きさが揃うように調節したりと異なるフォントスタイルでも綺麗に見せようとしているのが見えた気がしました。
サイト上で、フォントを研究すると他にも発見があるかもしれませんね。
ぜひ、他にも発見があった方はコメントで教えてくださると嬉しいです！よろしくお願いします！🙇♂️
まとめ
🔳サンセリフ体とセリフ体の組み合わせがいい理由は、コントラスの大きい異なるフォントを使用することでそれぞれのフォントの個性目立たせることができるからである。
🔳X-heightを揃えると異なるフォント同士でも綺麗に整列して見える。
🔳x-heightの合わないフォントを使用している場合でも、大文字で全て表記することやそれぞれのフォントサイズを細かく調節することで、X-heightを揃えた時と同様の効果が得られる。
最後まで読んでいただきありがとうございます！必ずしもフォント選びには、正解がないのですが初めのうちはある程度ルールがあるとフォントも選びやすいですよね🌟
また、今回は英語に特化したフォントの選び方ですが、日本語フォントの選び方も研究していきたいなと個人的に思いました。日本語フォントについても記事にして欲しいという方は、ぜひ、いいねしてくれると嬉しいです！😭🙏
🌟 現在ARCHECOではUIデザイナーを募集しています。ご興味のある方は是非こちらからご応募ください！お待ちしております。
🌟 Design Switch (デザインスイッチ)を運営している UX/UIデザイン会社 ARCHECO (アルチェコ)について
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？