Design

【2021版】Webデザインで、よく使うおすすめフォント

こんにちは、デザイナーのまめです。

Webデザインを勉強しはじめの方からちょこちょこ「どんなフォントをダウンロードしたらいいのか?使ったらいいのか?」という声を聞くことがあったので、個人的によく使うフォントやお気に入りのフォントをご紹介したいと思います。

デバイスフォント

PCに元から入っていてよく使うフォントをご紹介します。
パソコン側に標準搭載されている書体を利用すれば、Webフォントを使用する場合に比べてページの読み込みが早いので本文で特に世界観を作り込む必要性がなければおすすめです。
※わたしがMacを使用しているのでややMacだけに搭載されているもの多めです。ごめんなさい。

日本語フォント

ヒラギノ角ゴシック(Mac)

macOSおよびiOSに標準搭載されているフォント。
カッチリとした安心感のある定番の読みやすいフォントです。
ウェイト数も多いので使い勝手がとても良いです。

ヒラギノ明朝(Mac)

macOSおよびiOSに標準搭載されているフォント。
こちらも、線がキレイで読みやすいフォントで使い勝手が良いです。

游ゴシック

Windows8以降のWindowsおよびmacOSに標準搭載されているフォントです。
ヒラギノよりもややこぶりな印象。
ヒラギノ同様に使い勝手がよく読みやすいフォントです。

游明朝

Windows8以降のWindowsおよびmacOSに標準搭載されているフォントです。
個人的にはヒラギノ明朝よりも游明朝派です。

欧文フォント

Helvetica(Mac)

聞いたことがある人が多いフォントNO1じゃないかというくらいめちゃくちゃ人気のフォント。
癖がなくシンプルで読みやすい安定感のあるフォントで、有名企業のロゴなどにもよく使われています。
(Windowsには残念ながら搭載されていないので、Adobefontの「Nimbus Sans」が似ているようなのでそちらもおすすめです。)

Arial

すごくシンプルで読みやすいフォントです。
Helveticaと比べると少しまるっぽい感じ。

Gill Sans

サンセリフ体だけど幾何学的な雰囲気のあるフォントです。
個人的にtのエッジが効いてるところが好きです。

Times New Roman(Mac)


シンプルで読みやすく美しいフォントです。
イギリスのタイムズ紙が新聞用書体として開発したものらしいです。
(余談ですが、外大に通っていてタイムズ紙を読む授業があったので個人的に馴染み深いフォントです)

Cochin(Mac)

線の端がシャープだけど丸みのあるフォントで、上品だけど親しみもあるようなフォントでお気に入りです。

アドビフォント

Adobe FontsはAdobeが提供するフォントライブラリサービスです。
15,000 を超えるフォントから必要なだけ選択可能!使用フォント数に制限なし!Adobe CC会員なら追加料金なし!フォントは商用利用もOKです!無料のAdobeアカウントでも約200種類のフォントを利用できます。

日本語フォント

筑紫A丸ゴシック

まるっとしているけど可愛くなりすぎず、やさしい印象のフォントです。
女性向け、子供向けのデザインなどでよく使います。

DNP 秀英角ゴシック銀 Std


太すぎず細すぎず、かたすぎずやわらかすぎず、で程よい親しみやすさもあるフォントかなっと思います。
丸ゴシックつかうと可愛くなりすぎるけどかっちりしすぎたくない絶妙なときに使うことが多いです。

漢字タイポス412 Std


細いところと太いところがちょっとカリグラフィーっぽい?マーカーっぽい?フォントです。
子供向けとかポップなデザインのときに使います。
ベタ打ちだとややバランスが悪いのでベースラインの調整を個人的にはしてます。

貂明朝テキスト


「てんみんちょうたい」って読むらしい。
明朝体ですが、やさしい丸みがあって上品でお洒落なフォントです。
本文というよりはタイトルや見出し部分によく使います。

砧 丸丸ゴシック

最近、追加されたフォントで「砧」シリーズはたくさんあるのですが、中でもいちばん砧 丸丸ゴシックが好きです。
丸みがあってかわいいけど、読みやすいので、あしらいやタイトルなどいろんなところで使いやすそう。

TA恋心

わたしはかわいい字を書けないので、こういう手書き文字は大好きです!
長文でしっかりと読ませるときには向いてないけど、タイトルやあしらいや、リアルなコメントっぽい雰囲気作りにも良いかなと思います。

欧文フォント

Athelas

癖がなくシンプルで使いやすいフォントです。
高級感を出したいときや数字だけ使うこともよくあります。

