CSSにおける文字の大きさと行の高さ、複数行に渡る文章の行間の指定について

CSSでの文字の大きさ(高さ)と行の高さの指定は、下記のプロパティ(値)で指定する。

  • font-size:文字の大きさ(高さ)
  • line-height:行の高さ

また、上記指定の結果、複数行に渡る文章の行間の高さは
下記の式で決まる(求められる)。

行間高さ=「line-height」−「font-size」

文字の大きさの指定については、下記の通り。

キーワード em px
xx-large 172.8% 1.728em 27.6px
x-large 144.0% 1.440em 23.0px
large 120.0% 1.200em 19.2px
medium 100.0% 1.000em 16.0px
small 80.0% 0.800em 12.8px
x-small 64.0% 0.640em 10.2px
xx-small 51.2% 0.512em 8.2px

※0.875em≒14px


和文の場合はディセンダの分が下の空きに加わるため、上下の空きの違いが気になる場合がある。

その場合は、あえて「display:block」を指定して、上下のpaddingを
別々に指定することで空きを調整し、違和感がないようにすることができる。

欧文書体の詳細についてはこちらを参照Wikipedia
https://ja.wikipedia.org/wiki/%E6%9B%B8%E4%BD%93