こんにちは！侍エンジニアブログ編集部のシホです！
HTMLで文字のサイズを変えるとき、
と悩んでいませんか？今回はHTMLで<font>タグを使って文字のサイズを変える2つの方法を解説します。また、文字の装飾で推奨されているCSSでの文字の大きさの変え方も説明するので、ぜひ参考にしてみてください。
なお、現在fontタグは非推奨とされています。特に理由がなければ別のタグを使用することをおすすめします。
HTMLで文字の大きさを変える
font sizeの使い方
HTMLでは、文字のサイズ・色・種類を変える時に<font>タグを使います。サイズを変える場合は、<font>タグにsize属性で大きさを指定して使用します。
<font size="大きさ"> ~ </font>
サイズの指定方法
サイズ指定方法ですが、size=”” に文字のサイズを 1（最小）～7（最大）までの数値で指定します。また、このほかに基準の文字サイズに対して -1、+1 という感じで相対的に指定することもできます。
基準の文字サイズは3になるので、-1 を指定すると文字サイズは2に、+1を指定すると文字サイズは4になります。相対的に指定する場合でも、サイズの結果が1～7の範囲に収まるようにしましょう！
See the Pen odpovb by Shiho Sakai (@shiho-sakai) on CodePen.
注意点
HTMLでこのように<font>タグを使って文字のサイズを変えることができますが、HTMLは基本的に構造や内容を表すために使うため、文字の装飾などはCSSで記述することが推奨されています。
CSSで文字の大きさを変える
CSSで文字のサイズを変えたいときは、「font-size」プロパティに「サイズ（pxかem）」を指定します。pxの場合は縦のピクセルで大きさを指定するので、ウェブページのメインの文章は15px〜20pxくらいがおすすめです。
emは現在のフォントサイズに対する倍率で指定します。例えば、現在の文字のサイズの設定が10pxのときに2.0emとするとフォントサイズは20pxになります。
See the Pen QraOmo by Shiho Sakai (@shiho-sakai) on CodePen.
まとめ
いかがでしたでしょうか。HTMLで<font>タグを使うと簡単に文字のサイズを変えることができますが、文字の装飾なのでできるだけCSSを使いましょう。ぜひ実践してみてくださいね！
