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;
}
POINTPOINT

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

コーディングブロ部 TOP

コーディング部ログ情報満載のコーディング部ログ