HTMLタグでフォントサイズを調整する方法【失敗しない指定の基本】

HTMLで文字サイズを変えたいと思っても、実際にはどのタグを使うべきか、CSSで指定するべきか、古い書き方は何が問題なのかで迷いやすいものです。
特に初心者の方は、fontタグやsize属性の情報を見かけて混乱しやすく、思った通りに表示されないこともあります。

この記事では、HTML タグ フォントサイズというテーマに沿って、現在の標準的な考え方、実務で使いやすい指定方法、見出しや本文に適したサイズ設計まで体系的に解説します。
スマホ表示も意識しながら、読みやすく保守しやすい書き方を理解したい方は、ぜひ最後までご覧ください。

HTMLタグでフォントサイズを指定する基本

HTMLでフォントサイズを変えたいと考えたとき、まず押さえたいのは、文字の意味づけはHTML、見た目の調整はCSSという役割分担です。
現在のWeb制作では、本文、見出し、注釈などの構造をHTMLタグで記述し、文字サイズそのものはCSSで指定するのが基本です。

以前はfontタグのようにHTMLだけで文字の大きさを変える方法も使われていましたが、現在は標準的な書き方ではありません。
そのため、HTMLタグを選ぶときは、見た目のためにタグを選ぶのではなく、文章の役割に応じてp、h1、h2、spanなどを使い分け、その上でCSSのfont-sizeを適用する考え方が重要です。

HTMLタグとCSSの役割の違い

HTMLタグは、そのテキストが何であるかを示すために使います。たとえば、h1はページの主題、h2は章見出し、pは段落、spanは一部の文字を囲うための汎用タグです。
一方で、文字サイズ、色、太さ、余白といった見た目はCSSの担当です。

この役割分担が守られていると、デザイン変更が非常に楽になります。
たとえば本文の文字サイズを16pxから18pxに変更したい場合でも、CSSを1か所直すだけで全体に反映できます。HTML側に個別指定が多いと、修正漏れが起きやすくなります。
実務でも保守性と再利用性の観点から、この分離は重要です。

フォントサイズ指定でよく使うタグ

フォントサイズの調整そのものはCSSで行いますが、対象となるHTMLタグの選び方も大切です。
よく使うのは、段落を表すp、見出しのh1からh6、部分的な装飾に使うspan、補足情報に使いやすいsmallなどです。

ただし、smallは単に小さく見せるためだけでなく、注記や補足という意味を持たせる場面に向いています。
また、見出しタグはブラウザ標準で大きさが異なりますが、その既定値に頼り切るのではなく、CSSで明示的にfont-sizeを定義するのが一般的です。
意味に合ったタグを選ぶことが、SEOとアクセシビリティの両面でも有利になります。

フォントサイズ変更に使う代表的な指定方法

フォントサイズを指定する方法はいくつかありますが、実際によく使われるのは、インラインスタイル、内部CSS、外部CSSの3つです。
学習段階ではインライン指定が分かりやすいものの、ページ数が増えるほど管理しにくくなるため、通常は外部CSSを中心に設計します。

また、単位の選び方も重要です。pxは直感的で扱いやすく、remは全体の拡大縮小に強く、emは親要素の影響を受ける特徴があります。
目的に応じて使い分けることで、スマホでもPCでも読みやすい文字サイズを実現しやすくなります。

style属性で直接指定する方法

最も分かりやすいのは、HTMLタグにstyle属性を直接書く方法です。
たとえばpタグやspanタグにfont-sizeを指定すれば、その要素だけ文字サイズを変えられます。学習用や一時的なテストには便利です。

ただし、同じ指定が増えるとHTMLが長くなり、後からの変更も面倒になります。
WordPressの記事本文で一部だけ強調したい場合には使いやすい一方、サイト全体の統一感を保つには不向きです。
そのため、局所的な調整として使い、基本はCSSクラスにまとめる考え方が実用的です。

CSSクラスでまとめて管理する方法

実務で最も使いやすいのは、あらかじめCSSクラスを用意しておき、HTML側でclass属性を付ける方法です。
たとえば大きめ本文用、小さめ注釈用、強調テキスト用などを分けておけば、デザインの一貫性を保ちやすくなります。

この方法なら、後からサイズを見直すときもCSSを直すだけで済みます。
また、同じ記事内でもデザインルールを統一しやすいため、閲覧者にとっても読みやすいページになります。
特にWordPressのようにページ数が増えやすい環境では、個別指定よりもクラス管理の方が圧倒的に効率的です。

px rem emの違いと選び方

font-sizeで使う単位は、px、rem、emが代表的です。
pxは固定値として分かりやすく、初心者にも扱いやすい単位です。remはルート要素を基準にするため、サイト全体の拡大縮小と相性が良く、現在の設計でよく使われます。

