WEBデザインで誰もが使う定番フォント16選！基礎知識も解説します

WEBサイトにおいて、本文の読みやすさは非常に重要です。また、フォントが持つ印象はサイト全体の印象を大きく左右します。

とはいえ、種類がありすぎてどれを選べばいいのか、そもそも違いはなんなのか分からないという人も多いのではないでしょうか？

今回は、制作にあたって誰もが使う定番フォントをご紹介すると共に、WEBフォントとデバイスフォントの違いなど、WEBデザイナーなら知っておくべき知識についても解説しています。

▼ ▼ 期間限定で無料プレゼント ▼ ▼

デザインを作るのに必要なフリーフォントを日本語・英語に分けて200個以上ご紹介します。フォントを検索できるサイトもお伝えしているので、ぜひご覧くださいね。

プレゼントを受け取る

WEBデザインで使われる2種類のフォント

WEBサイトで使われるフォントはデバイスフォントとWEBフォントの2種類に分かれます。使用するフォントによってWEBサイトの印象が変わるため、特徴を把握して使い分ける必要があります。

デバイスフォントとWEBフォントの違い

それぞれの特徴とメリット・デメリットを理解し、WEBサイトの雰囲気やターゲットユーザーに適したフォントを選びましょう。

システムフォント（デバイスフォント）

システムフォントは、パソコンやスマホなどの端末に元々インストールされており、デバイスフォントとも呼ばれます。

システムフォントはスマホやパソコンに元々入っているため、簡単に使えます。データ容量も軽く、表示速度が速いのもメリットです。

一方、システムフォントの表示はデバイスに左右されます。デバイスによっては想定していたものと異なるWEBサイトになってしまうため、注意しましょう。

システムフォント（デバイスフォント）については、こちらでも詳しくご紹介しています。

あわせて読みたい

「デバイスフォント」ってなに？新人さん向けデザインの基礎知識 WEBデザインの勉強をしていると、初めてみる単語がたくさん出てきますよね。 WEBデザイナーを目指す上では、わからない単語も無視できません。 今回は、「デバイスフォ…

WEBフォント

WEBフォントは、WEB上に保管されているフォントデータを読み込んで表示するため、デバイスに左右されることはありません。

どのデバイスでも同じようにフォントが表示されることは大きなメリットです。デザイン性が高く種類も多いため、サイトの雰囲気やターゲットユーザーに合わせた選択ができます。

一方でページの表示速度が遅くなるため、ネット上のサーバーからフォント情報を読み込むため、時間がかかることがあるのがデメリットです。

WEBフォントは有料なものが多く、無料のものでも商用禁止や利用登録が必須など利用規定があると使いづらさを感じます。

WEBデザインでおすすめなWEBフォントの選び方

WEBフォントにはさまざまな種類があるため、選び方に困る方も多いでしょう。ここでは、WEBフォントの選び方で重要なことを3点お伝えいたします。

視認性が高いものを選ぶ

WEBフォント選びで重要なのは、視認性の高さです。目で見た時に確認がしやすいフォントは、視認性が高いといえます。

視認性が高いWEBフォントは、ユーザーに余計なストレスをかけずWEBページに長時間滞在させる効果が期待できます。

多くのデバイスに対応しているものを選ぶ

WEBフォントを選ぶ際、多くのデバイスに対応していることも重要です。現代では、スマホやパソコン、タブレットなどさまざまなデバイスが普及しています。

画面の大きさも多種多様なため、画面サイズに合わせて自動的に調整されるレスポンシブデザインを選ぶのも重要です。

フォントのデータが重くないものを選ぶ

WEBフォントのデメリットである、表示速度の遅さを少しでもカバーするためデータが重くないものを選びましょう。

また、WEBフォントを軽量化する「サブセット化」という方法もあります。ひと手間加えて表示速度になるべく影響がないように工夫しましょう。

【フォント選びに苦しんでいる方へ】

当サイトを運営している日本デザインスクールでは、未経験から45日でプロレベルの作品を作れるように指導しています。

▼実際に45日で作れるようになる作品

講座ではフォント選びについてはもちろん、配色やレイアウトなどのコツもお伝えしています。日本デザインスクールについて気になるという方は、私たちが開催している無料セミナーに参加してみてくださいね。※セミナーではフォントや配色についてお話しすることはありません。

WEBデザインで使用するフォントの導入方法

システムフォントのみを使用する場合に事前準備は不要ですが、WEBフォントを使用する場合は事前準備が必要です。

上記、2パターンでのWEBフォントを導入する方法をご紹介します。

フォントをCSSで記述する場合

WEBフォントを使用する際、手軽に利用できるのはCSSで記述するホスティングサービスです。

