HTMLでfont-sizeを指定する方法とおすすめ単位｜px・em・remの使い分けガイド

文字の大きさって、サイトを見ているときに小さすぎたり大きすぎたりすると読みにくいですよね。

特にスマホで見るときは、見やすい文字サイズってとても大事だと感じる人も多いと思います。

この記事では、HTMLで文字サイズ（font-size）を指定する方法と、使いやすい単位の選び方についてわかりやすく説明していきます。

文字サイズの指定方法が分かると、誰でも読みやすくて見た目もきれいなWebページを作れるようになりますので、ぜひ最後まで読んで参考にしてみてください。

HTMLでfont-sizeを指定する基本的な方法

font-size属性の役割と使い方

font-sizeは、HTMLやCSSを使って文字の大きさを決めるための大切な設定です。

文字が見えにくかったり、大きすぎたりすると読みづらくなるので、正しく使うことが大事です。

font-sizeを指定することで、見出しや本文、ボタンの文字などを目的に合った大きさに整えることができます。

以下のような特徴があります。

このように、font-sizeは文字の見た目だけでなく、ページの使いやすさにも大きく関係しています。

style属性を使ったインライン指定

インラインスタイルは、HTMLタグの中に直接スタイルを指定する方法です。

小さな調整やすぐに反映させたいときに便利です。

以下にその特徴を紹介します。

例えば、「<span style=”font-size:20px”>こんにちは</span>」のように書きます。

この方法はとてもシンプルですが、たくさん使うとコードが読みにくくなるので注意が必要です。

内部CSSと外部CSSでの指定方法

HTMLでは、スタイルをまとめて管理するために「内部CSS」や「外部CSS」を使うことができます。

これは、たくさんの文字や要素があるときに便利な方法です。

以下のようなメリットがあります。

内部CSSはHTMLのheadタグ内にstyleタグで書き、外部CSSは.cssというファイルを読み込んで使います。

使い分けることで、保守もしやすくなります。

HTMLタグとの組み合わせでの指定

HTMLの文字は、pタグやdivタグ、h1～h6タグなどで囲まれて表示されますが、これらとfont-sizeを一緒に使うことで、もっと見やすく工夫できます。

主な使い方には次のようなものがあります。

タグの種類ごとに文字サイズが決まっていることが多いですが、CSSで自由に変えることができます。

タグの特徴を知ると、レイアウトがきれいに整えやすくなります。

文字サイズの初期値と継承の仕組み

HTMLでは、文字サイズに「初期値」があり、何も指定しないとブラウザごとに決まった大きさで表示されます。

また、親のタグで指定したサイズを子のタグが引き継ぐ「継承」の仕組みもあります。

この考え方はCSSを書くときにとても大切です。

たとえば、親が16pxで子が1.5emなら、子は24pxになります。

この仕組みを理解すると、サイズの調整がとても楽になります。

fontタグの使用可否と注意点

昔のHTMLでは、文字サイズを変えるために「fontタグ」がよく使われていました。

しかし今では、これは非推奨とされています。

理由は次の通りです。

今はCSSでスタイルを管理するのが標準なので、fontタグは使わずにCSSを使うことをおすすめします。

基本的な記述ミスとその対処法

初心者がよくするfont-sizeの指定ミスにはいくつかのパターンがあります。

こうしたミスを防ぐためには、正しい書き方と注意点を知っておくことが大切です。

これらの間違いは、コードがうまく反映されない原因になります。

必ず確認しながら書くことが大切です。

おすすめのfont-size単位とその使い分け

px（ピクセル）の特徴と用途

px（ピクセル）は、文字のサイズをぴったり決めたいときに使われる定番の単位です。

どんな環境でも同じサイズで表示されるのが最大のメリットです。

以下のような特徴があります。

たとえば「font-size:16px」は、どんなデバイスでも同じ大きさの文字になります。

ただし、拡大縮小に弱いため、スマホやタブレットでは少し使いづらい場面もあります。

