【XD】文字間(カーニング)と行間(行送り)の数値をCSSに変換する

【XD】文字間(カーニング)と行間(行送り)の数値をCSSに変換する

広告

文字間(カーニング)の計算式

文字間(カーニング)の数値÷1,000

例えば、文字間が「75」だった場合、75÷1,000=0.075になります。

この0.075をCSSの「letter-spacing」プロパティにemをつけて0.075emと指定すればOKです。

文字間:75→letter-spacing:0.075em

XDのカーニングを求めたい場合

逆に「letter-spacing」とフォントサイズが分かっていて、XDのカーニングの数値を求めたい場合は……

(「letter-spacing」÷「font-size(px)」)×1,000

例えば「letter-spacing」が5px、フォントサイズが30だった場合、(5÷30)×1,000=167(166.666……)になります。

letter-spacing:5px, font-size: 30px→XDのカーニング:167

Webサイトをトレースしたい時などに使えます!

行間(行送り)の計算式

行間(行送り)÷フォントサイズ

例えば行間が30、フォントサイズが15だった場合、30÷15=2になります。

この2をCSSの「line-height」プロパティに指定すればOKです。

そのまま30pxと指定しても同じですが、レスポンシブなどの関係か単位無しで指定するのが良いらしいです。

行間:30,フォントサイズ:15→line-height:2

ちなみに

少しズレてる

これはWebサイトをトレースしていてぶつかった問題で、「フォントサイズは合っているのに、デザインにピッタリ合わない……CSSは0.075emとかem単位だけど、XDにそんな単位無いし分からん」と困ったときのものでした。

調べたところ上記の計算式があり、CSSの数値から逆算することで解決しました。

ピッタリ合った(- -)

以上です、お疲れさまでした!

広告