タイポグラフィの基本は何を書くかではなくどう見せるか。行間（line-height）と文字間隔（letter-spacing）のちょっとした調整が、ユーザーの読む体験を大きく変えます。ECサイトで実践できる具体的な設定値をご紹介します。
あなたが好きなWebサイトを思い出してください。なんとなく読みやすいと感じたサイトには、共通点があります。それは行間と文字間隔が適切に設定されているということ。これらは、タイポグラフィの中でも特に影響力が大きい要素です。
行間（line-height）は行と行の間の距離。文字間隔（letter-spacing）は文字と文字の間隔です。この二つを調整するだけで、ユーザーの読む速度や理解度は大きく変わります。スマートフォンでの読みやすさが重要な今、これらの調整は避けて通れません。
行間の設定は、フォントサイズを基準に考えます。一般的なテキストは1.51.8の値が目安。これはフォントサイズの1.5倍1.8倍の高さを意味します。
例えば、フォントサイズが16pxなら、行間は24px28.8pxということ。スマートフォン（320px幅）では1.6を基準に。タブレット（768px）では1.7。デスクトップ（1440px以上）では1.8と、徐々に増やしていくのがコツです。
body { line-height: 1.6; }
@media (min-width: 768px) { body { line-height: 1.7; } }
日本語の文字間隔は、英語ほど広く取る必要がありません。むしろ0.05em程度の微調整が効果的。0.05emは、フォントサイズの5%に相当する間隔です。
見出しには0.1em程度の間隔を持たせると、高級感が出ます。本文は0em（デフォルト）か0.02emの微調整で十分。大切なのは統一感。サイト全体で同じ値を使うことで、ブランドとしての一貫性が生まれます。
h2 { letter-spacing: 0.1em; }
p { letter-spacing: 0.02em; }
ブラウザやOSによって、行間と文字間隔の表示が微妙に異なる場合があります。本ガイドは標準的な環境での推奨値です。必ず複数のデバイスとブラウザでテストを行い、実際のユーザー体験を確認してください。
スマートフォンの小さい画面では、行間を広めに取ることが重要です。320px幅では行間1.6以上が必須。文字が密集していると、スクロールする手指で誤タップが増えます。
ECサイトの商品説明文は、行間1.7、文字間隔0.03emで設定すると、購入意欲が高まるという調査結果もあります。ユーザーがちゃんと読めると感じると、信頼度が上がるんです。
設定した値が本当に効果的か、確認する必要があります。ブラウザの開発者ツールを使って、実装した行間と文字間隔を測定できます。Chrome、Firefox、Safariのいずれでも対応しています。
実際のユーザーにテストしてもらうのが最も信頼できる方法です。510人の実ユーザーに、スマートフォンで商品説明文を読んでもらい、読みやすさを5段階評価してもらう。これを複数パターン試すことで、最適な値が見えてきます。
行間と文字間隔は、見出しや装飾ほど目立つ要素ではありません。でも、ユーザーが長時間テキストを読むときの体験に、直接影響します。なんとなく読みやすいという感覚は、実はこの二つの値で大部分が決まっているんです。
あなたのECサイトが扱う商品の説明文も、スマートフォンで何度も読まれます。その読む体験を少しでも良くすることが、結果として購入率向上につながります。ぜひ今日から、このガイドの値を試してみてください。
タイポグラフィは、デザインの中でも最も静かに働く要素です。その分、完成度が高いと、ユーザーは気づかずにこのサイト、いいなと感じます。これが、真のデザイン力だと思います。
