ウェブデザインは、グラフィックデザインとプリントデザインの世界から常にプリンシパルと定義を借りてきました。これは、ウェブのタイポグラフィや、ウェブページ上で文字の形を取得する方法に関しては特に当てはまります。これらの平行線は常に1対1の翻訳ではありませんが、一方の分野が他方の分野にどのような影響を与えているかは確かに分かります。これは、伝統的なタイポグラフィ用語 "leading"と "line-height"として知られているCSSプロパティの関係を考えるときに特に顕著です。
先導の目的
印刷されたページのためのタイポグラフィを作成するために人が手作業で金属または木製の手紙を使用すると、それらの線の間に間隔を作るために、鉛の薄い部分がテキストの水平線の間に配置された。大きなスペースが必要な場合は、より大きな鉛を挿入します。これが「先導」という言葉がどのように作り出されたかです。タイポグラフィのデザインやプリンシパルに関する書籍で「先導的」という言葉を見てみると、「連続したタイプのラインのベースライン間の距離」という効果が得られるはずです。
Webデザインをリードする
デジタル設計では、先頭の語はまだテキストの行間の間隔を参照するために使用されています。たとえ実際のリードが明らかにそれらのプログラムで使われていないとしても、多くのプログラムはこの正確な用語を使用します。これは、その原則の正確な実装が変更されたとしても伝統的なものから新しいデザインを借用する新しい形態の素晴らしい例です。
Webデザインに関しては、 "先導"というCSSプロパティはありません。その代わりに、このテキストの表示を扱うCSSプロパティをline-heightと呼びます。水平線のテキストの間にテキストに追加のスペースが必要な場合は、このプロパティを使用します。たとえば、内側のすべての段落の行の高さを増やしたいとします メインp { 線高さ：1.5;}
これは、ページのデフォルトのフォントサイズ（通常は16ピクセル）に基づいて、通常のラインの高さの1.5倍になります。 上で詳述したように、行の高さは、段落または他のテキストブロック内のテキストの行を配置するのに使用するのに適しています。行間に余白が少なすぎると、テキストが混乱し、閲覧者の目に触れにくくなる可能性があります。同様に、行がページ上で離れすぎていると、通常の読書の流れが中断され、その理由で読者があなたのテキストに問題を起こします。このため、使用する行高さの間隔を適切な値に設定する必要があります。実際のユーザーとデザインをテストして、ページの可読性に関するフィードバックを得ることもできます。 ヘッダーや段落の下を含む、ページのデザインに空白を追加するために使用する、パディングや余白に行の高さを混同しないでください。その間隔は先行していないため、行の高さで処理されません。 特定のテキスト要素の下にスペースを追加する場合は、余白またはパディングを使用します。以前使用していたCSSの例に戻って、次のように追加することができます： メインp { 線高さ：1.5; margin-bottom：24px;}
これは、私たちのページの段落のテキストの行間に1.5行の高さがあります（ メインp { 線高さ：1.5; パディングボトム：24px;} ほとんどの場合、前のCSSと同じことが表示されます。 リスト内のリスト項目の下に「services-menu」というクラスのスペースを追加したいとします。行の高さではなく余白やパディングを使用します。これは適切なことです。 .services-menu li { パディングボトム：30px;} 箇条書き項目ごとに複数の行に実行できる長時間のテキストがあると仮定して、リスト項目自体の内部にテキストの間隔を設定する場合は、ここで行高さを使用します。 ライン高さを使用する場合
線高さを使用しない場合
