CSSでテキストデザインを劇的に変える5つのプロパティ
CSS properties you should know for better text designs
ウェブ上のテキストをより魅力的にするためのCSSプロパティを5つ紹介。background-clipを使った画像やグラデーションでの文字の塗りつぶし、vertical-alignとalign-contentの正しい使い分け、box-decoration-breakによる行端のスタイル統一、letter-spacingを活用したアニメーション、そして縦書き時のtext-combine-uprightによる横並び表示など、実用的なテクニックをコード例付きで解説。
背景クリップ（background-clip: text）は、背景画像やグラデーションをライブテキスト内にマスクすることを可能にし、それ以来、本当にクールなタイポグラフィビジュアルのための最も求められるルールの1つであり続けています。
HNでの議論
22- myfonj
言及する価値があるのにそこに欠けている注意点がいくつかあります：
1. `background-clip: text` にはブラウザ間で非常に多くの実装バグがあり、特にFirefoxで顕著です[1]。基本的に、追加のtransformやfilterを伴わない単純なケースでのみ安全です。
2. `color: transparent` は、`transparent` キーワードをサポートするすべてのブラウザ（つまり、おそらくすべてのブラウザ）でテキストを不可視にしますが、`background-clip: text` をまだサポートしていない場合や、背景画像の読み込みや解釈に失敗した場合（ハイコントラストモードや強制色モードなど）には、テキストが表示されないことを意味します。代わりに `-webit-text-fill-color: transparent` を使用してください。（はい、そのベンダープレフィックスは必要です。そして、はい、それは事実上の標準であり、ChromeとFirefoxで実装されています[2]。そして、はい、それはこれ以上ないほど馬鹿げています。）
3. `letter-spacing` を触ると、論理的にすべての合字がオフになります。実際には良いことかもしれませんが、知っておく価値はあります。（Anthropicはかつてウェブページ全体で負のletter-spacingを使用していましたが、今はそれを放棄したようです。）
[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1656784
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
- chrismorgan
letter-spacingは圧倒的に使われすぎです。私はFirefoxを自分の選んだフォントだけを使うように設定しています（そして強くお勧めします：ウェブがずっと良くなります）。このバリエーションの減少により、ゼロ以外のletter-spacingが私にはずっと目立つようになりました。一般的な本文サイズでは、1%未満のletter-spacingの変化に気づく傾向があります（0.1pxでも気づくことがよくあります）。
私がどんな種類のletter-spacingでも許容できると思う場所は3つだけです：
1. アート。（これは記事の意図された文脈ですが、それがその文脈から外れて使われることを私は知っています。）
2. 大きな見出しでは、letter-spacingをわずかに減らすことは合理的かもしれません。なぜなら、フォントはしばしば小さなサイズでの使用に合わせてスペーシングされているからです。しかし、line-heightを減らすことがほぼ必須である一方で、letter-spacingを減らすことはせいぜいわずかな価値しかありません。理想的には、オプティカルサイズ（opsz軸）を持つ可変フォントを使用して、これが自動的に処理されるようにすることです。
3. すべて大文字、スモールキャップス、またはすべてスモールキャップスのテキストでは、フォントは一般的に小文字の連続に合わせてスペーシングされているためです。https://practicaltypography.com/letterspacing.html は5〜12%（CSSでは5%または0.05emと記述できます）を提案しています。理想的には、caps、smcp、c2sc機能内でこれを最適化するフォントを使用することです。
いかなる状況でも、本文テキストにゼロ以外のletter-spacingを設定しないでください。それは単に間違っています。好みのフォントが広すぎる、または狭すぎると感じる場合は、フォントを修正するか交換してください。
（もう一つの理由が欲しいなら：letter-spacingは合字と互換性がありません。しばしば無視されますが、それは事実です。）
- addedlovely
text-wrap: balanceがそこにあると思っていました。
オーファンを解決しましょう！
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...