【HTML】フォントサイズの基本｜px・em・remの違いやサイズが変わらない場合の対処法を解説

Webサイトの視認性やユーザビリティを高めるうえで、フォントサイズの設計は重要な要素です。しかし、HTMLやCSSでの指定方法や単位の使い分けに悩む人も多いのではないでしょうか。

この記事では、HTMLにおけるフォントサイズの基本から、px・em・remといった単位の違い、自動調整の方法までを体系的に解説します。

実務でよくある「サイズが反映されない」トラブルへの対処法も網羅しており、Web制作の現場で即活用できる内容となっています。

1.HTMLにおけるフォントサイズの基本

HTMLでのフォントサイズ調整はCSSのfont-sizeプロパティを用いることが基本であり、正しい指定方法を理解することで、視認性とデザイン性の高いWebページを作成できます。

Webページ上の文字は、ユーザーとのコミュニケーションにおいて最も重要な要素の1つです。適切なフォントサイズを設定することで可読性が向上し、ユーザー体験（UX）の質が大きく変わります。

また現代のWeb制作においては、HTML単体でのサイズ指定よりも、CSSによるスタイル管理が主流です。

かつては、以下のようにHTMLタグだけで文字サイズを指定する方法が用いられていました。

しかし、この<font>タグは現在非推奨とされており、HTML5では廃止されています。理由は、見た目の指定をHTML側に記述すると、デザインの再利用性や保守性が著しく低下するためです。

現在は、CSSを使って以下のように文字サイズを指定します。

このように、HTMLの構造とCSSのデザイン指定を分離することで、コードの保守性と再利用性が高まります。

CSSでは、以下のような単位を使ってフォントサイズを指定できます。

• 絶対単位：px（ピクセル）、pt（ポイント）など

  見た目が固定されるため、細かい調整には便利ですが、可変性に欠けます。

• 相対単位：em、rem、%など

  親要素やルート要素のサイズに基づいて調整されるため、レスポンシブ対応やユーザーの拡大表示に柔軟に対応できます。

HTMLにおけるフォントサイズの調整は、CSSによるスタイル指定が基本であり、単位の選び方や指定方法を理解することで、Webページの品質と保守性が飛躍的に向上します。

2.px・em・remの違いと使い分け方

フォントサイズの単位にはそれぞれ特性があり、特に「px」「em」「rem」は使い分けが重要です。目的に応じて適切な単位を選ぶことで、デザインの柔軟性とアクセシビリティを両立できます。

Webページのフォントサイズは、ユーザーの読みやすさや、異なるデバイスでの表示に大きな影響を与えます。絶対指定の「px」は細かなコントロールができる反面、拡大縮小への対応が難しく、一方で相対指定の「em」や「rem」は柔軟性に優れているため、レスポンシブ対応やユーザー補助機能への配慮に適しています。

px（ピクセル）

ピクセル単位は画面上の点を基準にした絶対的なサイズ指定です。

• メリット

  細かく指定でき、デザインの再現性が高い

• デメリット

  親要素の影響を受けず、拡大縮小に非対応なため、アクセシビリティに弱い

em（親要素基準の相対単位）

「em」は、親要素のフォントサイズを基準とした相対的な指定です。

• メリット

  親要素に合わせて柔軟に調整できる

• デメリット

  入れ子が深くなるとサイズ計算が複雑になる

rem（ルート要素基準の相対単位）

「rem」は、ルート要素（html）のフォントサイズを基準にします。

• メリット

  ルート基準で一貫性があり、設計がシンプル

• デメリット

  IE8以前などの非常に古いブラウザでは非対応

3.フォントサイズの一覧表と目安

HTMLで使用されるフォントサイズには、よく使われる目安やパターンがあります。これらを把握しておくことで、場面に応じた適切な文字サイズ設計ができるようになります。

ユーザーの視認性や可読性に配慮するためには、文字サイズの適切な設定が欠かせません。Webにおいては見出し・本文・注釈など、用途ごとに適したサイズを使い分けることが求められます。また、ブラウザにはデフォルトのフォントサイズがあり、それを基準とした設計が標準的です。

用途別のフォントサイズ目安は下記の通りです。

4.フォントサイズの自動調整を実現する方法

Webサイトの表示環境は多様化しており、フォントサイズもデバイスに応じて柔軟に変化させることが求められます。CSSを使えば、自動的に文字サイズを調整できる設計が可能です。

スマートフォンやタブレットなど、閲覧端末の画面サイズはさまざまです。そのため、固定されたフォントサイズでは画面に対して小さすぎたり、大きすぎたりする問題が生じます。ユーザー体験を最適化するには、フォントサイズを動的に調整する方法を導入することが重要です。

