目次
- はじめに：フォントが変わるだけでサイトは別物になる
- CSSフォントとは何か（まずここを整理）
- フォントの種類を指定する（font-family）
- 基本形
- なぜ複数指定するのか
- 日本語サイトのおすすめ例
- よくある失敗：フォントが反映されない
- 空白を含むのにクォーテーションを付けていない
- 文字サイズを指定する（font-size）
- 単位の違い
- 太さを指定する（font-weight）
- 行間が読みやすさを決める（line-height）
- fontプロパティでまとめて書く方法
- Webフォントを使う方法
- メリット
- 注意点
- DevToolsでフォントを確認する方法
- 手順
- スマホとPCでフォントが違う理由
- 実務でよく使う安定設定
- よくある勘違い
- フォントを変えればデザインはよくなる？
- 明朝体はダメ？
- フォント設計の考え方
- チェックリスト
- まとめ：フォントは地味だけど効く
はじめに：フォントが変わるだけでサイトは別物になる
同じレイアウトでも、フォントが違うだけで印象はまったく変わります。
- なんとなく素人っぽい
- 文字が読みにくい
- スマホとPCで見た目が違う
- 日本語だけガタッと崩れる
こういう違和感、だいたいフォント設定が原因です。
私も昔、デザインはそれなりに整えたのに「なぜか安っぽい…」と感じたことがありました。原因はフォントでした。指定が甘くて、環境によって違う文字が表示されていたんです。
フォントは地味ですが、サイトの土台です。
ここを押さえると、一気にクオリティが上がります。
CSSフォントとは何か（まずここを整理）
CSSフォントとは、Webページに表示される文字の種類・大きさ・太さ・行間などを指定する仕組みのことです。
主に使うのは次のプロパティです。
- font-family（文字の種類）
- font-size（文字サイズ）
- font-weight（太さ）
- line-height（行間）
- font-style（斜体など）
順番に見ていきます。
フォントの種類を指定する（font-family）
基本形
body {
font-family: Arial, sans-serif;
}ポイントは「複数指定する」ことです。
なぜ複数指定するのか
ユーザーのPCやスマホにそのフォントが入っていない場合があります。
そのとき、左から順に代替フォントが使われます。
日本語サイトのおすすめ例
body {
font-family: "Hiragino Kaku Gothic ProN",
"Yu Gothic",
"Meiryo",
sans-serif;
}日本語フォントは環境差が大きいので、複数指定がほぼ必須です。
よくある失敗：フォントが反映されない
空白を含むのにクォーテーションを付けていない
font-family: Yu Gothic;これは正しく反映されません。
正解：
font-family: "Yu Gothic";空白がある名前は必ずダブルクォーテーションで囲みます。
文字サイズを指定する（font-size）
p {
font-size: 16px;
}単位の違い
- px：分かりやすい固定サイズ
- rem：ルート要素基準の相対サイズ
- %：親要素基準
まずはpxで理解してからremに進むのがスムーズです。
太さを指定する（font-weight）
h2 {
font-weight: 700;
}よく使うのは：
- 400（通常）
- 700（太字）
見出しと本文の差をここで作ります。
行間が読みやすさを決める（line-height）
実務で一番差が出るのはここです。
body {
line-height: 1.6;
}おすすめ目安：
- 本文：1.6〜1.8
- 見出し：1.2〜1.4
行間が詰まりすぎると一気に読みにくくなります。
fontプロパティでまとめて書く方法
p {
font: normal 16px/1.6 "Yu Gothic", sans-serif;
}一行で書けますが、意味を理解してから使うほうが安全です。
Webフォントを使う方法
Google Fontsなどを使えば、環境差を減らせます。
body {
font-family: "Noto Sans JP", sans-serif;
}メリット
- デザインの幅が広がる
- 環境による差が少ない
注意点
- 読み込み速度に影響する
- 使いすぎると重くなる
DevToolsでフォントを確認する方法
「指定したのに違うフォントが表示される」ときは、確認します。
手順
- Chromeで対象テキストを右クリック → 検証
- Elementsタブで文字を選択
- Computedタブを見る
- font-familyの実際の値を確認
実際にどのフォントが適用されているか確認できます。
ここを見ないまま悩み続けるのは時間がもったいないです。
スマホとPCでフォントが違う理由
原因は主にこれです。
- OSごとの標準フォントが違う
- 日本語フォントがインストールされていない
- Webフォントが読み込まれていない
その結果、スマホ崩れのように見えることがあります。
実務でよく使う安定設定
迷ったらこれでOKです。
body {
font-family: "Hiragino Kaku Gothic ProN",
"Yu Gothic",
"Meiryo",
sans-serif;
font-size: 16px;
line-height: 1.7;
color: #333;
}派手さはありません。
でも安定します。
よくある勘違い
フォントを変えればデザインはよくなる？
フォントだけでは不十分です。
行間・文字間・余白とのバランスが大事です。
明朝体はダメ？
ダメではありません。
ただ、本文ではゴシック体のほうが読みやすい傾向があります。
フォント設計の考え方
覚えておきたいのは3つです。
- 種類（font-family）
- サイズ（font-size）
- 行間（line-height）
この3つを整えるだけで、サイトはかなり整います。
チェックリスト
✔ 日本語フォントを複数指定しているか
✔ 空白を含むフォント名をクォーテーションで囲っているか
✔ line-heightが1.5以上あるか
✔ DevToolsで実際のフォントを確認したか
✔ Webフォントを入れすぎていないか
まとめ：フォントは地味だけど効く
フォントは装飾ではありません。
読みやすさそのものです。
レイアウトを整える前に、
- font-familyを見直す
- line-heightを調整する
- 実際に適用されているフォントを確認する
これをやるだけで、印象はかなり変わります。
デザインに迷ったら、まずフォントから。
そこが土台です。