HTMLで文字のフォントサイズを指定する方法【サンプルコード付き】

HTMLで文字のサイズを変える方法には、主に<font>タグのsize属性を使う手段と、CSSのfont-sizeプロパティを利用する手段があります。

本記事ではそれぞれの特徴とサンプルコードを紹介し、pxやem、remなどの代表的な単位についても解説します。

HTMLの基本フォントサイズや注意点にも触れるので、ぜひコーディングの際の参考にしてください。

HTMLで文字のフォントサイズを変える方法

この章では、HTMLでフォントサイズを変更する方法、および属性や使い方について解説していきます。

<font>タグとsize属性の使い方

<font>タグはHTML4までの仕様で文字色やサイズを指定するために用いられています。

<font>タグとsize属性は以下のコードのように記述します。size属性で1～7の数値を設定すると手軽に文字サイズを変えることが可能です。

<font size="5">大きめ</font>
<font size="2">小さめ</font>

結果：

フォントサイズの指定方法

フォントサイズは1から7までの整数値を使って指定できます。

デフォルト値は3で、数値が大きいほど文字が大きく、小さいほど小さく表示されます。

例えば以下のように同じ文章を異なるサイズで指定すると、仕上がりが変わります。

<font size="1">こちらはテストです</font>
<font size="2">こちらはテストです</font>
<font size="3">こちらはテストです</font>
<font size="4">こちらはテストです</font>
<font size="5">こちらはテストです</font>

結果：

HTMLの基本フォントサイズはいくつ？

一般的なブラウザでは、特にスタイル指定をしていない場合、標準的な文字サイズは16pxに設定されます。

また、見出しタグのH1やH2には初期設定でより大きなサイズが割り当てられ、H1は約32px前後、H2は約24px前後が目安といえます。

フォントサイズはデザインや可読性に応じて変更させることが多いですが、こうした初期値を把握しておくとレイアウト調整の際に役立ちます。

注意点：フォントサイズはCSSが推奨されている

<font>タグによるフォントサイズの変更はHTML4で導入された方法ですが、HTML5では推奨されていません。

なぜなら、CSS（見た目）とHTML（構造定義）は別で管理するほうが、後にデザインを調整したりサイズを変更したりする際に便利だからです。

また、コードの可読性やSEOの観点から、CSSを用いることは近年のWeb制作における一般的な考え方となっています。

古いブラウザ対応以外のケースでは、なるべくCSSのfont-sizeプロパティで指定しましょう。

次章では、CSSでフォントサイズを変える方法について解説していきます。

＞＞DMM WEBCAMP フロントエンドコースの詳細はこちら

CSSで文字のフォントサイズを変える方法

この章では、CSSでのフォントサイズ変更方法について解説します。

font-sizeプロパティの使い方

CSSで文字サイズを変えたい場合、まずもっともよく使われるのがfont-sizeプロパティです。

特定の要素に対して「セレクタ { font-size: 値; }」の形式で指定すると、その範囲の文字が設定したサイズで表示されます。

たとえばp要素に適用する場合は以下のように書きます。

p {
  font-size: 16px;
}

このように数値と単位をセットで指定すれば、テキストの大きさを直感的にコントロールできます。

フォントサイズの指定方法

CSSのfont-sizeには「px」のような絶対的な単位と、「em」や「rem」のような相対的な単位があります。

たとえばpxは画面上で正確にサイズを指定できるため、デザイン通りのレイアウトが得やすい利点があります。

しかし、ユーザーの拡大機能を生かしづらい場合もあるので注意が必要です。

一方、emやremは親要素やルート要素を基準とするため、レスポンシブデザインで柔軟に対応できます。

以下の例では、それぞれ異なる単位で同じ見出しを指定しています。

.title-px { font-size: 24px; }
.title-em { font-size: 1.5em; }
.title-percent { font-size: 150%; }

結果：

このように、{}の中の数字の後に、その単位の文字を入れればOKです。

フォントサイズについては以下の記事も参考になるので、ぜひご一読ください。

【初心者向け】CSSで文字の色を変えるには？colorプロパティの使い方を解説

CSSで指定できるサイズの単位

CSSで指定できるサイズの単位には、さまざまなものがあります。

ここでは、よく使われる5つの単位を紹介します。

①px

pxは画面上のピクセルを基準に文字サイズを指定する、いわゆる絶対単位です。

たとえば「font-size: 16px;」と書くと、通常は常に16ピクセルとして表示されるので、デザインカンプ通りの仕上がりを再現しやすい利点があります。

一方でユーザー側の拡大縮小設定に対応しづらい場合もあります。