emの仕組みと柔軟な使い方

emは、親要素の文字サイズを基準にして計算される相対単位です。

この仕組みにより、デザインの柔軟性が高くなります。

まずは、emの特徴を見てみましょう。

例えば、親要素が16pxで「1.5em」と指定すれば、子要素のサイズは24pxになります。

emを上手に使うと、文字サイズの調整がとても簡単になります。

remとemの違いと選び方

remは、emと似ていますが、基準になるのが「htmlタグのサイズ（ルート要素）」です。

親の影響を受けないのが特徴です。

remとemの違いを簡単に比べてみましょう。

例えばhtmlで「font-size:16px」に設定し、要素で「1.25rem」とすると、どの階層でも20pxになります。

CSSの設計をシンプルにしたいならremがおすすめです。

%指定のメリットと注意点

%（パーセント）でのfont-size指定は、親要素のサイズを基にして割合で指定する方法です。

とても柔軟ですが、注意しないと見た目が崩れることもあります。

まずはメリットから紹介します。

一方、%は階層が深くなるとサイズの計算が複雑になりやすいという欠点もあります。

使うときは全体の設計をよく考えてから使うことが大切です。

vw・vhなどの相対単位の活用

vw（ビューポート幅）やvh（ビューポート高さ）は、画面サイズに応じて文字サイズを変えることができる単位です。

とくにスマホ対応に便利です。

以下のような使い方があります。

例えば「font-size:5vw」と書けば、画面幅の5%のサイズになります。

画面ごとに最適な表示をしたいときにとても役立ちます。

単位ごとの適したシーンと組み合わせ

文字サイズの単位にはそれぞれ得意なシーンがあります。

どの単位を使うかによって、デザインの印象や使いやすさが大きく変わります。

以下に単位ごとのおすすめシーンをまとめました。

これらをうまく組み合わせて使うと、どんなデバイスでも読みやすい文字サイズを作ることができます。

レスポンシブ対応に強い単位の選び方

スマホやタブレット、パソコンなどさまざまな端末で見やすくするには、レスポンシブ対応がとても大切です。

そのためには、相対的な単位を選ぶことがポイントになります。

以下の単位がとくに効果的です。

これらの単位を組み合わせることで、どんな画面サイズでも美しく表示できるWebサイトを作ることができます。

ユーザーにとって読みやすい文字サイズとは

Webデザインにおける理想的な文字サイズ

Webサイトでは、読者が読みやすいと感じる文字サイズを選ぶことがとても大切です。

小さすぎると読みにくくなり、大きすぎると全体のバランスが崩れてしまいます。

理想的な文字サイズの目安を以下にまとめます。

このように、目的や役割に応じてサイズを使い分けることで、読みやすくて伝わりやすいデザインになります。

デバイス別に適したサイズの考え方

スマホ、タブレット、パソコンでは画面の大きさが違うため、文字サイズも変える必要があります。

どのデバイスでも読みやすくなるように調整しましょう。

以下のようなポイントがあります。

文字サイズをCSSで調整するときは、メディアクエリを使ってデバイスごとに最適なサイズを設定するのがおすすめです。

デバイスに合わせた読みやすさを意識することが大切です。

ユーザビリティとアクセシビリティの視点

Webサイトを使う人には、子どもから高齢者、視力の弱い人など、さまざまなユーザーがいます。

そのため、誰にでも読みやすく使いやすい文字サイズを考えることが重要です。

次のような工夫が役立ちます。

これらの工夫をすることで、より多くの人にとって使いやすいサイトになります。

可読性を上げるサイズと行間のバランス

文字サイズがちょうどよくても、行間が狭すぎたり広すぎたりすると読みにくくなってしまいます。

文字の大きさと行間のバランスはとても大切です。

おすすめのバランスは以下の通りです。

行間を適切に設定すると、文章が読みやすくなり、目の負担も減らせます。

デザインと読みやすさの両方を考えて設定しましょう。

高齢者・視覚障害者への配慮

