この記事では、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とTimes New Romanは、両方が同じfont-sizeであっても、異なるline-height間隔を必要とします。
行の高さの構文
line-height にあらゆる種類の値を指定できます！ また、一般的なpxおよび%値を受け入れることができるため、他のCSSプロパティとはまったく異なりますが、独自の「単位のない」値もあります。
/* 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を少しずつ動かします✨👌
詳細については、MDNにアクセスして、line-heightに関するドキュメントを参照してください。
