CSS講座 / フォント・文字サイズ・行の高さを指定する

CSS講座

font-familyでフォントの候補を順に並べ、font-sizeで文字サイズ、line-heightで行の高さを指定します。単位のないline-heightは倍率として継承されるため、子要素の文字サイズに応じた行高を保ちやすくなります。

フォントの候補を順番に並べる

body {

  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;

}

ブラウザーは候補を順に調べます。フォントがない、または特定の文字が収録されていない場合は別のフォントで描くため、一文に複数のフォントが使われることもあります。sans-serifは特定の商品名ではなく、セリフのない総称ファミリーです。空白を含むフォント名は引用符で囲みます。

font-familyに名前を書くこと自体にダウンロード機能はありません。この例はインストール済みフォントを使い、Webフォントを別に読み込みません。Webフォントには@font-faceや配布元のスタイルシートなどで実ファイルを指定し、URLと使用条件も確認します。MDNのfont-familyが候補とフォールバックを説明しています。

役割ごとにサイズと太さを決める

ルートが16pxなら本文の1remは16px、見出しの2remは32pxです。ブラウザーの基準値が違えば同じremでもピクセル値は変わります。小さく見えるからすぐ固定pxへ変える前に、ルートと実際のフォントを確認します。同じサイズでも字形によって見た目や改行位置が異なります。

font-weightの400は通常normal、700はboldに対応しますが、収録されたウェイトによって近い値や合成された太さが使われる場合があります。HTMLのstrongが示す重要性と、CSSで太く見せることは別です。

px・em・remの基準を選んだうえで、本文と見出しの役割に合わせてサイズや太さを調整します。

単位なしとemのline-heightを比較する

line-heightは行ボックスの高さに関係し、単に文字と文字の空白や字形そのものの高さではありません。段落と段落の外側の間隔はmarginで別に調整します。

親16px・子32pxで、子に別のline-height指定がない場合を比べます。親のline-height: 1.6は倍率を継承し、子の行高は51.2pxです。line-height: 1.6emは親で計算された25.6pxという長さを継承するため、子も25.6pxとなり、大きい文字の複数行が詰まる場合があります。

子への直接指定があれば継承より先に使われます。単位なしなら見出しの文字を大きくしても比例した行高を保ちやすくなります。MDNのline-heightと段落の余白を区別して読みます。

読みやすい行の長さを制限する

max-width: 65chは、フォントの数字0の送り幅を基準にした最大幅です。必ず一行65文字になる指定ではありません。実際のフォント、太さ、文字の種類、利用できる幅で改行が変わります。

現実的な長い段落を読み、行が長すぎないかを判断します。chなどのフォント相対単位の測定基準はMDNの長さのリファレンスで確認できます。

完全な例で計算値と描画フォントを確かめる

次の全体をUTF-8のfonts.htmlとして保存します。小さな本文と32pxの比較用段落を含み、文字サイズと行高を同時に比較できます。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Compare fonts and line spacing</title>

  <style>

    html { font-size: 100%; }

    body { margin: 24px; color: #333; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; }

    main { max-width: 65ch; }

    h1 { font-size: 2rem; font-weight: 700; }

    .copy { font-size: 1rem; font-weight: 400; line-height: 1.6; }

    .compare { font-size: 16px; margin-block: 24px; padding: 16px; background: #eef6f2; }

    .unitless { line-height: 1.6; }

    .length { line-height: 1.6em; }

    .large { margin: 0; font-size: 32px; }

  </style>

</head>

<body>

  <main>

    <h1>Small Garden fonts</h1>

    <p class="copy">The garden has plants that prefer sunlight and plants that grow in shade. Read their labels to find a suitable location for each one. Adjust the line spacing of this long paragraph to compare how easily the same text can be read.</p>

    <h2>Unitless line height</h2>

    <div class="compare unitless"><p class="large">Line spacing scales with the font size.</p></div>

    <h2>Line spacing specified by em</h2>

    <div class="compare length"><p class="large">The computed line height is inherited from the parent.</p></div>

  </main>

</body>

</html>

本文を開発者ツールで選びます。Computedのfont-familyは候補の一覧で、実際に使った名前の保証ではありません。Chrome・EdgeではComputed内のRendered Fontsで描画フォントを確認できます。他のブラウザーでは専用パネルなど配置が異なります。
二つの.largeのline-heightを比較します。単位なしは51.2px、em指定は25.6pxです。後者の親を1.6emから1.6へ変えて差が消えることを確認し、戻します。
.copyのline-heightを1.2と1.8へ変えます。文字サイズを保ったまま行の並びが変わることを長い文で確認します。
mainを65chから45chへ変えて折り返しが早くなるかを見て戻します。窓がすでに狭ければ上限を変えても差が小さい場合があります。

想定したフォントがなければインストールと収録文字を調べます。WebフォントならNetworkの応答やブロックエラーも見ますが、ローカルフォントは通信せず使えるため要求がないだけでは失敗と判断できません。

CSS講座