方法1：メディアクエリを使った調整

CSSのメディアクエリを使用することで、画面幅に応じてフォントサイズを変更できます。

スマートフォンでは少し小さめに、PCでは標準サイズで表示されるように調整できます。

方法2：ビューポート単位（vw, vh）を使う

ビューポート幅（vw）や高さ（vh）を使えば、画面サイズに比例して文字サイズを指定できます。

画面幅が広がると文字も大きくなり、縮小すると文字も小さくなるため、動的な調整が可能です。

方法3：clamp()関数を使ったスマートな自動調整

CSSのclamp()関数を使うと、最小値・最大値・推奨値を一括で指定できます。

この例では、画面幅が小さいときは14pxに、広がると最大18pxまでスケーリングします。レスポンシブと可読性を両立できる非常に便利な方法です。

方法4：remと%を併用した柔軟な設計

remはルート要素を基準としたサイズ指定で、ユーザーがブラウザで拡大・縮小した際にも対応しやすくなります。

このように設計することで、ユーザーのデバイス設定や表示環境に適応できます。

5.フォントサイズが変わらない原因と対処法

CSSでフォントサイズを指定しても反映されない場合、原因の多くはスタイルの競合や継承や優先順位の問題です。正しく原因を特定し適切に対処すれば、意図通りのデザインが再現できます。

CSSはスタイルの競合や継承によって、期待したとおりに動作しないことがあります。

またキャッシュの影響や外部スタイルシートの読み込み順序、ブラウザの拡張機能なども、表示に影響を与える可能性があります。これらの原因を理解し、適切な対処法を用いることで、問題の特定と解決がスムーズに進みます。

原因1：他のスタイルとの競合

この場合、<p class="special">には、より詳細なセレクタである.specialのスタイルが優先されます。

対処法としては、スタイルの優先順位を見直す必要があります。クラス名やセレクタをより具体的に記述することで、意図したスタイルが適用されやすくなります。

原因2：継承の影響を受けている

このように、親要素のフォントサイズが継承されてしまうケースもあります。font-sizeプロパティは明示的に指定しない場合、デフォルトで親要素の値が継承されます。

対処法としては、継承が不要な場合は、inheritではなく明示的に数値を指定することをおすすめします。例えば、font-size: 16px;のように直接指定すると、意図しない影響を回避できます。

原因3：CSSが読み込まれていない／キャッシュの影響

外部CSSファイルのリンクが正しく機能していない場合や、ブラウザのキャッシュが古い情報を保持している場合などです。

対処法としては、まず、HTMLファイルで正しくCSSが読み込まれているかを確認してください。CSSファイルのパスに誤りがないか、<link>タグが正しく記述されているかを見直します。また、変更が反映されない場合は、ブラウザのキャッシュを削除したうえで再読み込みを行うと改善することがあります。

原因4：!importantによる強制上書き

この指定があると、他のスタイルよりも強い影響を持ちます。

通常のスタイル優先順位を無視して適用されるため、あなたが変更しようとしているスタイルに他の場所で!importantが使われていると、それを上書きできません。

!importantの多用は、後のメンテナンス性を著しく下げますので、できる限り使用を控えましょう。どうしても必要な場合は、競合するスタイルの優先度や構造を整理したうえで使用することをおすすめします。

原因5：ブラウザの拡張機能やユーザー設定

フォント変更系の拡張機能が干渉している場合や、ユーザーが最小フォントサイズをブラウザ設定で指定している場合などです。

他のブラウザで同じページを表示してみる、あるいはシークレットモードで表示することで、拡張機能の影響を除外できます。また、開発者ツール（Chrome DevToolsなど）でCSSの適用状況を確認することも効果的です。

6.まとめ

多様なデバイス環境に対応するためには、フォントサイズを画面サイズに応じて自動調整する設計が欠かせません。メディアクエリによる切り替えやvw・remなどの柔軟な単位の活用、さらにclamp()関数を用いたスケーラブルな指定により、可読性とデザイン性を両立した文字設計が可能になります。

本記事が皆様にとって少しでもお役に立てますと幸いです。

「フリーランスボード」は、数多くのフリーランスエージェントが掲載するITフリーランスエンジニア・ITフリーランス向けの案件・求人を一括検索できるサイトです。

開発環境、職種、単価、稼働形態、稼働日数など様々な条件から、あなたに最適なフリーランス案件・求人を簡単に見つけることができます。

単価アップを目指す方や、自分の得意なスキルを活かせる案件に参画したい方は、ぜひ「フリーランスボード」をご利用ください。