WEBデザイナーになるまでのロードマップ無料配布中 >受け取りはこちら

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

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

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

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

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

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

WEBデザインを勉強したいけど、やり方がイマイチわからない、、、。そんな方のためにプロがおすすめする7つの最強勉強法をまとめました。ぜひ手に取って勉強をするときの参考にしてくださいね。

目次

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

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

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

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

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

システムフォント(デバイスフォント)

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

システムフォントのメリット
  • 無料で使える
  • 簡単にすぐ使える
  • WEBサイトでの表示が速い
システムフォントのデメリット
  • デバイスに左右される
  • 選択肢が少ない

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

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

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

WEBフォント

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

WEBフォントのメリット
  • デバイスに左右されない
  • デザイン性が高い
  • 種類が多い
WEBフォントのデメリット
  • 有料なものがある
  • 使用前に設定が必要
  • 日本語対応のフォントが少ない
  • 利用規定がある場合は使いにくい
  • WEBサイトの表示が遅くなる場合がある

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

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

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

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

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

WEBフォントの選び方
  • 視認性が高いものを選ぶ
  • 多くのデバイスに対応しているものを選ぶ
  • フォントデータの重さ

視認性が高いものを選ぶ

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

視認性の高さを測る要素
  • 文字の形状
  • 文字間のスペース
  • フォントサイズや太さ

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

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

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

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

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

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

容量が重くないWEBフォント
  • 圧縮データ形式のもの
  • 使用頻度の少ない文字を除外している

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

フォントのサブセット化
  1. フォントをダウンロードする
  2. サブセットフォントメーカーをダウンロードする
  3. 常用漢字+ひらがな+カタカナ+全角英数字+半角英数字を検索し記述する
  4. 新しいフォントファイルを作成しダウンロードする
  5. ファイル形式を変更する(woff形式)
  6. フォントファイルをディレクトリに設置する
  7. CSSに@font-faceとfont-familyを記述する

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

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

WEBフォントの使用方法
  1. フォント提供会社のサーバーから随時読み込む(ホスティングサービス)
  2. 自身のサーバに保存し読み込む(セルフホスティング)
使用パターンやり方難易度
1.ホスティングサービスCSSで記述する
2.セルフホスティングPhotoshopに入れる

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

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

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

STEP
フォントを選ぶ

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

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

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

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

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

STEP
CMSにCSSを追加する

「font-family」を追加する

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

CSSコードを追加します。

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

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

WEBフォントのダウロード手順

手順1:フォントを選びダウンロードする
手順2:フォントファイルを開く
手順3:「インストール」を選択

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

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

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

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

  • 明朝体
  • ゴシック体
  • サンセリフ体
  • セリフ体

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

明朝体

明朝体の特徴
  • たて線が太い
  • よこ線が細い
  • 「うろこ」がある
  • 和風的な印象
  • 新聞など長文で使われることが多い

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

ヒラギノ明朝

ヒラギノ明朝の特徴
  • MacとiOSにインストールされている
  • 字面が大きい
  • 華やかな印象

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

游明朝

游明朝の特徴
  • Windows8.1とMacにインストールされている
  • 文字間にゆとりがある
  • 上品で落ち着いた印象

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

リュウミン

リュウミンの特徴
  • スタンダードな明朝体
  • 「うろこ」に柔らかさがある
  • 親しみやすい雰囲気

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

ゴシック体

ゴシック体の特徴
  • 線の太さが均一
  • 角張っている
  • 目立ちやすい
  • 力強い印象
  • 視認性が高い
  • WEBサイトでよく使われる

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

ヒラギノ角ゴシック

ヒラギノ角ゴシックの特徴
  • MacとiOSにインストールされている
  • 太めの字面
  • くせがなく視認性が高い
  • ふところがややしまっている

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

游ゴシック

游ゴシックの特徴
  • Windows8.1とMacにインストールされている
  • 小さめな字面
  • スマートな印象
  • 文字間にゆとりがある
  • やや狭いふところ

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

メイリオ

メイリオの特徴
  • マイクロソフトが開発
  • Windows Vista以降のWindowsにインストールされている
  • ふところが広め
  • やや横長な印象

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

サンセリフ体

