em を使った文字サイズ指定のメリット

CSSで文字サイズを指定する場合、pxemのどちらを使うかで柔軟性が変わります。
特にブログ記事やテーマカスタマイズでは、emを使うことでユーザーに優しい設計が可能です。

1. em の基本

1em親要素のフォントサイズを基準 にした相対単位です。
例えば親要素が16pxなら、1em = 16px1.5em = 24px となります。

2. px と em の違い

  • px は固定サイズなので、ユーザーがブラウザの文字サイズを変更しても変わりません。
  • em を使うと、ブラウザの標準文字サイズやユーザー設定に応じて柔軟に拡大・縮小されます。

3. メリット

  • 本文と見出しを相対値で統一できるので、スマホやRSSリーダーでも崩れにくい。
  • ユーザーの読みやすさを優先した設計が可能。
  • レスポンシブ対応が容易になる(画面サイズごとに調整しやすい)。

4. 例:emで指定したCSS


.entry-body,
.entry-content {
    font-size: 1em;       /* 親要素基準で16px相当 */
    line-height: 1.8em;   /* 行間も相対値 */
}

.entry-content h2 {
    font-size: 1.375em;   /* 約22px相当 */
}

.entry-content h3 {
    font-size: 1.125em;   /* 約18px相当 */
}
  

まとめ

em を使うことで、ユーザーの環境に柔軟に対応でき、スマホ・PC・RSSリーダーなど、どんなデバイスでも文字が崩れにくくなります。
ブログやテーマカスタマイズでは、できるだけ em で統一することをおすすめします。