Photoshopの行送り・行間からline-heightへの変換

Photoshopの行送りとCSSのline-heightの変換

行送りとは

文字の大きさ+次の段までの間隔を足した値
段の始まりから、次の段までの長さ


この例では、

  • 行送り30px
  • 文字サイズ18px
  • 行間隔12px


line-heightへ変換する

行送り÷文字サイズ = line-heightになる

P{
font-size: 14px;
line-height: 1.7em;
}
</style>
<p>
	見たもの聞いたものを、絵にします。<br>
農業やお店、物づくりなどの仕事、つたえたいこと。<br>
見る形にしてみませんか。
</p>