大見出しは字間を -2%〜-5% 詰める

どんな問題を解決するか / いつ使うか

ヒーローセクションの見出し、LPのキャッチコピー、スライドのタイトルなど、文字サイズが大きい（目安32px以上）箇所。フォントのデフォルト字間は本文サイズ向けに設計されているため、大きく表示すると字間が開いて間延びしやすい。

やり方

• CSS：letter-spacing を em 単位で負の値に（-2% = -0.02em）。

h1 { font-size: 64px; letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-size: 40px; letter-spacing: -0.02em; }
body { letter-spacing: 0; } /* 本文は詰めない */

• Figma：テキストの Letter spacing に -2%〜-5% を入力。
• AIエージェントでUIを作る場合は、このルールをデザイン用のスキル／ルールファイルに保存しておくと毎回適用される（投稿者の提案）。

注意点・対応状況

• 本文サイズ（14〜18px）で詰めると読みにくくなる。サイズが大きいほど強めに詰めるのが基本。
• 和文（日本語）フォントは欧文より詰めすぎに注意。和文は font-feature-settings: "palt"（プロポーショナル詰め）を併用する方が自然なことが多い。
• 全角大文字・小さいサイズのキャプションはむしろ字間を広げる方が読みやすい。

出典

• 投稿者: @RafalTomal (Rafal Tomal)
• 投稿: @RafalTomal · 2026-10-09
• 収集日: 2026-10-09（JST）