DIN 2014

「UNIQLO」のロゴで使われている超有名なフォントです。
力強くクールな印象なので、キャッチコピーやポスターなどでドンって大きく使っても良いし、英数字だけポイントで使ってもグッと引き締まるしでとにかくよく使います。

Quicksand


まるっとした形がかわいいけど、かわいすぎないフォントです。
ウェイト数もあるので使い勝手も良くてお気に入りです。

Futura PT


デザイナーからめちゃくちゃ人気なフォントのひとつです。
こちらも、有名企業のロゴによく使われています。
どこで使ってもいい感じになる万能フォントじゃないかと個人的に思います。

Learning Curve


筆記体の中では比較的、読みやすく可愛らしいフォントです。
飾り文字でよく使います。
結婚式の招待状とかに合いそう

グーグルフォント

Google Fontsとは、Googleが提供するWebフォントのサービスです。
基本的に無料で利用でき、様々な言語のフォントにも対応している点が大きな特徴です。

Google Fontsを使用することで、どのOSであっても同じフォントで表示することができます。
ただデメリットもあって読み込み時間がかかるので、フォント数が多くなると表示される速度が遅くなってしまうのでその点は注意しましょう。

ダウンロードの仕方はこちらの記事がわかりやすかったのでおすすめします。
https://digitalidentity.co.jp/blog/creative/google-fonts.html

日本語フォント

Noto Sans JP

読みやすい間違いないフォントです。
ウェイト数もあるので、本文、見出しなんでも使いやすいです。

Noto Serif JP

上記と同じく、読みやすい間違いないフォントです。
ウェイト数もあるので、本文、見出しなんでも使いやすいです。

さわらび明朝

明朝体ですが、ほどよい太さがあってしっかりとしているフォントです。
少しやわらかいのでかたすぎない印象で使えます。

欧文フォント

Roboto

Googleのデザイナーが開発したフォントです。
AndroidやChrome OSのシステムフォントに採用されるらしく、Webデザインとも相性が良いです。
癖もなくウェイト数も多いので使いやすいです。

Montserrat

丸みがあってかわいいけど安定感もあるようなフォントです。
見出しなどちょっと印象づけたいときにもおすすめです。

Lato

シンプルだけど丸みもありキュッとつまってるのがかわいいフォントです。
女性向けデザインでよく使ってます。

その他フリーフォント

日本語フォント

うつくし明朝体

デザイナーから人気なフォントのひとつです。
やわらかく可愛いけど上品な明朝体で、和風、女性らしいデザインで使います。
webでは使う機会が少ないのですが、個人的にとても好きなフォントです。

スマートフォントUI

いちばん最初にダウンロードしたお気に入りのフォントです。
頻繁に使うフォントではないのですが、幾何学的な雰囲気に使いやすく長文には向かないですが読みやすいフォントです。

やさしさアンチック

力強いけど上品なフォントです。
やわらかさや上品さや高級感を出したいけど、繊細すぎない印象にしたいときに使ってます。

花園明朝A

すごく上品で洗練されたフォントです。
はらいのやわらかい雰囲気がとても好きです。

源柔ゴシック

まるっとしたやわらかいけどしっかりと安定感のある読みやすいフォントです。
角ゴシックではかたすぎるときによく使います。

利用規約をしっかり確認して導入しましょう!

フォントは利用規約で商用利用可能なのか?ウェブで使用したい場合は埋め込みの使用が可能なのか?を確認する必要があります。

ウェブフォントとして利用するには、フォントをウェブサーバーに丸ごとアップする必要があります。
アップしたデータはダウンロードが可能なため、「フォントの再配布」となってしまいます。

なので、ライセンスや利用規約をよく確認したうえで使用しましょう。

ライセンスや利用規約で再配布や改変が不可、ウェブフォントとしての埋め込みが許可されていなければ、画像データとして作成するのが良いかなと思います。

まとめ

個人的におすすめのフォントを紹介しましたが厳選するのが難しかったです、、、
比較的、よく使うフォントを特におすすめしているのでシンプルなものが多めですが装飾系のフォントはまだまだおすすめあるので興味があれば聞いてください^^

ただ、フォントは入れすぎると操作が重たくなってしまうのでご注意ください〜

ABOUT ME
まめ
広島でガーリー専門Webデザイナーしてます。 元アパレル販売員から未経験でWebデザイナーに転職。 大阪出身。現在は広島在住。 将来的にはデザインで地域活性化をして日本各地をワクワクさせたい!