Sketch の Spacing Line を CSS の line-height に変換する方法

phi phi on sketch, css

Sketch の Spacing Line と CSS の line-height は若干扱いが異なります.

そのため, Sketch のデータを渡されてその値のとおり指定して Web ページを作ると 若干位置がズレることがあります.

zeplin なんかは, この Spacing Line の値をそのまま鵜呑みにして CSS の line-height として吐き出しちゃってるのでそのまま作るとぜったい同じ見た目にならないという...

この違いに困らされたフロントエンドエンジニアさん多いのではないでしょうか. そんな人のために今回は, それぞれの扱いの違いについて触れつつ, 変換する方法を紹介します.

Sketch 上での Spacing Line の扱い

行の中心から次の行の中心までの距離になります.

image

CSS 上での line-height の扱い

line-height の場合, 自身のフォントサイズからあぶれた分のサイズが
上下均等に割り振られます.

image

Spacing Line を line-height の値に変換する方法

違いを見て分かるとおり, Spacing Line からテキストの高さ分を引いた値に テキストの高さを足したものが CSS でいう line-height になります.

計算式にすると

sl = sketch 上での Spacing Line  
fs = sketch 上での font size  

としたとき

(sl - fs) / fs + 1
= (sl / fs) - (fs / fs) + 1
= (sl / fs) - 1 + 1
= (sl / fs)

となります.

(Spacing Line / font size) = line-height

だいぶシンプルになりましたね.

CSS で使う場合

CSS3 の calc で動的に計算すると楽です.

.text {
  /* Spacing Line: 40px */
  font-size: 16px;
  line-height: calc(40/16);
}

LESS で使う場合

実行時のコストが気になる場合は LESS や SASS で関数化しましょう.

.sketch-line-height(@font-size, @line-height) {
  line-height: (unit(@line-height)/unit(@font-size));
}
.text {
  @font-size: 16px;
  @line-height: 40px;
  font-size: @font-size;
  .sketch-line-height(@font-size, @line-height);
}

Sketch 上のテキストを再現したデモ

sketch 上で

Font size ... 16px  
Spacing Line ... 40px  
Font Family ... Helvetica  

が指定されていた場合を再現したデモです.