Photoshopと実装で見た目が同じにならない話

2021/04/30

画像と文字を横並びにしたときPhotoshopと実装で見た目が同じにならないケースをご紹介します。

はじめに

先日、ウェブ制作業界の方々との話のなかで「Photoshopと実装で見た目が同じにならない」という話題が出ました。

画像と文字を横並びにしたときの差に、その違いは顕著に現れます。

1

原因は、p要素の中の文字の上下にあるline-heightの存在です。

Photoshopでは、行間の余白は行送りという設定値で定義され、1行目の上に余白はできません。

一方でCSSの行間の余白はline-heightによって決まり、すべての行の上下にline-height分の余白を持つため、1行目の上にも余白ができることになります。

些細な違いですが、この差異について気にする人もいるため、対策をご紹介します。

対策

ネガティブマージンを使って文字を上に上げる

p要素のmargin-topにマイナスの値を設定して、文字を少しだけ上に移動させます。

2

どれくらいの値を設定するとちょうど良いかは、フォントサイズによって異なります。

先述の例では、font-size: 72pxの文字に対して、margin-top: -20pxを設定することで、だいたいPhotoshopと同じ見た目になったかと思います。

しかし、これをフォントサイズ毎にいちいち調整していくのは現実的でないので、Sassのmixinを作るのが一般的です。

Sassのmixinを作る

次のmixinは一例です。

@mixin font-TopSpaceKilled($fontSizePixel) {
  font-size: #{$fontSizePixel}px;

  &::before {
    content: '';
    display: block;
    height: 0;
    margin-top: #{$fontSizePixel * -.28}px;
  }
}

.text {
  @include font-TopSpaceKilled(72); // → margin-top: -20.16pxになる
}

font-sizeの値に比例して、margin-topで上にずらす幅も大きくなるようにしています。

注意点

注意点としては、

  • ウェブフォントを使わずデバイスフォントを使用している場合は、当たっている書体ごとに適切な上余白が異なる
  • 多言語サイトの場合、言語毎に適切な上余白が異なる

ということがあります。

3

案件の状況次第ですが、ここまで細かい調整は行わず、どの環境でも80点くらいの出来を目指すというのも現実的によくある選択です。

終わりに

以上、画像と文字を横並びにしたときPhotoshopと実装で見た目が同じにならないケースのご紹介でした。

実際ここまで細かい調整をする案件というのは個人的には全体の5%もないくらいの感覚です。

もし皆さまが厳密なカンプの再現を求められる現場に出会ったとき、この記事の内容が参考になれば幸いです。

最後までお読みいただきありがとうございました。