制作するサイトが多様な端末で閲覧される可能性がある場合は、相対単位と組み合わせるか、メディアクエリで条件分岐させるなどの工夫が必要です。

②em

emは親要素のfont-sizeを基準に相対的な値を計算する単位です。

たとえば、親要素が16pxに設定されているときに「font-size: 1.5em;」と書くと、24px相当の大きさになります。

emを使った場合、親要素のサイズが変わると自動的に子要素の文字サイズも連動するため、レスポンシブな調整に適しています。

ただし、ネストが深くなると計算基準が階層的に変化し、複雑になりやすい点には注意が必要です。

③rem

remはルート要素（通常はhtml要素）に指定されたfont-sizeを基準として相対値を計算する単位です。

たとえばブラウザのデフォルトサイズが16pxなら、1remは16pxと同等となります。

親要素の影響を受ける前述のemとは異なり、どの階層でも一定の基準に基づいてサイズが決定されるのが特徴です。「font-size: 2rem;」を指定すれば、どの要素でも32px相当になります。

複数の要素で文字サイズを統一したい場合や、全体のスケールを一括管理したいときに便利です。

④%

%は親要素のfont-sizeに対して文字サイズをパーセンテージで指定する単位です。

前述のemと同様に相対単位ではありますが、「font-size: 150%;」のように直観的に数字を上げ下げしやすいのが特徴です。

たとえば親要素が16pxなら150%は24pxとなり、段階的にサイズを変える際にも分かりやすいでしょう。

⑤vw

vwはビューポートの幅（ブラウザの表示領域）を基準にした相対単位で、1vwは画面幅の1%に当たります。

画面が広い場合は文字が大きく、狭い場合は小さくなるので、デバイスごとに最適化しやすいメリットがあります。

レスポンシブデザインを実装する際に便利ですが、極端に小さい画面や大きい画面だと、文字が読みにくくなることもあるため注意が必要です。

フォントの種類など文字のスタイルを変更するには？

HTMLではフォントサイズだけでなく、文字のスタイルを変更することも可能です。

文字のスタイルを変更するにはフォントの種類や色、太さ、行間などを細かく指定する必要があります。

たとえば、フォントの種類はCSSのfont-familyプロパティで前述のコードのフォントと色を変えてみます。

【HTML】

<link rel="stylesheet" href="test.css">
<p class="title-px" font size="1">こちらはテストです</p>
<p class="title-em"font size="2">こちらはテストです</p>
<p class="title-percent"font size="3">こちらはテストです</p>

【CSS】

.title-px { font-size: 24px; }
.title-em { font-size: 1.5em; }
.title-percent { 
    font-size: 150%;
    font-family: serif;
    color: red;
 }

結果：

さらに、font-weightで太字の度合いを指定したり、font-styleでイタリック体を設定したりすることもできます。

なお、CSSでフォントの種類を知りたい方、またサイズや色の変更方法を知りたい方は、以下の記事が参考になるので、ぜひご一読ください。

【初心者向け】CSSで文字の色を変えるには？colorプロパティの使い方を解説

【初心者向け】CSSで文字の色を変えるには？colorプロパティの使い方を解説

プログラミングを学習するならDMM WEBCAMP

ここまで紹介したHTMLやCSS、またそれに関連するJavaScriptなどのプログラミングを学びたい方は、ぜひDMM WEBCAMPをご検討ください！

フロントエンドコースではHTMLタグの基礎、CSSの基礎を学習しオリジナルの飲食店サイトを作成できます。

また、リアルタイムチャットアプリケーションをはじめとする実践的なWebサービス開発を短期間で学ぶことが可能となっています。

補助金を活用すればコース料金の最大70％が支給されるため、金銭的な不安を抱える方でも安心です。さらに週2回のメンタリングやいつでも質問できるサポートが整っており、初心者でも安心して取り組めるでしょう。

HTMLのスキルアップを目指すなら、ぜひDMM WEBCAMPで最新のフロントエンド技術を身につけましょう！

＞＞DMM WEBCAMP フロントエンドコースの詳細はこちら

まとめ

ここまで<font>タグとsize属性、CSSのfont-sizeプロパティや代表的な単位など、HTMLで文字のフォントサイズを指定する方法についてご紹介しました。

フォントサイズの変更方法はもちろん、サイズの単位を覚えて使いこなせるようになると、媒体や使用デバイスに合わせて最適なサイズが指定できるようになり、ユーザビリティが大きく向上します。

ぜひ今回の知識を活かし、より魅力的なサイトづくりに挑戦してみてください。
さらに深く学びたい方は、ぜひDMM WEBCAMPのフロントエンドコースで、本格的なフロントエンド技術を身につけながら、スキルアップを目指しましょう。