adobe XDでのline-height値の変換

デザイン

adobe Xdで行間指定する際に、line-heightが1.8だから、えーと…となることが多いのでメモしておこうと思う。

font-size × line-height(pxではなく1.5などの相対値) = 行間
例) font-size 30px × line-heigth 1.5 = 行間 45

ちなみにletter-spacingの場合は、

letter-spacing(単位はem) × 1000 = 字送り(トラッキング)
例) letter-spacing 0.02em × 1000 = 字送り 20

※字送り(トラッキング)は1000で一文字分(1emと同じ)。

逆に、Xdの行間、字送りの値からline-height、letter-spacingの値を出したい場合は、

行間 ÷ font-size × font-size = line-height
例) 行間 45 ÷ font-size 30px = line-height 1.5

字送り ÷ 1000 = letter-spacing
例) 字送り 20 ÷ 1000 = letter-spacing 0.02em

となる。

Pocket

タイトルとURLをコピーしました