Webサイトは、すべての人が使いやすくあるべきです。

特に高齢者や視力に不安がある人にも配慮した文字サイズやデザインが求められます。

具体的な配慮点を紹介します。

このような配慮をすることで、誰でも安心して使えるサイトになります。

ユーザーの立場に立って考えることがとても大切です。

色や背景との組み合わせによる影響

文字サイズだけでなく、文字の色や背景の色との組み合わせも可読性に大きく関わります。

見やすさを意識した配色にすることが重要です。

次のような配色ルールを守ると効果的です。

配色の工夫はデザイン性だけでなく、ユーザーの理解度にも影響します。

色の使い方にも注意を向けましょう。

実際の使用例で見る適切なサイズ感

最後に、実際のWebサイトでよく使われている文字サイズの例を紹介します。

これを参考にすると、自分のサイトでも適切なサイズを選びやすくなります。

以下によくあるパターンをまとめます。

実際に使われているサイズを参考にしながら、見やすさと統一感を意識して調整することが大切です。

font-size指定時の注意点とSEOへの影響

SEOにおける文字サイズの重要性

Webページの文字サイズは、実はSEOにも大きな影響を与えるポイントです。

ユーザーが読みやすいと感じるかどうかが、検索エンジンにも評価されるからです。

Googleが重視するポイントをまとめると次のようになります。

このように、適切な文字サイズにすることで、検索順位の向上にもつながります。

SEO対策としても、font-sizeの調整はとても大切です。

文字が小さすぎることで起こる問題

文字が小さすぎると、ユーザーが読むのにストレスを感じてしまいます。

それによって、サイトの評価が下がることもあるため注意が必要です。

文字が小さいことで起きる問題は以下のとおりです。

特にモバイルでは、16px以下の文字が小さいと判断されることがあります。

読みやすい文字サイズを意識しましょう。

Googleのモバイルユーザビリティ評価基準

Googleはモバイル向けのサイトが使いやすいかどうかを評価する基準を持っています。

文字サイズもその中の重要なポイントの一つです。

以下はモバイルユーザビリティでチェックされる項目です。

文字が読みやすくて、操作しやすいページはモバイルファーストの考え方に合っており、検索エンジンからの評価も高くなります。

フォントサイズが可読性に与える影響

font-sizeの設定は、ページ全体の読みやすさ＝「可読性」に直結します。

文字が見やすければ、ユーザーは長くページを読み進めてくれます。

可読性を上げるには、次のポイントに気をつけましょう。

読みやすいページは、ユーザーの満足度も高くなり、再訪やシェアにつながる可能性も高くなります。

CSSの優先順位と意図しない上書き

font-sizeを設定しているのに、思ったように表示されないことがあります。

これはCSSの優先順位によって、指定が上書きされている可能性があります。

意図しない上書きが起きる理由を以下にまとめます。

このようなCSSのルールを理解しておくと、font-sizeが正しく反映されない原因をすぐに見つけることができます。

ベストプラクティスとしてのCSS設計

font-sizeをはじめとしたスタイル設定は、見た目を整えるだけでなく、使いやすいサイトを作るための設計でもあります。

CSSを効率的に管理するための考え方を紹介します。

良いCSS設計は保守もしやすく、長く使えるWebサイト作りに役立ちます。

font-sizeも設計の一部として考えましょう。

SEOとUXの両立を意識したサイズ設計

最後に、SEOとUX（ユーザー体験）の両方を大切にするためには、誰にとっても読みやすく、役立つ文字サイズを考える必要があります。

そのためのポイントは以下の通りです。

このような考え方をもとにfont-sizeを設計することで、検索にも強く、使って満足されるサイトを作ることができます。

まとめ

HTMLで文字サイズを指定するときは、見た目だけでなく、読みやすさや使いやすさも考えることがとても大切です。

今回の内容をふりかえって、大事なポイントを以下にまとめました。

まずは自分のWebページの文字サイズを見直して、より見やすくて使いやすいサイトを作ってみましょう。