【プロが解説】Webサイトのおすすめフォントと最適サイズ・調べ方

こんにちは、デザイナーの田沢です。

自社サイトを見て「なんとなく古い感じがする」「他の会社のWebサイトはもっと洗練されて見える」と感じたことはないでしょうか。その差の正体が、実はフォントであることは少なくありません。

ただ、いざ自社サイトのフォントを見直そうとすると、どれを選べばいいのか、サイズはいくつが正解なのか、明確な基準がわからず手が止まってしまいます。
この記事では、次の4点を実務で使えるレベルまで具体的に解説します。

• 読みやすくておしゃれなフォントの具体名
• PC・スマホそれぞれの最適なフォントサイズ（数値）
• 気になる競合サイトのフォントを調べる方法
• 決めたフォントをサイトに反映させる手順

千葉県船橋市でWeb制作からシステム開発、ウェブアクセシビリティ対応まで手がけてきた経験から、単なる見た目の良し悪しではなく、成果（CV）と使いやすさに直結する基準でお伝えします。

Webサイトのフォント選びが重要な理由

フォントは、サイトをつくるときの決めごとの中では、つい後回しにされやすい要素です。色やレイアウトほど印象に残りにくく、変えたところで効果が見えにくいと感じるためです。読み手がストレスなく情報を受け取れるかどうか、そして最終的にサイトの成果につながるかどうかを大きく左右します。

たとえば、本文の文字が小さすぎて読みづらいサイトは、内容を読む前に離脱されてしまいます。逆に、読みやすく整ったフォントは、書かれている内容そのものへの信頼感にもつながります。同じ文章でも、どのフォントでどう見せるかによって、伝わり方は変わります。

フォント選びは「好み」ではなく、「誰に何を届けたいか」という視点で判断します。これが、成果を出すサイトの共通点です。

ユーザビリティ（読みやすさ）と離脱率への影響

フォントがもたらす読みやすさは、デザインの現場では3つの視点で捉えます。

• 可読性：文章がすらすら読めるか（長い本文向き）
• 視認性：ぱっと見て認識しやすいか（見出しやボタン向き）
• 判読性：文字を誤読しにくいか（数字や固有名詞向き）

たとえば『1（数字のイチ）』と『l（小文字のエル）』『I（大文字のアイ）』が見分けやすいフォントは、判読性が高いフォントです。こうした文字は、メールアドレスや商品の型番、クーポンコードなど、英数字が混ざる場面でとくに紛らわしくなります。

フォントが原因でユーザーが読み間違えると、メールアドレスを打ち間違えて連絡が届かなかったり、型番を取り違えたりといったミスにつながります。判読性の高いフォントは、こうしたトラブルを防いでくれます。

さらに近年重視されているのが、UD（ユニバーサルデザイン）フォントです。これは、高齢の方や視力に制限のある方でも読み間違えにくいように設計されたフォントのことで、文字のすき間を広くとったり、似た文字の形をはっきり区別したりする工夫がされています。

誰にとっても読みやすいサイトをつくることは、一部のユーザーへの配慮にとどまりません。結果的に幅広い層がストレスなく利用でき、離脱を防ぎ、問い合わせや購入といった成果の獲得にもつながっていきます。読みやすさへの投資は、そのままサイトの成果への投資だと考えていただくとよいでしょう。

Webサイトのフォントサイズは何pxが正解？

ここからは、結局、何pxにすればいいのか？という具体的な数値の基準をお伝えしていきます。デバイスによって最適なサイズは変わるため、PCとスマホに分けて見ていきます。

PCの本文は16pxが基準

まず、見出しやボタンではなく、まとまった文章部分（本文）は、16pxが最も一般的なフォントサイズになります。

かつては12〜14pxもよく使われていましたが、モニターの解像度が上がった今の環境では小さく感じられ、長い文章を読むときに目が疲れる原因になります。迷ったら16pxを基準にすれば、まず失敗しません。

あわせて意識したいのが行間（line-height）です。文字サイズと同じくらい読みやすさを左右する要素で、文字サイズの何倍の高さにするかという倍率で指定します。本文では文字サイズの1.5〜1.8倍を確保すると、行が詰まりすぎず、ゆったり読める印象になります。

たとえば本文が16pxなら、1.5倍でおよそ24px、1.8倍でおよそ29pxの行の高さになる計算です。数字が大きいほど行と行のすき間が広がり、ゆったりした見た目になります。

次に見出しです。見出しと本文でサイズに差をつけることを、デザインの現場ではジャンプ率と呼びます。この差が大きいほど、力強く目を引く印象になり、小さいほど、落ち着いた上品な印象になります。

本文16pxを基準にした場合の、見出しサイズの一例です。

大切なのは、この数値をそのまま使うことではなく、本文・H3・H2・H1と段階的に大きくして、情報の階層が見た目でわかるようにすることです。サイトの雰囲気に合わせて、落ち着いた信頼感を出したいなら差を控えめに、勢いや親しみを出したいなら差を大きく、と調整してみてください。

スマホ(SP)の本文も16pxが基本

スマホでも、本文は16pxを基準に考えます。

