🧨
【CSS】bodyにletter-spacingを指定するのは避けた方がいい
失敗談です。例えばデザインで文字に対して一律に文字間(トラッキング)が10%かかっていた場合に、<body>
タグにletter-spacing:0.1em
と指定すると意図しないものになる可能性があります。
bodyタグでの指定は全ての文字間を一括で0.1emにならない
<body>
タグにletter-spacing: 0.1em
を指定するとbodyのフォントサイズ(例:16px)に対する0.1em
、つまり例のパターンだと1.6px
という固定値が一括でかかります。
この場合、小さい文字では文字間が空きすぎ、大きな文字ではイマイチ空かなくなります。デザインではその文字サイズの10%
を文字間を意図しているはずなので、固定値では当然ズレてきます。
面倒でも個別に指定しよう
letter-spacing
が固定値ではなく、文字サイズに対する割合の場合、面倒でも都度指定するのが安全です。
Discussion
記事拝見しました。
この箇所に関して、私はスタイル上書きされる認識でしたが、重ねて計算で合っておりますでしょうか?
私は子要素にletter-spacing: 0.05emを指定すると、0.05emが適用される認識でした。
ありがとうございます。
重ねがけについて認識が誤っておりました。ご指摘のとおり、
letter-spacing
については上書きされるので、上記の場合子要素の0.05emが適用されます。誤った内容でしたので当該部分を記事より削除しました。
自分の検証不足により誤った内容を記載し申し訳ありませんでした。
いえ!とんでもございません!
ちなみに掛け算のような重ねて計算されるプロパティは他に存在しますでしょうか?
実装結果に大きく関わる箇所なのでここ明確にしておきたいなと🙇
font-size
をem
単位で行うと重ねがけ計算になります。この場合、「メロスは激怒した」は1.1 × 1.2 = 1.32倍のフォントサイズになります。
(余談ですが、この重ねがけがあるため、最近はフォントサイズに相対値を使う場合は
rem
が多くなったと思います)ありがとうございます!
確かにこれだと重ねがけになりました!
教えていただきありがとうございます。