STEP

フォントを選ぶ

• Google Fonts
• Adobe Fonts

上記のフォントサービスページへ行き、お好みのフォントを選びます。選ぶと「読み込みコードを取得する」が出てくるのでそちらをクリックしてください。

STEP

CSSのファイルをアップロードする

HTMLに指定のコードを追加します。

HTMLコードが表示されたらコードをコピーしてください。

こちらはワードプレスのHTMLタグ設定画面です。head内にコピーしたコードをペーストします。これでフォントを読み込む準備ができました。

STEP

CMSにCSSを追加する

「font-family」を追加する

次に、CSSコードを指定します。先ほどコピーしたHTMLコードのすぐ下にあるものがCSSコードです。CSSコードをコピーする場合は、「import」を選んでください。

CSSコードを追加します。

フォントをPhotoshopに入れる場合

WEBフォントをPhotoshopに入れる場合は、ダウンロードしてからインストールして使います。ただし、商用利用や加工を禁止しているフォントもあるので事前に著作権の注意書きはしっかり確認しましょう。

無料のフォントはインターネットで「フリーフォント」と検索すればいくつか出てきます。Adobe Fontsなら、Adobeサブスクリプションへの加入で使い放題です。

お好みのフォントをダウンロードし、フォントファイルをインストールします。詳しいフォントの追加方法は以下の記事で解説しています。

あわせて読みたい

Photoshopにフォントを追加する方法【Windows/Mac版】 この記事でわかること フリーフォントとは何か フリーフォントの入手方法 Photoshopにフリーフォントを追加する方法 Photoshopにフリーフォントを追加できないときの対…

WEBデザインでおすすめのシステムフォント9選

WEBデザインで頻繁に使われる定番のシステムフォントをご紹介いたします。ユーザーにとって読みやすく見慣れたフォントのため、ぜひ覚えておきましょう。

4種類のカテゴリー別にそれぞれご紹介します。

明朝体

明朝体は線に強弱があることで文字がわかりやすいです。読んでいて疲れにくいため、新聞や小説など長文で使われます。代表的なフォントは以下の通りです。

ヒラギノ明朝

読みやすいフォントなため、さまざまなシーンで使われる人気のフォントです。

游明朝

「時代小説が読める明朝体」をテーマに開発されただけあり、伝統的な雰囲気があります。文字の曲線と丸みが程よく、明るさも兼ね備えたバランスの良いフォントです。

リュウミン

バランスがいいリュウミンは、本文や見出しなど幅広いシーンに活用されています。

ゴシック体

ゴシック体は線の太さが均一なためシンプルな見た目です。視認性が高いため、WEBサイト上ではよく使われます。代表的なフォントは以下の通りです。

ヒラギノ角ゴシック

とても読みやすいフォントなため、本文から見出しまで幅広く使われます。

游ゴシック

游ゴシックも視認性が高いため、最近のWEB業界では人気のフォントです。

メイリオ

メイリオは日本語の「明瞭」が由来のとおり、綺麗でとても読みやすいです。

サンセリフ体

サンセリフ体とは、アルファベットをベースにしている欧文書体のひとつです。日本語フォントのゴシック体と同様、線が均一になるように作られています。代表的なフォントは以下の通りです。

Helvetica（ヘルベチカ）

Helveticaフォントは、世界で1番使われていると言われる最も有名なフォントです。欧文フォントに迷った時は、Helveticaフォントを選べば間違いないでしょう。

Arial

Arialフォントは、Helveticaの代用フォントとして使われています。

セリフ体

サンセリフ体と同じ欧文書体のひとつです。日本語のフォントである明朝体と特徴がよく似ています。

GEORGIA

GEORGIAは、有名なフォントデザイナー「マシュー・カーター」によって作られました。細部までこだわって作られていることが特徴です。

WEBデザインでおすすめのフリーWEBフォント7選

WEBデザインでおすすめなフリーWEBフォントを8選ご紹介します。

システムフォントがシンプルでオーソドックスなものに対し、WEBフォントはデザイン性を出したい時に最適です。

日本語に対応しているWEBフォントは少ないですが、3つのカテゴリーに分けてお伝えいたします。

明朝体

明朝体のおすすめフリーWEBフォントは2種類です。

Noto Serif

Noto SerifはGoogleが開発したフォントで、ベーシックなものです。明朝体系のフォントで迷うなら、Noto Serifをおすすめします。

Noto Serifのダウンロードはこちら

さわらび明朝

丸みがあるやわらかなタッチが特徴的で、和文テキストや和風デザインに最適です。

さわらび明朝のダウンロードはこちら

ゴシック体

