Photoshopの行送りとCSSのline-heightの設定とその違い

PhotoshopでWEBデザインを行う際、CSSのline-heightをフォントサイズにあわせて、毎回計算しなければならないのが面倒じゃありませんか?

Photoshopの初期設定のままだと、行送りは「自動」になっていると思います。この場合は、CSSは「line-height:1.2;」です。この行送りの「自動」の値を、文字設定パネルの、「段落」>「ジャスティフィケーション」で変更することが可能です。この機能を利用すれば、一括で%を変更することができ、とても便利です。150%にした時は、「line-height:1.5;」です。しかし、一括指定じゃなくて、段落毎に、ピクセル単位で設定する時は、いちいち計算しなくてはいけなくて、、、泣きたくなりますね。

わたくしも、まいどまいど、うんざりしてしまったので、一覧表を作成しました。

ただし、Photoshopは行送り、CSSは行の高さを指定していますので、微妙な違いが発生してしまいます。予めご注意くださいね。

line-height:1.5;の時

自動行送りで設定する場合は150%、段落毎に個別でピクセル指定する場合は、以下の通りです。

PSの文字サイズ PSの行送り設定
12pt 18pt
14pt 21pt
16pt 24pt
18pt 27pt
20pt 30pt
22pt 33pt
24pt 36pt
26pt 39pt
28pt 42pt
30pt 45pt
32pt 48pt
34pt 51pt
36pt 54pt
38pt 57pt
40pt 60pt

line-height:1.8;の時

自動行送りで設定する場合は180%、段落毎に個別でピクセル指定する場合は、以下の通りです。

PSの文字サイズ PSの行送り設定
12pt 21.6pt
14pt 25.2pt
16pt 28.8pt
18pt 32.4pt
20pt 36pt
22pt 39.6pt
24pt 43.2pt
26pt 46.8pt
28pt 50.4pt
30pt 54pt
32pt 57.6pt
34pt 61.2pt
36pt 64.8pt
38pt 68.4pt
40pt 72pt

Photoshoの文字設定と、CSSの文字設定の違い

WEBサイトのデザインカンプをPhotoshopで制作するとき、Photoshoの文字設定と、CSSの文字設定の違いに戸惑ったことはありませんか?

たとえば、文章の行送りの設定をCSSの設定に合わせて作ったつもりだったのに、、、実際に画面にしてみると、Photoshopの時にはなかったはずの空白が、文字の上にできてしまっているのに戸惑った経験はありませんか?

行間とか行送りというのは、どういったものなのか? PhotoshopとCSSのそれぞれの設定の違いは何なのか?それを理解して、事前に、誤差を踏まえた上で、デザインできるようになるといいですね。そのために、簡単な解説をしたいと思います。

Photoshopは行送り、CSSは行の高さ

行送りとは、文章が複数の行になっている時の、文字の基準とするラインから、次の行の文字の基準とするラインまでの距離を指す言葉です。対して、行間とは、その名の通り、行と行の間隔のことをいいます。なので、同じようで同じではありません。

そして、Photoshopの文字パネルで設定できるものは「行送り」になります。CSSで設定しているものは「行間」と呼ばれていますが、実際には、行間とは微妙に違うものになります。文字を含めた行の高さを設定しているようなものです。

Photoshopの行送り設定

1行目の文字のアンダーラインから、次の行の文字のアンダーラインが行送り。

CSSのline-height設定

CSSでは、line-heightのプロパティを用いて、行間を調整できるとされています。ただし、DTPでいうところの行間とは、微妙な違いがありますので、誤差について認識しておく必要があります。

たとえば、CSSの場合・・・

文字のサイズが24ピクセルで、line-heightを48ピクセルに設定した時、画面でみると、文字の上下に12ピクセルの余白が生まれます。CSSでは、見た目は行間のように見えているだけで、実際に指定しているのは、文字も含めた文章の行ボックスの高さなのです、ですから、48ピクセルの高さのボックスの中に、24ピクセルの文字を中央配置すれば、上下に12ピクセルの隙間が生まれます。

これが、Photoshopでデザインしているデザイナーを困惑させる、文字の上にできる謎の空白の正体です。

  • Photoshopの設定、行送り ・・・1行目の文字のアンダーラインから、次の行の文字のアンダーラインが行送り。
  • CSSの設定、line-height ・・・文章の行のボックスの高さの指定

CSSでは、line-heightの値から文字サイズの値を引いた差が、上下の余白となる。

※日本語版Photoshopの場合です。環境設定-テキストオプションで東アジアを選択、段落パネルで日本語基準の行送りにチェックが入っているとした場合を想定しています※

https://helpx.adobe.com/jp/photoshop/using/asian-type.html

この記事は、主に、駆け出しのWEBデザイナーさんや、Photoshopの操作になれていない方に読んで頂きたい記事ですが、クライアントさんにも読んでいただいて、CSSの設定とPhotoshopの設定は違うので、デザイン時点の状態と、完成した状態で、寸分違わず同じものを求めるのは、無理があるということを、ご理解いただけたら嬉しいです。