CSSのline-heightプロパティを使用して読みやすさを向上させる

この記事では、CSSについて学習します line-height プロパティと、それを使用して視覚的に快適で読みやすいテキストを作成する方法。

line-heightが以前に使用されているのを見たことがあるでしょう。

p {
  font-size: 16px;
  line-height: 1.2;
}

しかし、それはどのように機能し、CSSでどのような役割を果たしますか？

CSSの活版印刷のルーツ

CSSの多くのアイデアは、タイポグラフィの分野から引き出されました。 1つの例は、ラップされたテキストの2つのベースライン間の距離を設定するCSS line-heightプロパティです。

「ベースライン」は、テキストが置かれている架空の線です。

たとえば、この短いテキストスニペットが <div> 鬼ごっこ：

<div>
  The alligator went for a swim in the deep lagoon.
</div>

ブラウザウィンドウをドラッグしてテキストを次の行に折り返すと、2つのベースラインと1行の高さ（黄色の矢印で示されます）が作成されます。

CSSの値が大きい line-height プロパティはこの距離を拡大し、値を小さくすると縮小します。

---

行の高さとテキストの読みやすさ

line-heightプロパティは、ユーザーがテキストを読みやすくする上で中心的な役割を果たします。 小さめの場合 line-height 混雑します。 このようなテキストを長時間読むと、ユーザーは疲れを感じるでしょう。

それが大きすぎると、ユーザーは自分が読んでいるものに夢中になっていると感じるのが難しくなります。

しかし、あなたが正しいものを見つけたとき line-height、あなたのテキストは広々として調和しているように感じます💮🌺🌸

正しいものを見つける line-height ニーズによって異なりますが、は、使用しているフォントファミリによっても異なります。これは、各フォントに独自の個性があり、テキストの実質的なブロックで異なる「読み取り」が行われるためです。

たとえば、HelveticaとTimesNewRomanでは異なるものが必要になります line-height 両方が同じであっても間隔 font-size.

行の高さの構文

line-height にあらゆる種類の値を指定できます！ また、一般的なCSSプロパティを受け入れることができるため、他のCSSプロパティとはまったく異なります。 px と % 値ですが、独自の「単位のない」値もあります。

/* Use browser default.
 Typically "1.2" for
 all the major browsers */
line-height: normal;

/* Unitless (only line-height can do this!) */
line-height: 1.2;

/* <length> values like px, rem, em, pt */
line-height: 3em;

/* <percentage> values */
line-height: 120%;

line-heightは黄色の矢印で示されています。

ブラウザが行の高さを計算する方法

パーセンテージまたは「単位のない」値を使用する場合、フォントサイズは結果に考慮されます line-height. たとえば、以下の両方のスニペットは次のように計算されます 19.2px ブラウザによる：

.myText {
  font-size: 16px;
  line-height: 1.2  /* (19.2px = 16 x 1.2) */
}

.myText {
  font-size: 16px;
  line-height: 120%;  /* (19.2px = 16 x 1.2) */
}

ただし、次のような「長さ」の値を使用する場合 px|em|rem|pt、 font-size の計算には使用されません line-height:

.myText {
  font-size: 16px;
  line-height: 20px;  /* Always 20px! */
}

結論

一般的に言って、良い line-height ほとんどのフォントの範囲は1.5〜1.7です。 たとえば、 Alligator.io は、1.6の線の高さを使用します。 それは科学よりも芸術であり、多くの場合、ブラウザの「開発者ツール」を開いて、 line-height 「ちょうどいい」と感じるまで✨👌