サンセリフ体の特徴
  • 線の太さが均一
  • 目立ちやすい
  • 力強い印象
  • 視認性が高い
  • WEBサイトでよく使われる

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

Helvetica(ヘルベチカ)

Helveticaの特徴
  • Macにインストールされている
  • シンプル
  • 力強い印象
  • 視認性が高い
  • タイトルや見出しなど幅広く使われる
  • 企業ロゴにも使われる

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

Arial

Arialの特徴
  • Helveticaに似ている
  • も時間がやや広い
  • シンプルで使いやすい
  • WindowsとMacにインストールされている

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

セリフ体

セリフ体の特徴
  • たて線が太い
  • よこ線が細い
  • 「セリフ」がある
  • 古典的で上品な印象
  • 新聞など長文で使われることが多い

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

GEORGIA

GEORGIAの特徴
  • WindowsとMacにインストールされている
  • パソコン用に開発された
  • 文字がつぶれにくい
  • 暖かい印象

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

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

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

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

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

  • 明朝体
  • ゴシック体
  • サンセリフ体

明朝体

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

  • Noto Serif
  • さわらび明朝

Noto Serif

Noto Serifの特徴
  • 和文フォント
  • 游明朝の代用フォント
  • 万能で使いやすい

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

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

さわらび明朝

さわらび明朝
さわらび明朝の特徴
  • 和文フォント
  • Google Fontsにて提供
  • スタンダードな明朝体
  • 程よい太さ
  • 小さい文字でも読みやすい

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

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

ゴシック体

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

  • Noto Sans
  • M Plus 1

Noto Sans

Noto Sansの特徴
  • 和文フォント
  • 游ゴシックの代用フォント
  • 少し丸みがある
  • 優しい印象
  • ベーシックなゴシック体

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

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

M Plus 1

M Plus 1の特徴
  • 和文フォント
  • ほとんどの漢字に対応
  • ゆとりがある設計
  • モダンな印象

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

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

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

サンセリフ体

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

  • Roboto
  • Oswald
  • Montserrat

Roboto

Robotoの特徴
  • Googleが開発
  • AndroidやChromeで使われる
  • 丸みを帯びている
  • 均等な太さと幅
  • 視認性が高い
  • テキスト本文に向いている

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

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

Oswald

Oswaldの特徴
  • ひと文字の幅が狭い
  • 細長いデザイン
  • 線の太さが太め
  • シャープな印象
  • デザイン性が高い

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

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

Montserrat(モントセラト)

Montserratの特徴
  • どっしりした字面
  • 安定感がある
  • 小さい文字でも読みやすい
  • おしゃれな印象

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

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

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

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

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

  • Adobe Fonts
  • Google Fonts
  • fonts.com
  • Type Square

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

<WEBフォントサービス4選>(2024年7月時点)

フォントサービス名料金フォント数特徴
Adobe Fonts無料・有料30,000以上無料会員は約1,000フォントへアクセス可能
Google Fonts全て無料1,705全て無料で利用可能。導入手順もシンプル
MyFonts.com無料・有料27万以上無料フォントは900種類以上※
Type Square無料・有料2,053PV数・書体数・ドメイン数に応じた料金プラン

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

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

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のサブスクリプション

料金$/年$99/$199/$2,500/$7,500/$20,500

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

TypeSquare

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

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

料金PV数利用可能書体利用可能ドメイン数
無料1,000/月11
2,750円/月25万/月43
5,500円/月100万/月全書体8

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

まとめ

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

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

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

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

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

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

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

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

▼ ▼ 限定公開中 ▼ ▼

当メディアを運営している日本デザインスクールは、これまで14364人WEBデザイナーの仕事についてお伝えする無料セミナーを開催してきました。

その中で気づいたのが、WEBデザイナーへの誤解がある方が多いということ。中には一度勉強に失敗してからセミナーに来て「先に知りたかった」という方もいらっしゃいます。

そのような方が増えないために、特に多かった15の誤解を1つの資料にまとめました。勉強を始めてから後悔しないよう、ぜひ受け取ってください。

※非常に人気の資料であり、今後有料化する可能性もあるのでお早めに手に取ってくださいね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

質問や感想があればご記入ください

コメントする

目次