font-familyでフォントを選び、大きさ・太さ・行間を調整して、読みやすいテキストに仕上げましょう。
このレッスンを Kodokon で開くフォント とは文字のデザインのことです。Arial、Georgia、Times New Roman はフォントです。CSSでは、font-family プロパティがテキストのフォントを選びます。カンマで区切ったフォントのリストを与えます。ブラウザはまず1つ目を試し、それが訪問者の端末にインストールされていなければ次のものに移り、というように続きます。プランA、プランB、プランCというわけです。
body {
font-family: Georgia, "Times New Roman", serif;
}リストの最後の語は総称ファミリーです。serif はセリフ（印刷された新聞のように、文字の端にある小さな足のような飾り）のあるフォント、sans-serif はセリフのないフォント（Arialのように、より現代的な見た目）、monospace はどの文字も同じ幅になる等幅フォント（コードに最適）を意味します。"Times New Roman" を囲む引用符に注目してください。フォント名にスペースが含まれるときは、必ず必要になります。
テキストの大きさは font-size で設定します。ピクセルはもう知っていますね（16px はブラウザの既定の大きさです）。rem という単位もあります。1rem はページの基準サイズに等しく、1.5rem はその1.5倍の大きさです。太さ、つまり文字の線の太さは font-weight で設定します。通常のテキストなら normal、太字なら bold、または100（とても細い）から900（とても太い）までの数字で、400が normal に、700が bold に相当します。
h1 {
font-size: 2rem;
font-weight: 700;
}
p {
font-size: 16px;
font-weight: normal;
}最後の設定は、見落とされがちですが快適な読書には欠かせません。line-height、つまり行の高さです。段落の行と行の間の縦のスペースを制御します。狭すぎると行が窮屈に感じられ、広すぎると目が迷子になります。ベストプラクティスは単位なしの値で、テキストの大きさに掛け算されます。line-height: 1.5; は各行をフォントサイズの1.5倍の高さにします。
p {
font-size: 16px;
line-height: 1.5;
}font-family にカンマで区切って複数のフォントを与えるのはなぜですか？bold）に相当する font-weight の値はどれですか？font-size: 20px と line-height: 1.5 のとき、各行の高さはいくつですか？