文字詰めで見栄えが激変する！Webタイポグラフィの「字間調整」を現場レベルで使いこなす

2026年08月26日

クリオ

Web制作ディレクター / フロントエンジニア

こんにちは！
今日は「文字詰めで見栄えが激変する！Webタイポグラフィの字間調整」について解説します。

字間調整がなぜ大事なのか？デザイナーからの指摘で気づいた

ほんま、僕も最初の頃は「字間調整」の重要性に気づいていなかったんです。
フォントとサイズを決めたら、あとは実装するだけやと思ってました。
でもデザイナーの先輩から「ここの字間、めっちゃ詰めてくれへん？」って指摘されたのが転機でした。

その時に見せてもらった修正後のデザインを見て、正直びっくりしました。
同じテキストなのに、ほんの少し字間を詰めるだけで、グッとプロっぽくなるんです。
「これ、単なる好みちゃうんや。タイポグラフィの基本やわ」って気づかされました。

字間調整って実は、フォントの見栄えを決定する要素の中でもめっちゃ大事な要素なんです。
「行間」や「フォントサイズ」に比べると、目立たない存在ですけど、一度気になり始めると、もう手放せなくなりますよ。

Webでの字間調整は、CSSの letter-spacing プロパティを使います。
でも最初の頃、僕はこれを甘く見てました。

基本的な書き方はこんな感じです：

letter-spacing: 0.05em;

シンプルですね。
でも現場で僕が最初にやった失敗は、単位を意識せずに書いてしまったことです。
「letter-spacing: 2px」みたいに固定値をドンと入れちゃったんです。

そしたらどうなったか。
レスポンシブで小さい画面になった時に、字間が相対的に大きくなり過ぎて、もう読めたもんじゃなくなりました。
めっちゃ後悔しましたね。

大事なポイントはこれです：

例えば、見出しなら letter-spacing: 0.05em、本文なら letter-spacing: 0.02em みたいな感じで、フォントサイズに応じて柔軟に対応できます。

あと、ちょっと意外かもしれませんが、letter-spacing: 0 （デフォルト値）にしても、ブラウザやフォントの種類によって若干の自動調整が入ってることもあります。
だから「デフォルト = ゼロ調整」とは限らないってのも、現場でよく見かけます。

実装していく中で気づいたのは、「同じ letter-spacing の値でも、フォントやサイズによって見え方が全然違う」ってことです。

例えば、日本語フォント（游ゴシックなど）と欧文フォント（Robotoなど）では、字間の感じ方が異なります。
同じ 0.05em でも、日本語だと「ちょっと詰まってるな」という印象でも、欧文だと「普通」に見えたりします。

僕の現場での使い分けのコツはこんな感じです：

あ、あと大事な話があります。
「負の値」（letter-spacing: -0.02em）を使うこともあります。
大きな見出しで、ちょっと詰まった高級感を出したい時とかですね。
ただしこれは、テキスト量が少ない見出しに限ったテクニックです。
本文に使うと絶対に読みにくくなりますからね。

字間調整でよくある失敗が、「PC版では完璧だけど、モバイル版では読みにくい」という現象です。

理由は簡単。
PCでは大きいサイズで letter-spacing: 0.05em が素敵に見えても、モバイルで一回り小さくなった時に、相対的に字間が広すぎて、テンテンテンみたいに分断される感じになるんです。

解決策としては、メディアクエリを使って、ブレークポイントごとに字間を調整するのが定番です：

@media (max-width: 768px) { h1 { letter-spacing: 0.02em; } }

ただ、個人的には clamp() 関数を使うのが、最近のトレンドだと思います。
これなら、ビューポート幅に応じて自動的に字間が調整されるので、ほんまに便利です。

letter-spacing: clamp(0.02em, 0.5vw, 0.1em);

この書き方なら、画面が小さくなっても、大きくなっても、常に「いい感じ」の字間が保たれます。
ただし、古いブラウザでは対応していないので、プロジェクトの要件に応じて判断してくださいね。

字間調整は、一見地味に見えるかもしれませんが、実はWebタイポグラフィの「隠れたMVP」だと思います。

大事なポイントをもう一度まとめます：