ゴシックのおすすめフリーWEBフォントは2種類です。

Noto Sans

Noto SansもNoto Serifと同様にGoogleが開発したフォントで、多くの言語に対応しています。

Noto Sansのダウンロードはこちら

M Plus 1

カジュアルな印象があるため、エンタメ系のWEBサイトでの使用に向いています。丸みがありポップな印象です。

M Plus 1のダウンロードはこちら

▼日本語フリーフォントについてさらに詳しく知りたい方はこちらが記事がおすすめです。

あわせて読みたい

商用利用可の日本語フリーフォント160選【2024年10月更新】 「良いデザイン・反応が取れるデザイン・結果を出せるデザイン」これらをあなたが作り上げるために重要なことがあります。 それは、レイアウト・配色・書体・写真・図解…

サンセリフ体

サンセリフ体のおすすめフリーWEBフォントは4種類です。

Roboto

Robotoは、AndroidやChrome などのGoogle製品で広く使われています。モダンな印象があり近年人気のフォントです。

Robotoのダウンロードはこちら

Oswald

視認性に優れているため、タイトルや見出し、キャッチコピー、ロゴなど目立たせたい場面に多用されます。

Oswaldのダウンロードはこちら

Montserrat（モントセラト）

Montserratは安定感がありながらも、おしゃれな印象があるため、ベーシックなものから見出しまで使用範囲が幅広いです。

Montserratのダウンロードはこちら

▼英語フリーフォントについて詳しく知りたい方はこちらの記事がおすすめです。

あわせて読みたい

【すべて商用OK】おすすめの英語フリーフォントまとめ フォントっていろんな種類があって悩みますよね…。どれを使ったらいいかわからず、いつも同じフォントばかり使ってしまうなんて声もよく聞きます。 そこで今回は、無…

WEBデザイン制作で役立つフォントサービス

WEBデザインで頻繁に使うフォントサービスを4つご紹介いたします。WEBフォントを導入するなら、ぜひ覚えておきたいサービスです。

Google Fontsは完全無料でほかの3つは無料と有料プランがあります。それぞれの特徴をまとめました。

＜WEBフォントサービス4選＞（2024年7月時点）

※「無料フォントのみ表示」の絞り込み検索はこちら

それぞれ詳細をご紹介いたします。

Adobe Fonts

アドビシステムズが提供するフォントサービスです。有料プランはサブスクリプション型で、Creative Cloudのプランに含まれています。1,980円（税込）以上のプランであれば、30,000以上のWEBフォントが使い放題です。

Google Fonts

Google FontsはGoogleが提供するWEBフォントサービスです。1,700種類のフォントが全て無料なため、WEBデザインをするうえでは必須といえます。使い方も簡単なため、初心者にも優しいです。

MyFonts.com

海外で有名な「Monotype」による提供のWEBフォントサービスです。27万以上のWEBフォントがあるため、選択肢には困らないでしょう。料金は、サブスクリプションプランと都度購入プランがあります。

MyFonts.comのサブスクリプション

サブスクリプションプランの利用規定はかなり細かいため、利用するサイト規模やユーザー数に合わせて検討しましょう。

TypeSquare

書体メーカー「モリサワ」によるWEBフォントサービスです。無料で利用できる書体はひとつだけですが、WEBフォントの弱点である日本語フォントが豊富にあるのが特徴です。

料金は３パターンあります。

有料プランの料金は、WEBサイトのPV数が10万増えるごとに1,650円加算される仕組みです。詳細はこちらをご覧ください。

まとめ

いかがでしたでしょうか？

今回はフォントの基礎知識とWEBデザインでよく使う定番フォントを紹介しました。

WEBサイトと文字はとても密接な関係なので、サイトの閲覧時にはフォントの使われ方にも注意してみてください。

WEBサイトで使えるフォントはたくさんありますが、WEBデザイナーは「文字が読みやすいか」、「サイトの雰囲気に合っているか」ということを考えて、最適なフォント選びをしていくべきです。

後半は、おすすめのフォントをご紹介しましたが、どれも読みやすく使い勝手がいいフォントで、WEBデザインではよく利用されています。

お気に入りのフォントをうまく使いこなして幅広い表現ができるようになってください。

また、フォントのサイズもデザインの印象を大きく左右します。

▼フォントの大きさを調整するうえで、コチラの記事も参考にしてみてくださいね。

あわせて読みたい

フォントサイズのベストな設定は？可読性の高いWEBデザインのポイント WEBサイト制作の時、色づかいなどのデザインはこだわっていても、テキスト部分は適当になっていませんか？ 意外と見落とされがちな、見出しやコンテンツなどのテキスト…