Googleが示す基準でも、スマホ（Googleはモバイルと表現しています）でタップしやすく読みやすいサイズとして、16px以上が推奨されています。スマホは画面が小さいから文字も小さくすると考えてしまいがちですが、逆です。小さな画面で読ませるからこそ、本文はしっかり確保する必要があります。

注釈や補足など、どうしても小さくしたい部分でも、14pxを下限と考えてください。これより小さくすると、読みづらいだけでなく、指でタップする際に誤タップを招いたり、老眼の方にとって大きな負担になったりします。

なお、フッターのコピーライト表記のように、読ませることを目的としない文字は、11〜12px程度まで小さくしても問題ありません。ここまで14pxが下限とお伝えしてきたのは、あくまでサイトを訪れたユーザーに読んでほしい本文や注釈の話です。

読ませたい文字は14px以上、それ以外の補足的な表記は小さくても問題ないので、この使い分けを意識してみてください。

プロが厳選！Webサイトのおすすめフォント一覧

ここからは、実際の制作でよく使うフォントを厳選して紹介します。選ぶときに大事なのが、そのフォントをどうやってサイトに使うかです。フォントには大きく2つのタイプがあります。

ひとつは、パソコンやスマホに最初から入っている標準フォント（デバイスフォント）。追加の読み込みがなくサイトが軽い一方、閲覧する端末に同じフォントが入っていないと、別のフォントで表示されてしまいます。

もうひとつが、サーバーから配信して表示するWebフォント。どの端末でも同じ見た目に揃えられるのが利点です。Google Fontsで配布されているものは無料で、商用サイトにも自由に埋め込めます。

フォントを選ぶうえで見落とせないのがライセンスです。フォントには、無料で商用利用・埋め込みできるものと、表示自体は標準でできても、Webフォントとして埋め込むには有料契約が必要なものもあります。知らずに使うと規約違反になることもあるため、使う前に必ず確認しましょう。

以下で、無料で使えるWebフォントと端末標準のデバイスフォントに分けて紹介します。

無料で使える｜Google Fontsの定番フォント

Google Fontsは、Googleが無料で提供するWebフォントサービスです。商用利用でき、リンクの記述だけでサイトに埋め込めるため、まず候補にすると失敗がありません。

ここで紹介するものはすべて、無料・商用利用可・Webフォント埋め込み可です。

すべて Google Fontsから入手できます。なお、Noto Sans JPはGoogleとAdobeが共同開発した日本語Webフォントの定番で、2025年4月にはWindows 10/11にも標準搭載され、ますます使いやすくなりました。迷ったら、まずこのNoto Sans JPから試すのがおすすめです。

端末に標準で入っている｜デバイスフォント（埋め込みは有料）

次に紹介するフォントは、パソコンやスマホに標準搭載されている定番です。CSSで指定すれば、そのフォントが入った端末では読み込みなしで表示できます。ただし、どの端末でも同じ表示に揃えるにはWebフォント埋め込みが必要になるため、有料のライセンスが必要になります。

これらは、標準搭載された端末向けにCSSで指定するだけなら費用はかかりません。ただしその場合、フォントが入っていない端末（たとえばヒラギノはWindowsには入っていません）では、別のフォントで表示されます。全端末で同じ見た目に揃えたい場合は、Adobe Fontsなどの有料のWebフォントサービスを利用することになります。

もうひとつ、発注する側として知っておきたい注意点としては、有料のWebフォントは、多くの場合、そのサイトを運用する企業自身がライセンス契約を持っている必要があります。

たとえば制作会社が自社のアカウントで有料フォントを使ってサイトを作った場合、公開時点では問題なく表示されていても、その契約が制作会社側のものだと、契約状況によっては納品後にフォントが表示されなくなることがあります。

完成したサイトを見たらフォントが変わっていたという事態を避けるためにも、有料Webフォントを使う場合は、契約の名義や更新の責任がどちらにあるのかを、制作の段階ではっきり確認しておくことをおすすめします。

気になるWebサイトのフォントを調べる方法

「このサイトのフォント、いいな」と思ったとき、そのフォント名を自分で調べる方法があります。競合サイトの分析や、デザインの参考にしたいときに役立ちます。ここでは、専門知識がなくてもできる2つの方法を紹介します。

ブラウザの検証ツールで調べる

パソコンのブラウザには、表示されているページの中身を確認できる検証ツール（デベロッパーツール）が備わっています。難しそうに見えますが、フォントを調べるだけなら手順はシンプルです。ここではGoogle Chromeから調べる方法を例に説明します。

1. フォントを調べたい文字の上で右クリックする

   

2. メニューから「検証」を選ぶと、画面の横または下にコードのパネルが開く

   

3. パネル内の「Computed（計算済み）」タブを選ぶ

   

4. 一覧の中の「font-family」という項目を見る。ここに表示されているのが、その文字に使われているフォント名です。

   

最初はコードがずらりと並んで戸惑うかもしれませんが、見るのは「font-family」の一行だけで大丈夫です。

拡張機能「WhatFont」を使う

