CSSの基本がわかってくると色々な調整を加えたくなり、見た目的にちょっと派手な調整をしたくなると思います。
僕もCSSを覚えたての頃は、：hover を使ってマウスホバー時にちょっとしたアニメーションをつけたりするのが好きでした（笑）
一方で、フォントサイズの微妙な調整や、行間隔の調整など「文章を読みやすくする工夫」は地味で見た目も大きく変化するわけではないので、いい加減になってしまっていました。

ですが、実際のウェブ制作の仕事では当然ながら派手なCSSアニメーションよりも、文字の見やすさやバランスが重視されます。
初めてWeb制作のお仕事を頂いた時、フォントのサイズやバランスに細かくご指示を頂いたのですが、当初は正直「ここまで細かくこだわらなくても良くない？」と思いました。（笑）
しかし、指示通りに作ってみると文字のバランスが整っているだけで全体的にもスッキリまとまり、フォント調整という地味だけど基礎的な調整の大切さを学びました。

フォントの調整は、CSSの中ではとても簡単な部類です。ゆえに独自のアレンジを取り入れづらく、「誰がやっても同じ調整になる」というとても地味な作業になります。
ですが、Web制作を行う時にこの地味な作業を避けてしまうと、良いWebサイトは出来上がりません。
誰にも文句を言われない自分のWebサイトなら好き勝手に作っても良いのですが、将来的に誰か他の人のWebサイト制作をやってみたいという方は、こういった地味なCSS調整こそ大事にして頂きたいと思います。
それでは、フォントの調整CSSについて説明していきます！

◆ font-size（フォントサイズ）とは ◆

font-size（フォントサイズ）プロパティは名前の通り、フォントの大きさを調整するプロパティです。

セレクタ { font-size: 16px; }
といった形で単位をつけて記述します。

また、Web制作で使う単位の記事でも話しましたが、px指定だと絶対単位なので、Webブラウザでフォントサイズ調節機能を使ってもフォントの大きさが変わらなくなってしまいます。
ユーザービリティに配慮するのであれば、font-sizeプロパティの値の単位はpxではなく、emやremといった相対単位を使用すると良いでしょう。

font-sizeで相対単位を使用するにあたり、基準となる数値はキリが良い数値にしておくと計算が楽です。
例えばremの基準となるルート要素（html要素）の数値は、デフォルトだと16pxなのですが、これをそのまま使うと1.5remで何pxになるかパッと計算しづらいですよね。
なので、
html { font-size: 10px; }
とした上で、remを使用した方が使い勝手は良くなると思います。

それでは、サンプルコードを見ていきましょう。※分かりやすいように単位はpxを使っています。

HTML
<p>この文章のフォントサイズを20pxに設定</p>

CSS
     p {
        font-size: 20px;
        background-color: lightyellow;
        width: fit-content;
      }

毎度のことながらbockground-colorとwidthは、分かりやすくするための記述なので気にしないで下さい。
上記のコードを実行するとこのようになります。

この文章のフォントサイズを20pxに設定

このブログ記事の通常の文字の大きさが16pxなので、ブラウザのフォントサイズ調節機能を変更していなければ、この文章よりもちょっと大きめに表示されているかと思います。

見出しや強調したい部分ではフォントサイズを大きめに設定し、注釈や著作権表示などコンテンツの補足となる部分は小さめに設定するとメリハリが出て見やすいページに仕上がります。

POINT!
1. ・font-sizeは文字の大きさを調整する！
2. ・絶対単位のpxを使うと、ブラウザのフォントサイズ調節機能を使っても文字の大きさを変えられなくなる場合があるので注意！

◆ font-weight（フォントウェイト）とは ◆

font-weightプロパティは、文字の太さを調整するプロパティです。
先述のfont-sizeプロパティと異なる点は、「単位で細かく指定はできない」という点です。

一応、数値でも指定はできるのですが、そもそもフォント自体に「太字・普通・細字」しか用意されていない場合が多く、「あとちょっとだけ太く（細く）したい」という微調整は不可能であることが多いです。
なので、font-weightプロパティの値としては、bold（太字にする）、lighter（細字にする）さえ押さえておけばとりあえずはOKです。（普通サイズはデフォルトなので）

それでは、サンプルコードの紹介です。

HTML
<p>この文章を太字に設定</p>

CSS
     p {
        font-weight: bold;
        background-color: lightyellow;
        width: fit-content;
      }

上のコードを実際に表示させると、下のようになります。

この文章を太字に設定

他の文章とのバランスでフォントサイズを変えたくないけど、文字を強調したい場合などにこうやって太字にすることはよくあります。
ただ、太字にするとやや文字と文字の間が窮屈に見えてしまう場合があるので、その時はletter-spacingプロパティで文字と文字の間隔を少し広げると良いでしょう。
太字部分が２行になることはあまりないかと思いますが、２行以上になる場合は後述のline-heightプロパティで行間隔を空けることも大切です。

POINT!
1. ・font-weightは文字の太さを設定する！
2. ・太字にすると目立たせられるが、読みづらくなる場合もあるので気をつけよう！

◆ line-height（ラインヘイト）とは ◆

line-heightプロパティは、 行間隔 を調整するプロパティです。
font-sizeプロパティや前回記事の 余白の設定 など、ほとんどのプロパティの値には単位が必要ですが、このline-heightプロパティはむしろ単位をつけないことが推奨されています。

先ほどのfont-weightは値に数値を設定できるのに単位をつけられない珍しいプロパティですが、line-heightプロパティは値に単位をつけることもつけないこともできる、これまた珍しいプロパティです。
そして、なぜ単位をつけないことが推奨されているかと言うと、（特に）相対単位を使うと予期しない親要素の値を継承してしまい、思ったような設定にならない場合があるからです。
仮に設定時はうまくいったとしても、あとでCSSをカスタマイズするとなった時に、親要素の基準値を変えたことでline-heightの値にも影響を及ぼしてしまうということも考えられます。
line-heightに関しては単位をつけるメリットは全くないと言えるので、最初から単位なしで設定することに慣れておくのが良いと思います。

またline-heightの値ですが、だいたい1.5～1.7あたりに設定すると読みやすくなります。
それではサンプルコードで確認してみましょう。

HTML
<p>この文章はline-heightを1に設定します。<br>2行にしないと分からないので改行をいれます。</p>

CSS
     p {
        line-height: 1;
        background-color: lightyellow;
        width: fit-content;
      }

上記のコードを表示させると次のようになります。

この文章はline-heightを1に設定します。
2行にしないと分からないので改行をいれます。

いかがですか？line-heightの値が1だと、行間隔が窮屈でちょっと読みづらい感じがしますね。
それでは、今度はline-heightを1.6に設定してみます。（line-heightの値を変えるだけなので、コードは省略します）

この文章はline-heightを1.6に設定します。
2行にしないと分からないので改行をいれます。

行間隔が空いて、読みやすくなったのが分かるかと思います。
line-heightを設定しなくても読めないことはないですし、中にはそこまで気にしない方もいるでしょう。ですが、少しでも多くの人が読みやすくするためには、こういった細かで地味な設定が欠かせません。
CSSによる調整も簡単で単純なぶん、あえて悪いように言うと「やりがいを感じない調整」とも言えちゃうわけですが、Webサイトの土台となるとても大切な設定なので、手を抜かないようにしていきましょう！
…と、自分に言い聞かせています（笑）

POINT!
1. ・line-heightは行間隔の調整を行う！
2. ・値には単位をつけない方が良い！