【CSS】line-height と letter-spacing は『calc()』を使うと便利

私がいつも使ってる指定の仕方です。

『calc()』ってめっちゃ便利ですよねってことで、今回はテキスト関係での用途をご紹介します。

line-height の計算式とcalc()

フォントにおける line-height の計算式は、

行間（行送り）の数値 ÷ font-size

です。

例えば、デザインデータの行間の値が 50 で font-size が 25px なら、

50 ÷ 25 = 2

ということで line-height は『2』になります。

上記の例を calc() で指定すると、

line-height : calc(50 / 25);

となります。

letter-spacing（文字間・カーニング）の計算式は、

font-size ×（文字間の数値 ÷ 100）

となり、デザインデータの文字間が 75 で font-size が 16px の場合を calc() で指定すると、

letter-spacing : calc(16px * 0.75);

になります。

emで指定する場合は、

文字間の数値 ÷ 1,000

となり、px の例と同じ条件（文字間が 75）で calc() 指定すると、

letter-spacing : calc(75em / 1000);

となります。