本文テキストサイズのrem変換（14pxから20px）

本文テキスト：適切なrem値を見つける

本文テキストはページ上で最も読まれるコンテンツです。remでの適切なサイズ選択は、可読性、アクセシビリティ、ユーザーエンゲージメントに直接影響します。

一般的な本文テキストサイズ

px	rem	用途
14	0.875	密なUI、ダッシュボード、管理画面
15	0.9375	コンパクトなブログ、ドキュメント
16	1	標準的なWeb本文テキスト（デフォルト）
18	1.125	長文の読み物、記事
20	1.25	大判エディトリアル、アクセシビリティ優先

なぜ16px（1rem）がスイートスポットなのか

読みやすさの人間工学研究によると、16pxは腕の長さ（約50〜70cm）で画面を見る際の快適な最小本文テキストサイズです。ほとんどの成人が目を細めたり前のめりにならずに読むことができます。ただし、長文コンテンツ（ブログ記事、ドキュメント）では18px（1.125rem）に上げると読み心地が大幅に改善され、目の疲れが軽減されます。

行の高さの推奨

行の高さ（レディング）は本文テキストサイズに比例して増加させるべきです：

本文サイズ	行の高さ	実際のレディング
14px（0.875rem）	1.5	21px
16px（1rem）	1.5–1.6	24–25.6px
18px（1.125rem）	1.5–1.6	27–28.8px
20px（1.25rem）	1.5	30px

最適な行の長さ

本文テキストの理想的な行の長さは1行あたり45〜75文字です。CSSではmax-widthで近似できます：

.prose {
  font-size: 1rem;        /* 16px */
  line-height: 1.6;       /* 25.6px */
  max-width: 65ch;        /* 約65文字 */
}

ch単位は「0」文字の幅に対して相対的で、remベースのフォントサイズとうまく連携します。

レスポンシブな本文テキスト

大きな画面では本文テキストサイズを増加させることを検討してください：

body {
  font-size: 1rem;         /* モバイルでは16px */
}

@media (min-width: 768px) {
  body {
    font-size: 1.125rem;   /* タブレット以上では18px */
  }
}

このアプローチでは、ルートremシステムを使用して、本文サイズが変更されると下流のすべての相対値が自動的にスケーリングされます。