目次
- はじめに｜文字サイズは“センス”より“基準”で勝てる
- CSSで文字サイズを変える基本（font-size）
- よく使う文字サイズの単位（まずはこの4つ）
- pxで指定する（迷った時の最短ルート）
- pxの特徴
- pxの注意点（実務あるある）
- emで指定する（入れ子で増えるのがポイント）
- emの特徴
- emの落とし穴（スマホ崩れの原因になりやすい）
- remで指定する（今の実務で一番扱いやすい）
- remの特徴
- %で指定する（emに近い挙動）
- %の特徴
- px・em・rem・%の違いを一撃で理解する（ざっくり表）
- 迷わないおすすめ設計（コピペOKの“基準”）
- スマホでも読みやすい文字サイズの目安
- レスポンシブ対応で文字サイズを変える（やりすぎないのがコツ）
- やりすぎ注意
- 文字サイズが変わらない時の原因（検索されがちなところ）
- 原因1：別のCSSに上書きされている（最頻出）
- 原因2：読み込み順が逆（後ろが勝つ）
- 原因3：そもそもCSSが読み込まれていない
- DevToolsで“効いてる値”を確認する（差別化ポイント）
- 確認手順（Chrome）
- スマホで文字サイズが“変に見える”時のよくある話
- 横スクロール・スマホ崩れにつながる文字サイズの罠
- チェックリスト｜迷ったらこれだけ確認すればOK
- よくある質問
- pxとrem、どっちを使うべき？
- 文字サイズを大きくしすぎるとSEOに影響する？
- まとめ｜基準を決めて、rem中心にすると迷いが消える
はじめに｜文字サイズは“センス”より“基準”で勝てる
Webサイトを作っていると、地味に時間を吸われるのが文字サイズです。
- 文字が小さくて読みにくい
- スマホだとサイズ感が変に見える
- px・em・remの違いが分からない
- いじったのに文字サイズが変わらない（これが一番イライラする）
私も昔、font-size を変えても反映されなくて「CSS壊れた？」って焦ったことがあります。
原因はただの“上書き”でした。DevToolsで見たら一発。
仕組みが分かると、文字サイズは迷わなくなります。
この記事は「css 文字 サイズ」で検索してきた人が、今日から実務で困らないように、単位の違い・使い分け・トラブル対処までまとめたガイドです。
CSSで文字サイズを変える基本（font-size）
スニペット向けに一文でまとめます。
CSSで文字サイズを変更するには、font-sizeで大きさを指定し、px・em・rem・%などの単位を状況に合わせて使い分けます。
基本はこれだけです。
p {
font-size: 16px;
}よく使う文字サイズの単位（まずはこの4つ）
単位が多いと混乱しやすいので、まずはこの4つだけ押さえればOKです。
px：固定（分かりやすい）em：親要素基準（入れ子で増減する）rem：html基準（安定して扱いやすい）%：親要素基準（emに近い）
pxで指定する（迷った時の最短ルート）
p {
font-size: 16px;
}pxの特徴
- 直感的で分かりやすい
- 指定した値がそのまま反映されやすい
- まず動かしたい時に最速
pxの注意点（実務あるある）
部分的にpxだらけで組むと、後から調整が面倒になりがちです。
見出しだけ、ボタンだけ、注釈だけ…と増えて、どこを触ればいいか分からなくなります。
「まずpxで慣れて、運用はremへ」この流れは普通にアリです。
emで指定する（入れ子で増えるのがポイント）
body {
font-size: 16px;
}
p {
font-size: 1.2em; /* 16pxの1.2倍 → 19.2px */
}emの特徴
- 親要素の文字サイズが基準
- コンポーネント内だけスケールさせたい時に便利
emの落とし穴（スマホ崩れの原因になりやすい）
入れ子が深くなると、勝手にサイズが大きくなります。
.card {
font-size: 1.1em;
}
.card .title {
font-size: 1.2em; /* 1.1emの上に1.2倍 → 思ったよりデカくなる */
}「なぜか一部だけ文字が巨大」みたいな事故は、だいたいemの重ね掛けです。
しかも、気づきにくい。これが厄介です。
remで指定する（今の実務で一番扱いやすい）
html {
font-size: 16px;
}
p {
font-size: 1rem; /* 常にhtml基準 */
}remの特徴
html（ルート）基準なので、入れ子の影響を受けない- サイズ設計が安定する
- レスポンシブ対応の調整もやりやすい
「全体の基準はremで、局所的な調整だけem」みたいな運用が強いです。
最初から完璧にやろうとしなくて大丈夫。まずはremを中心にするだけで、かなり楽になります。
%で指定する（emに近い挙動）
p {
font-size: 100%;
}%の特徴
- 親要素を基準に割合で指定
emと似た動き
慣れるまでは % より px と rem を中心にした方が混乱が減ります。
ただ、既存のCSSで % が多い現場もあるので「親基準」だとだけ覚えておくと安心です。
px・em・rem・%の違いを一撃で理解する（ざっくり表）
| 単位 | 基準 | 得意な場面 | ハマりやすい点 |
|---|---|---|---|
| px | 固定 | まず反映させたい | 全体調整が散らかりやすい |
| em | 親要素 | 部品内だけ拡大縮小 | 入れ子で予想外に増える |
| rem | html | サイト全体の設計 | 基準を決めないと迷う |
| % | 親要素 | 親に合わせて調整 | emと挙動が似て混乱しやすい |
迷わないおすすめ設計（コピペOKの“基準”）
まずはこの形で始めるのが楽です。
html {
font-size: 16px;
}
body {
font-size: 1rem;
line-height: 1.7;
}見出しはremで段階を作る。
h1 { font-size: 2rem; } /* 32px */
h2 { font-size: 1.5rem; } /* 24px */
h3 { font-size: 1.25rem; } /* 20px */
p { font-size: 1rem; } /* 16px */これで「基準（html）＋運用（rem）」が決まります。
あとから全体を少し大きくしたい時も、基準を触れば済みます。
スマホでも読みやすい文字サイズの目安
まずはこのへんが無難です。
- 本文：16px（= 1rem）
- 注釈：14px以上（やむを得ない時だけ）
- 見出し：20〜32pxあたりで段階
スマホで本文が14px以下だと、読まれないことが増えます。
「表示は崩れてないけど離脱する」タイプの原因になりがちです。
レスポンシブ対応で文字サイズを変える（やりすぎないのがコツ）
スマホだけ少し小さくしたい、はよくあります。
body {
font-size: 1rem;
}
@media (max-width: 768px) {
body {
font-size: 0.95rem;
}
}やりすぎ注意
ブレイクポイントごとに細かくいじりすぎると管理が地獄になります。
最初は「本文だけ」または「見出しだけ」など、変更点を1つに絞ると安定します。
文字サイズが変わらない時の原因（検索されがちなところ）
原因1：別のCSSに上書きされている（最頻出）
p {
font-size: 16px;
}
.article p {
font-size: 14px; /* こっちが勝つ */
}「書いたのに変わらない」は、だいたいこれです。
負けている側は、DevToolsで見ると打ち消し線が付きます。
原因2：読み込み順が逆（後ろが勝つ）
<link rel="stylesheet" href="responsive.css">
<link rel="stylesheet" href="style.css">後ろのCSSが優先されるので、意図と逆になりやすいです。
レスポンシブ用CSSを分けている時は特に起きます。
原因3：そもそもCSSが読み込まれていない
<link rel="stylesheet" href="style.css">- パス違い
- ファイル名違い
- キャッシュで古いCSSを見てる
この3点は一回疑ってOKです。
「更新したのに反映されない」は、キャッシュが犯人のことも多いです。
DevToolsで“効いてる値”を確認する（差別化ポイント）
「変わらない」問題は、DevToolsでほぼ即解決できます。
確認手順（Chrome）
- 文字の上で右クリック → 検証
- Elementsで該当要素を選択
- 右側の Styles で
font-sizeを探す - 打ち消し線が付いていたら負けてる（上書きされてる）
- Computed で最終的な
font-sizeを見る - さらに「どのファイルの何行目が勝ってるか」も見ておく
ここで勝者が分かるので、闇雲に !important を付ける必要が減ります。
実務では、まず見る。これが一番早いです。
スマホで文字サイズが“変に見える”時のよくある話
font-sizeだけ触っても「なんか変」は残ることが多いです。
だいたい、こっちが原因です。
- 行間（line-height）が詰まってて小さく見える
- 字間（letter-spacing）を広げすぎて間延びして見える
- 見出しだけ太字が強すぎて、本文が弱く見える
サイズを触る前に、行間だけ整えると急に読みやすくなることがあります。
body {
font-size: 1rem;
line-height: 1.7;
}横スクロール・スマホ崩れにつながる文字サイズの罠
文字サイズそのものより、「折り返せない長文」が原因になりがちです。
- URLや英数字が長い
white-space: nowrap;が入っている- ボタン内テキストが大きくてはみ出す
対策はこれが強いです。
.long-text {
overflow-wrap: anywhere;
word-break: break-word;
}「スマホで横にスーッと動く」ってやつ、かなりの確率でこれです。
チェックリスト｜迷ったらこれだけ確認すればOK
font-sizeはどこに書いた？（body / html / 個別要素）- 単位は
px/rem/emのどれ？ emを入れ子で重ねてない？- DevToolsのComputedで最終のfont-sizeを見た？
- スマホ幅（375px前後）で読みにくくない？
- 横スクロールが出るなら、長い英数字やnowrapを疑った？
よくある質問
pxとrem、どっちを使うべき？
最初はpxで理解して、運用はremに寄せるのが一番スムーズです。
全体設計はremの方が後から楽になります。
文字サイズを大きくしすぎるとSEOに影響する？
直接の順位要因ではありません。
ただ、読みやすいと離脱が減りやすいので、結果的にプラスに働くことはあります。
まとめ｜基準を決めて、rem中心にすると迷いが消える
CSSで文字サイズを変更する流れはこれでOKです。
- 基本は
font-size - pxは分かりやすい（入口として便利）
- emは便利だけど入れ子で増える（事故りやすい）
- remは安定して使いやすい（実務向き）
- 変わらない時はDevToolsで“勝ってるCSS”を見る
- スマホの違和感はline-heightもセットで見る
「css 文字 サイズ」で探しているなら、まずは html { font-size: 16px; } を基準にして、rem で組んでみてください。
一度この型にすると、レスポンシブでも崩れにくくなります。