ウェブサイトのテキスト「line-hight」設定は単位を外すのがおすすめ

About CSS

ウェブサイトを制作する際に、丁度良いテキストサイズを決めたら、必ず line-hight も設定しなければならない。読みやすいテキストを並べるためには必須事項である。

いざ「line-hight」を設定しようにも、どの単位を使えばよいのだろうか?

答えは「単位を外して設定」すること。これが一番わかりやすい。

p { line-hight: 1.5;}

こんな風に単位を外して記述するのがおすすめ。

単位を外す意味は・・・

ここがポイント!

上の例だと、line-hight は「1.5」です。これは、どんなサイズのフォントでも、そのフォントサイズの「1.5倍」分のサイズがテキストの余白…という意味になる。行間にできる余白をどれだけ確保するかにおいて、非常にわかりやすいのです。

したがって、1.8 ならばフォントサイズは、余白も入れて 1.8 倍分のサイズ。2.0 ならフォントサイズは、余白も入れて 2倍分のサイズ…という考え方になる。

これは、フォントサイズを絶対指定していようが相対指定していようが、かならず今表示されているフォントサイズの ○倍 に行間を設定してくれます。

フォントサイズ 18px で、line-hight が 1.6 だった場合、28.8px 分のフォント + 余白を入れたフォントサイズになる。この場合なら 10.8px 分が行間の余白となる。

実際にやってみるとその楽さがわかる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です