JP

CSS・はじめの一歩

フォントを選ぼう

同じ文字でも、フォントが変わると印象はがらりと変わる。font-familyでフォントを指定し、ページ全体の質感を仕上げよう。

色をつけただけでも”自分のページ”らしくなってきましたが、文字そのものの書体もまた印象を大きく左右します。角ばった書体はきりっと、丸い書体はやさしく。この書体をあやつるのが font-family です。

書いてみよう

body {
  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
}

カンマで区切って、フォント名を何個も並べています。これは「まず1つ目を探して、なければ2つ目、それもなければ3つ目……」という候補リスト。パソコンやスマホによって入っているフォントはバラバラなので、こうして候補を並べておくことで、どの機器で見ても近い見た目に仕上がります。

書くもの役割
"Hiragino Sans"Macに入っている日本語フォント（第1候補）
"Helvetica Neue"見つからないときの次点（欧文フォント）
Arialそれも無ければこれ
sans-serif最後の砦。「とにかく明朝体じゃない書体」という総称

名前にスペースがあるフォントは引用符でくくる

"Hiragino Sans" のように、フォント名の途中にスペースがあるものは " " でくくります。sans-serif のように総称の名前（引用符なしで書く決まりの単語）には、引用符をつけません。

候補をいくつも並べる理由は、OSによって入っているフォントが違うからです。たとえば"Hiragino Sans"はMacだけに入っている書体。Windowsのパソコンでは見つからず、次の候補（"Helvetica Neue"→それも無ければArial）へと進みます。日本語をWindowsでもきれいに見せたいなら、"Yu Gothic"（游ゴシック・Windows標準の日本語書体）のような候補もリストに加えておくと安心です。

最後は必ず総称ファミリーで締める

候補リストのいちばん最後には、sans-serif（ゴシック体）や serif（明朝体）といった、引用符なしの総称ファミリーを置くのが定番です。もし指定した候補が1つも見つからなくても、この総称だけは必ずブラウザが持っているので、最低限の書体は保証されます。

書体で、こんなに印象が変わる

同じ文字でも、font-familyを変えるだけで受ける印象はがらりと変わります。代表的な3つを並べてみました。

上からゴシック体（sans-serif）・明朝体（serif）・等幅（monospace）。同じ内容でも、書体で「かっちり」「やわらか」「機械的」と表情が変わります。

行の高さも、いっしょに整える

フォントを決めるタイミングで、もう1つ。文章が2行以上になったときの行と行のすき間は line-height であやつります。

body {
  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
}
上がline-height: 1.0、下がline-height: 1.7。同じ文章でも、行と行のすき間を広げるだけでぐっと読みやすくなります。

1.7 は「文字の大きさの1.7倍ぶん」というイメージの数字（単位なし）。行間が詰まっていると読みにくく、広すぎても間延びします。1.5〜1.8くらいが、読みやすい行間の目安です。

どの機器でも同じ書体にしたいときは

ここまでのフォント指定は、見る人のパソコンやスマホに入っている書体を使う方法でした。じつはそれとは別に、Webサイト側からフォントデータそのものを配ることもできます。これが「Webフォント」で、代表格が無料で使えるGoogle Fontsです。候補リストのどれもが見つからず総称ファミリーで表示されてしまう、というときの解決策にもなります。

べんりワザGoogle Fontsで文字の顔を変えるGoogle Fontsの使い方は、こちらのべんりワザで

このレッスンのまとめ

  1. 書体は font-family。カンマ区切りで候補をいくつも並べる
  2. スペースを含む名前は " " でくくる
  3. 最後は必ず sans-serif などの総称ファミリーで締める
  4. 行間は line-height（1.5〜1.8くらいが目安）

やってみよう：本物のフォントと配色に決める

ここで一度、しまちゃんのページの本物のフォントと配色に決めてしまいましょう。body のルールを、まるごとこう書きかえます。

body {
  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  color: #2c2622;
  background-color: #faf6ee;
  line-height: 1.7;
}

color と background-color の値が、色名から #2c2622（濃い茶色）・#faf6ee（やわらかいクリーム色）というコードに変わっているのに気づきましたか？ 名前にない、微妙な色あいを選びたいときはコードの出番です。

ブラウザ表示。ゴシック体の文字で、濃い茶色の文字とやわらかいクリーム色の背景になっている
明朝体だったページが、すっきりしたゴシック体に。配色も、しまちゃんのページの”本物”に決まりました。

これで、ページ全体の土台となる書体と配色が定まりました。

よくある質問

指定したフォントに変わらないときは？
フォント名のつづりと引用符（スペースを含む名前は""でくくる）を確認しましょう。そのフォントが見る側の機器に入っていない場合も表示されません。どの機器でも同じ書体にしたいときは、Google FontsのようなWebフォントを使います。
英数字だけ変わって、日本語がそのままなのはなぜ？
指定したフォントが欧文専用で、日本語の文字を持っていないためです。日本語も変えたいときは、日本語対応フォントを候補リストに入れましょう。
最後のsans-serifは何のため？
並べた候補がすべて見つからなかったときの最後の砦です。「とにかくゴシック系の書体で」という総称なので、必ずリストの末尾に置きます。
日本語のWebフォントもある？
あります。ただし日本語は文字数が非常に多いため、データ量が大きくなりがちです。読み込みが遅くならないよう、使う文字だけに絞り込む機能（サブセット化）が使えるサービスを選ぶと安心です。