6. 文字に関するCSSプロパティ
font-family・font-size・font-weight

目次

【font-family】フォントの種類を指定

font-familyはフォントの種類を指定するプロパティで、下のように記述します。

フォントの種類は数多くありますが、OSによって表示できないものもあるため、フォント名は複数指定するのが一般的です。フォントの種類や、各フォントがどのOSに対応しているかを調べるには、Font-familyメーカーが参考になるかと思います。

フォントを複数指定するときは、フォント名同士ををカンマ(,)で区切ります。また、フォント名にスペースが含まれる場合は、シングルクォーテーション(’)かダブルクオーテーション(”)で囲います。

フォントを複数指定したときは前にあるものから優先されるため、優先度の高い順に前から並べていきましょう。

どのフォントも表示されなかったときのために、フォント名の一番最後には、どのOSでも確実に表示される総称フォントを入れておきます。総称フォントは5種類あり、そのうちの1つを選びます。

総称フォント名 サンプル 系統
sans-serif あいうえお亜ABCDE12345 ゴシック体
serif あいうえお亜ABCDE12345 明朝体
cursive あいうえお亜ABCDE12345 筆記体
fantasy あいうえお亜ABCDE12345 装飾体
monospace あいうえお亜ABCDE12345 等幅

総称フォントは、ほとんどのサイトでゴシック体のsans-serifが指定されています。

また、ページ全体にfont-familyを指定したいときは、bodyに指定すればOKです。


【font-size】フォントの大きさを指定

font-sizeはフォント(文字)の大きさを指定するプロパティです。
大きさの単位にはpx・%・em・remがあります。

pxは最も分かりやすい単位で、18pxと指定すれば、文字通りフォントの大きさは18pxになります。

は親要素に対してどれくらいの割合の大きさかを表します。
下の画像では、div(後で説明しますが、一定のまとまりを作って、スタイルを指定するためのタグです)のフォントサイズは24px(body)の50%で12px、pのフォントサイズは12px(div)の50%で6pxになります。
また、一番上の階層にある要素(<html>など)に100%を指定すると、16pxになります。

emは%と考え方が同じで、親要素に対して何倍の大きさかを表します。つまり、1.6emは160%と等しくなります。

remはemとは少し違い、一番上の階層の親要素に対して何倍の大きさかを表します。上の画像でいうと、pのfont-sizeを0.5remにすると、divではなく一番上のbodyが基準になるため、24pxの0.5倍で12pxになります。

remを使う場合は、下の画像の指定をすると基準が10px(62.5%)になるため、何倍かの計算がしやすくなります。例えば、18pxのサイズにしたければ、1.8remとすぐに出てきますよね!


【font-weight】フォントの太さを指定

font-weightではフォントの太さを指定します。

値のnormalは通常の太さに、boldはnormalよりも太くなります。

h1などの見出しタグはデフォルトで太字になっていますが、font-weight: normal;を指定することで、通常の太さに戻すことができます。
逆に、普通のpタグでも太字にして強調したい場合は、値をboldにすればOKでしょう。

値は他にも100、200などの数値で指定することもできますが、そこまで細かく太さが設定されているフォントは少ないため、とりあえずはnormal、boldの2つを覚えておけば問題ないでしょう。