emは親要素のサイズに応じて変化するため、部品単位では便利ですが、入れ子が深いと計算が複雑になりやすい点に注意が必要です。
迷った場合は、本文や見出しの基本サイズはrem、細かな一部調整はpxという使い分けが分かりやすいです。
アクセシビリティを考えても、相対単位を理解しておく価値は大きいです。

古いHTMLタグと非推奨の書き方に注意

HTML タグ フォントサイズで検索すると、今でもfontタグやsize属性を使う説明を見かけることがあります。
しかし、現在の標準的なHTMLでは、それらは推奨されていません。理由は、構造と見た目が混ざってしまい、保守性が大きく下がるためです。

古い記述でも一部の環境では表示される場合がありますが、最新情報に基づいて制作するなら避けるのが無難です。
特に学習初期の段階で古い書き方を覚えてしまうと、後からCSS中心の設計に移行しづらくなります。
これから新しく書くコードは、できるだけ現行の標準に合わせることが大切です。

fontタグが使われなくなった理由

fontタグは、かつて文字サイズや色をHTML上で直接変えるために使われていました。
しかし現在は、見た目の制御をHTMLに持ち込む設計自体が非効率と考えられています。文書構造とデザインを分けた方が、更新も共有も容易になるからです。

また、fontタグを多用すると、同じページの中で装飾ルールが散らばり、修正時の負担が増えます。
検索エンジン対策の観点でも、意味のある見出しや段落タグを適切に使う方がページ構造を理解されやすくなります。
そのため、現在はfontタグではなくCSSのfont-sizeを使うのが基本です。

size属性よりCSSが推奨される理由

size属性のような古い指定方法は、細かなデザイン制御に向いていません。
一方でCSSなら、要素ごと、画面幅ごと、クラスごとに柔軟な調整ができます。文字サイズだけでなく、行間や太さ、余白まで一貫して設計できる点が大きな利点です。

たとえばスマホでは少し大きめ、PCではバランス重視といった調整もCSSなら自然に行えます。
今後レイアウト変更やテーマ変更をする可能性があるなら、なおさらCSSベースで組んでおく方が安全です。
短期的な手軽さより、長期的な管理のしやすさを優先するのが現代的な考え方です。

読みやすいフォントサイズ設計のコツ

文字サイズは、大きければよい、小さければ上品という単純な話ではありません。
重要なのは、対象読者がスマホで読んでも負担が少なく、見出しと本文の階層が自然に伝わることです。フォントサイズは、行間や余白とセットで考える必要があります。

一般的には本文は16px前後を基準にし、見出しは段階的に差をつける設計が分かりやすいです。
さらに、長文ページでは本文サイズだけでなく、1行の長さや段落間隔も可読性に大きく関わります。
単にサイズを変えるだけでなく、読みやすさ全体を設計する視点が重要です。

本文と見出しのおすすめサイズ感

本文は多くの環境で16px前後が読みやすい基準とされやすく、やや大きめにするなら17pxから18pxも選択肢になります。
一方で見出しは、h2、h3、h4と段階的に差をつけることで、ページ構造がひと目で伝わります。

たとえば本文16pxに対して、h2を26px前後、h3を22px前後にすると、過度に大げさにならず自然です。
もちろん使用するフォントやデバイス幅で見え方は変わるため、実際には画面で確認しながら微調整することが大切です。
数字だけを固定せず、読み心地を基準に決めるのが失敗しにくい方法です。

スマホ表示で失敗しない考え方

スマホ閲覧が中心のページでは、PCだけで見たサイズ感を基準にすると失敗しやすいです。
特に本文が小さすぎると、読者はすぐに離脱しやすくなります。逆に見出しが大きすぎても、画面を圧迫して読みづらくなります。

そのため、モバイルファーストで設計し、まずスマホで読みやすい本文サイズと行間を決めるのが有効です。
見出しも改行の入り方まで確認し、不自然に詰まって見えないかを見ます。
文字サイズだけでなく、行間は1.6以上を目安にすると、長文でも読み疲れしにくくなります。

まとめ

HTML タグ フォントサイズを理解するうえで最も大切なのは、HTMLで構造を示し、文字サイズはCSSで指定するという基本原則です。
fontタグや古いsize指定に頼るのではなく、p、h1、h2、spanなどの適切なタグに対してfont-sizeを設定することで、見やすく管理しやすいページを作れます。

また、単位はpxだけでなくremやemの特徴も把握し、スマホでの可読性まで考えて設計することが重要です。
本文は無理に小さくせず、見出しとの階層差、行間、余白を含めて全体の読みやすさを整えましょう。
基本を押さえておけば、WordPressの記事作成でも実務のコーディングでも、フォントサイズ指定で迷いにくくなります。