こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
2025年に新たに追加されたCSSプロパティ「text-spacing-trim」は、日本語のタイポグラフィに大きな影響を与える機能です。
これまで、Webでの日本語組版では、句読点や括弧の余白を手動で調整する必要がありましたが、「text-spacing-trim」を使うと、ブラウザが自動で適切に処理してくれるようになります。
今回は、この新しいプロパティの使い方や注意点を詳しく解説していきます！
text-spacing-trimとは？
「text-spacing-trim」は、日本語の約物（句読点や括弧など）と文字の間のスペースを調整するためのCSSプロパティです。
日本語の文章は、フォントによって句読点や括弧などの記号の前後に余白ができることがあります。
この余白を自動的に調整し、デザインの統一感を保つことができます。
text-spacing-trimの基本的な適用例
p { text-spacing-trim: auto; } この設定を行うことで、日本語のテキストにおいて不要な余白が削減され、バランスの取れたタイポグラフィが実現できます。
text-spacing-trimの値とその違い
「text-spacing-trim」には、以下の値があります。
- none（デフォルト） - 余白の調整を行わない
- auto - 句読点や括弧などの余白を適切に調整する
- trim-start - 行頭の余白のみ調整
- trim-end - 行末の余白のみ調整
- space-all - 文の先頭・末尾・単語間の余白をすべて削除する
text-spacing-trimの実装例
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
text-spacing-trimを使うメリット・デメリット
メリット
- 余白調整を自動化できるので、手動で微調整する手間が省ける
- 日本語のタイポグラフィがより美しくなる
- ブラウザの対応が進めば、デザインの統一感を維持しやすくなる
デメリット
- すべてのブラウザがまだ完全に対応していない
- 適用範囲によっては意図しないデザイン崩れが発生する可能性がある
- フォントによっては適切に機能しない場合がある
text-spacing-trimの対応ブラウザ
対応状況（2025年2月時点）
現在、「text-spacing-trim」は以下のブラウザでサポートされています。
- Google Chrome（最新版）
- Microsoft Edge（最新版）
- Firefox（一部対応）
- Safari（未対応の可能性あり）
まとめ
「text-spacing-trim」は、日本語のタイポグラフィを最適化する新しいCSSプロパティです。
「text-spacing-trim」設定を適用することで、句読点や括弧の余白を適切に調整可能です！
対応ブラウザがまだ限定的ですが、今後は標準化が期待されます。
「text-spacing-trim」を使えば、より美しい日本語Webデザインが実現できますので、Webサイトのデザインを洗練させるために、ぜひ活用してみてください！
「Web制作についてのご相談は、静岡県浜松市のsatokotadesignにお任せください！」
satokotadesignキャンペーン実施中！
