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

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

【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 の計算式とcalc() 『px指定の場合』

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

font-size ×(文字間の数値 ÷ 100)

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

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

になります。

letter-spacing の計算式とcalc() 『em指定の場合』

emで指定する場合は、

文字間の数値 ÷ 1,000

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

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

となります。

CSS設計を学びたいならダントツで分かりやすくてオススメ▼