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