HTML コーディング代行会社のブログ

Photoshop データの文字設定を css で忠実に再現する方法2019.08.06

皆さん、おつかれさまです！今回はコーダー必読 "Photoshop データの文字設定を css で忠実に再現する方法" をシェアします。すでにマスターしている方も、再確認のためサクッと読んでみてください。特にトラッキングはついつい見逃しがちなのでご注意を！

① フォントファミリー
② フォントウェイト
③ フォントサイズ
④ 行送り
⑤ トラッキング

① ～ ③ は下記 css のとおりで特に説明不要かと思いますが、④ 行送り、⑤ トラッキングの計算方法はこちら。

④ 行送り (line-height)
行送りの値 ÷ フォントサイズ

⑤ トラッキング (letter-spacing)
トラッキングの値 ÷ 1000

となります。

CSS

h1 {
  font-family: "游ゴシック";
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.075em;
}

POINT

コーディング代行会社にとって Photoshop データを忠実に再現することは当たり前です。デザイナー様の意図を汲み取り、高品質な HTML データを提供しましょう。

コーディング部ログ TOP