フォントの種類
font-family
ユーザーの環境によって表示するフォントの種類が異なるので、複数のフォントを指定するのが一般的です。また、特別に見せ方への拘り、デザイン的な事由などの事情を除き、ゴシック体で表示させるのが一般的です。2025年現在、MacやiPhoneのデフォルトであるブラウザsafariは、指定がなければ「明朝体」で表示されますので、そのことを視野に入れ、フォントの種類を指定します。デザインの面で、「明朝体」に拘りがある場合は、「serif」を指定します。以下の記述は、ホームページ全体<body>のフォントの種類を「ゴシック体」にする指定になります。
body{font-family: Arial, Helvetica, sans-serif;}第1候補 → Arial・第2候補 → Helvetica・最終的に → sans-serif（汎用ゴシック体）という指定になります。環境に Arial があればそれが使われ、なければ Helvetica、どちらもなければ OS 標準のゴシック体になります。
ゴシック体と明朝体の違い
ブラウザのデフォルトスタイル：Safari や他のブラウザは、CSS が指定されていない場合、ユーザーのシステム設定やブラウザのデフォルトスタイルに従ってフォントを選択します。日本語のテキストが含まれている場合、明朝体が選ばれることが一般的です。
フォントのサイズ
font-size
font-sizeプロパティは、フォントサイズを定義することができます。値の部分には、キーワードや数値を指定します。ブラウザには基準となる文字サイズがあり、通常は 16px がその標準サイズとされています。
指定する値
キーワードで指定する
キーワード値には、xx-small, small, medium, large, x-large, xx-large, xxx-large、などがあります。目安としては、標準フォントサイズが16pxに設定されている場合、見出しタグh1の大きさはxx-largeに相当し、パーセンテージで表すと200%(通常16pxの2倍)、32pxに相当します。
数値で指定する
数値＋単位の指定も利用できます。単位には、pxやremなど多くの種類があります。以下の記述は、h1の文字サイズを16pxにするという指定になります。
h1{font-size:16px;}大きさの目安
mediumが、通常サイズ(16px)基準となります。普段よく使うmmやcmセンチメートルなどの絶対指定による単位は、CSSでは使いません。また、近年のウェブは、多様なデバイス環境で見ることが増えているので、パーセンテージ(%)やレム(rem)などの単位で、指定することが増えている傾向にあります。フォントサイズは、行間(line-height)との関連性が高く、ユーザーが読みやすいサイズと行間を調整します。
フォントサイズの単位
| px (ピクセル) | モニターの画素（ピクセル）を1とする単位 実際に表示されるサイズは、モニターの解像度（72dpiや96dpiなど）により変化します。標準サイズは16pxです。 |
|---|---|
| em (エム) | 文字の高さを基準とした相対単位。 |
| ex (エックスハイト) | 標準フォントの小文字「x」の高さを1とする単位。 |
| rem(レム) | ルート要素（html要素）のフォントサイズを1とする単位。 |
| % (パーセント) | 親要素のサイズを基準とした相対単位。 |
行間の指定
line-height
行間の調整を行うことができます。リセットCSSなどを用いた場合や、フォントサイズの変更により、行間が狭くなり、ユーザーにとって読み辛い印象になってしまいます。line-heightをうまく使って行間を調整しましょう。以下の記述は、段落<p>の行間を150%にするという指定になります。
p{line-height:150%;}| 数値のみ | 数値のみで指定すると。その数値にfont-sizeをかけた数値が行の高さになります。1.3を指定すると130%や1.3emと同じ数値になります。 |
|---|---|
| 単位付きの数値 | 数値にpxやem、exなどの単位を付けて指定します。emは、フォントの高さを1とする単位として使われます。 |
| パーセンテージ(%)で指定 | 数値にパーセンテージを付けて指定します。font-sizeに対したパーセンテージになります。 |
行間の計算
CSS では line-height = 行全体の高さとなるので、標準16pxの行間150%は、24pxという認識になります。
目安としては、lline-height:150%で、 読みやすい標準的な行間であるとされていますが、あまり開けすぎると逆に読みづらくなりますので、慎重に指定してください。また、行間を調整することで、ブロック全体の高さが変わりますので留意しておきましょう。
フォントの太さ
font-weight
文字を太字にすることができます。強調したいときや見出しに指定します。以下の記述は、段落<p>を太字にする指定になります。
p{font-weight:bold;}太さの基準
| normal | 標準の太さ | 通常の文字の太さ |
|---|---|---|
| bold | 太字 | 一般的な太字表示 |
| lighter | 一段階細く | 親要素のフォントの太さに対して相対的に細く表示 |
| bolder | 一段階太く | 親要素のフォントの太さに対して相対的に太く表示 |
| 100～900 (100刻み) | 数値による指定 | 100が最も細く、900が最も太い ブラウザによっては指定できない場合あり |
斜体にする
font-style
文字を斜体（イタリック）にする指定です。日本語フォント（ゴシック体や明朝体など）には、あまり使われないケースが多いようです。
h1{font-style:italic;}| normal | 標準 |
|---|---|
| italic | 斜体・イタリック体 |
| oblique | 傾けただけの斜体。italic と似ているが厳密には別 |