日本語と英語で違う「字間」の考え方

英文タイポグラフィの世界では letter-spacing は基本的に「触らない」が原則です。フォントデザイナーが文字ごとに最適なメトリクスを設計しているため、開発者が手を加えるとバランスが崩れます。一方、日本語は事情が異なります。漢字は正方形の中に収まる等幅前提で設計されており、Webブラウザでデフォルト表示すると、ひらがな・カタカナ・英数字との間に微妙な隙間が生まれます。

そのため日本語Webでは letter-spacing をわずかにプラス方向(0.02〜0.08em)に振って、文字塊全体のリズムを整えるのが定番のテクニックになっています。本記事では、本文・見出し・混植のそれぞれにおける推奨値と、その理由を解説します。

本文に適した字間: 0〜0.05em

本文では letter-spacing: 0.05em を目安にしてください。これは1文字あたりフォントサイズの5%だけ余白を空ける指定です。16pxの本文なら0.8pxの隙間が均等に挿入され、漢字の四角い輪郭の周りに空気感が生まれます。

0emのままだと、特に長文で「ぎっしり感」が出ます。逆に0.1em以上に広げると、文字が「バラバラに並んでいる」印象になり、単語のまとまりが認識しづらくなります。日本語は分かち書きをしないため、字間を広げすぎると意味の区切りが曖昧になります。0〜0.05emの範囲が現実的な落とし所です。

見出しに適した字間: -0.02em〜0.02em

見出し(h1, h2)は本文と逆の発想が必要です。フォントサイズが大きいため、デフォルトの字間が間延びして見えます。むしろマイナスに振って文字を寄せたほうが、引き締まった印象になります。

太いウェイト(700〜900)の見出しでは letter-spacing: -0.02em 程度が効きます。ただしマイナスを取りすぎる(-0.05em以下)と文字同士がぶつかって読みにくくなるので、必ずプレビューで確認してください。明朝体の見出しは元々筆の運びで余白を持っているので、0em前後に留めるのが無難です。

カタカナ語と英数字の混在対策

日本語Webで最も悩ましいのは、カタカナ語と英数字が混じった文章です。「Webデザインのベストプラクティス」のような行では、英字部分(Web)と日本語部分の間に微妙な段差が生まれます。

対策として CSS の font-feature-settings: "palt" を有効にすると、日本語フォント側の文字幅が最適化されて、混植時のズレが緩和されます。Noto Sans JPなどGoogle Fontsはこの機能をサポートしています。実装はbody要素に font-feature-settings: "palt"; letter-spacing: 0.04em; の2行を当てるだけ。これで多くの混植トラブルが解消します。

KumiFontのスライダーで0.01em単位の調整を試しながら、自分のサイトに最適な数値を見つけてください。たかが字間、されど字間。サイト全体の品質を一段引き上げる重要パラメータです。