Webサイト制作で実際に使えるフォント101種(英字29種 + 日本語42種 + 等幅・装飾6種)を、用途別に分類してプレビュー付きで紹介。すべてGoogle Fontsで無料利用可、@import文をコピペするだけで使えます。
最も汎用的な英字フォント。SaaS、テック系、コーポレートで定番。可読性とモダンな印象。
伝統と上品さを表現するセリフ体。エディトリアル、高級ブランド、出版系で活きる。
見出しやロゴ向けの個性派フォント。本文には不向き。一発で印象を作る用。
コードブロック、メタ情報、テック感を出したい場面で。等幅(全文字同じ幅)。
見出し用と本文用の組み合わせ例。これさえ覚えれば、すぐに見栄えが整う。
実用的な6つのポイント。
見出し用と本文用の2種類で十分。3つ以上使うとごちゃつく。基本はdisplay + bodyの組み合わせ。
日本語と英語で見え方が違うので、別フォントをfont-familyにカンマ区切りで指定すると最適化できる。例: 'Inter', 'Noto Sans JP', sans-serif
使うウェイトだけ@importする。wght@400;500;700のように指定。全部読み込むとロードが重い。
必ず&display=swapを付ける。フォント読み込み完了前にフォールバックで先に表示されるので体感が速い。
本格的な制作ではGoogle Fontsをローカルにダウンロードして配信することでパフォーマンスとプライバシーが向上する。
本文に装飾フォントを使うと読みづらい。装飾系は見出しや短いコピーまで。本文はNoto Sans JP、Inter、Loraなど王道で。