コードのパネルを開くのは苦手という方には、もっと手軽な方法があります。Google Chromeの拡張機能であるWhatFontを一度インストールしておけば、あとは調べたい文字にマウスカーソルを合わせるだけ。フォント名はもちろん、サイズ（font-size）や太さ（font-weight）、色（color）まで、ポップアップで一目で確認できます。

コードを読む必要がないので、デザインの知識がなくても直感的に使えます。競合サイトをいくつも見比べたいときなど、手早く調べたい場面ではこちらが便利です。

Webサイトにフォントを指定・埋め込みする方法

使いたいフォントが決まったら、実際にサイトへ反映させます。方法は大きく2つ。すでに端末に入っているフォントを指定する方法と、Webフォントを読み込んで表示する方法です。ここではCSSの書き方を、コードの見本とあわせて紹介します。コードの細部まで覚える必要はありません。「こういう形で指定するんだ」とイメージがつかめれば十分です。

CSSでのフォント指定（font-family）の基本

サイトのフォントは、CSSの「font-family」という項目で指定します。書き方はこうです。

body {
  font-family: "Helvetica", "Noto Sans JP", sans-serif;
}

ポイントは、フォントをカンマ区切りで複数並べることです。ブラウザは左から順にこのフォントは使えるか？を確認し、使えるものが見つかった時点でそれを表示します。最初のフォントが端末になければ次へ、それもなければその次へ、と進みます。

ここで覚えておきたいのが、欧文（英数字用）フォントを先に、日本語フォントを後に書くことです。

理由は、日本語フォントにも英数字は含まれていますが、欧文専用フォントのほうが英数字はきれいに見えるためです。欧文フォントを先に書いておくと、英数字にはその欧文フォントが使われ、日本語には後ろの日本語フォントが使われます。結果として、英数字も日本語も、それぞれ最適な形で表示できます。

最後の『sans-serif』は、並べたフォントがどれも端末になかったときのための予備です。その場合はゴシック系の標準フォントで表示されるので、最低限の見た目は保てます。

Webフォントの埋め込み手順

Google FontsなどのWebフォントを使うときは、そのフォントをサイトに読み込む記述が必要です。Google Fontsの場合、使いたいフォントのページで表示されるコードを、HTMLの<head>内に貼り付けます。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

あとは、先ほどのfont-familyでそのフォントを指定すれば表示されます。手順としては、「読み込みの記述を貼る」「font-familyで指定する」の2ステップです。

ただし、日本語のWebフォントには注意点があります。日本語フォントはファイルサイズが大きく、サイトの表示速度を遅くする原因になりやすいのです。アルファベットが大文字・小文字あわせて数十文字なのに対し、日本語はひらがな・カタカナに加え、漢字が数千文字あります。

その全部をフォントとして用意するぶん、日本語フォントはデータが重くなるのです。表示が遅いサイトは、それだけで離脱の原因になります。対策として、次のような方法があります。

• 必要な太さ（ウェイト）だけ読み込む：太字や細字をすべて読み込むと重くなるため、使うものだけに絞る
• 「display=swap」を指定する：フォントの読み込みが終わるまで、先に標準フォントで文字を表示させる記述。読み込み中に文字が真っ白になるのを防げます（先ほどのコードにも含まれています）
• サブセット化する：使う文字だけに絞ってフォントを軽くする方法

使う文字だけに絞ってフォントを軽くする方法。ただし、Google Fontsを埋め込みコードで利用する場合は、実際に使われている文字を判別して自動的に最適化してくれるため、この対応は基本的に不要です。

まとめ

Webサイトのフォントは、サイトの第一印象を左右するだけでなく、読みやすさを通じて離脱率やお問い合わせにも影響する、大切な要素です。最後に、この記事のポイントを振り返ります。

• フォントサイズは本文16pxが基準：PCでもスマホでも、本文は16pxを目安にすると読みやすく仕上がります。小さくする場合もスマホは14pxが下限です
• 見出しはジャンプ率でメリハリを：本文・H3・H2・H1と段階的に大きくして、情報の階層が見た目でわかるようにします
• 迷ったらGoogle Fontsの無料フォントから：Noto Sans JPをはじめ、商用サイトにも安心して使えます
• 有料フォントはライセンスの確認を：特にWebフォントとして埋め込む場合は、契約の名義や責任の所在をはっきりさせておきましょう
• Webフォントは表示速度とのバランスが大切：見た目の美しさと読み込みの軽さ、どちらも両立させることを意識します

フォントやサイズの選択は、サイトの印象と使いやすさを大きく左右します。まずは、自社サイトが今どんなフォントを使っていて、フォントサイズはいくつなのか、確認してみるところから始めてみてはいかがでしょうか。

もし、フォントだけでなくサイト全体を見直したい、成果につながるサイトにしたいとお考えなら、ぜひ一度ご相談ください。

ノベルティは、千葉県船橋市を拠点に、Web制作からシステム開発、ウェブアクセシビリティ対応まで一貫して対応しています。デザインの見た目だけでなく、「使いやすさ」と「成果」の両面から、サイトづくりをお手伝いします。