🧨

【CSS】bodyにletter-spacingを指定するのは避けた方がいい

2022/07/25に公開
5

失敗談です。例えばデザインで文字に対して一律に文字間(トラッキング)が10%かかっていた場合に、<body>タグにletter-spacing:0.1emと指定すると意図しないものになる可能性があります。

bodyタグでの指定は全ての文字間を一括で0.1emにならない

<body>タグにletter-spacing: 0.1emを指定するとbodyのフォントサイズ(例:16px)に対する0.1em、つまり例のパターンだと1.6pxという固定値が一括でかかります。

この場合、小さい文字では文字間が空きすぎ、大きな文字ではイマイチ空かなくなります。デザインではその文字サイズの10%を文字間を意図しているはずなので、固定値では当然ズレてきます。

面倒でも個別に指定しよう

letter-spacingが固定値ではなく、文字サイズに対する割合の場合、面倒でも都度指定するのが安全です。

Discussion

FF

記事拝見しました。

またletter-spacingに限った話ではありませんが、em単位の場合、スタイルを重ねがけすると、掛け算も重ねて計算されます。親要素にletter-spacing: 0.1emをかけ、子要素にletter-spacing: 0.05emを指定すると110%×105%=115%、letter-spacing: 0.115emをかけた結果になってしまいます。

この箇所に関して、私はスタイル上書きされる認識でしたが、重ねて計算で合っておりますでしょうか?
私は子要素にletter-spacing: 0.05emを指定すると、0.05emが適用される認識でした。

にしはらにしはら

ありがとうございます。
重ねがけについて認識が誤っておりました。ご指摘のとおり、letter-spacingについては上書きされるので、上記の場合子要素の0.05emが適用されます。

誤った内容でしたので当該部分を記事より削除しました。
自分の検証不足により誤った内容を記載し申し訳ありませんでした。

FF

いえ!とんでもございません!

ちなみに掛け算のような重ねて計算されるプロパティは他に存在しますでしょうか?
実装結果に大きく関わる箇所なのでここ明確にしておきたいなと🙇

にしはらにしはら

font-sizeem単位で行うと重ねがけ計算になります。

<div style="font-size:1.1em">
  <p style="font-size:1.2em">メロスは激怒した</p>
</div>

この場合、「メロスは激怒した」は1.1 × 1.2 = 1.32倍のフォントサイズになります。
(余談ですが、この重ねがけがあるため、最近はフォントサイズに相対値を使う場合はremが多くなったと思います)

FF

ありがとうございます!
確かにこれだと重ねがけになりました!
教えていただきありがとうございます。