CSS Tutorial / CSS Fonts, Font Sizes, and Line Height

Use font-family to define a fallback font list, font-size to set text size, and line-height to control spacing between lines. A unitless line-height scales with each element's font size, making inherited text styles easier to manage.

Define an ordered font fallback list

body {

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

}

The browser checks the font list in order. If a font is unavailable or lacks a character, another font can render that character, so one sentence may use several fonts. sans-serif is a generic family without serifs, rather than a particular font product. Quote font names containing spaces.

Listing a font in font-family does not download it. This example uses installed fonts and loads no separate web font. To use a web font, supply its actual file through @font-face or a provider stylesheet, and check the URL and permission to use it. See MDN: font family.

Choose font size and weight for each role

rem is based on HTML font size. Different browser preferences can result in different pixel values for the same 1rem. Before changing the text to fixed px because the text looks small, check the root value and actual font. Even if the size is the same, the visual size and line break position vary depending on the font design. When selecting a unit, first distinguish between CSS Colors and Units: px, em, rem, and Percentages.

400 usually corresponds to normal, and 700 corresponds to bold. Results will vary depending on the weight provided by the font, and missing weights may be replaced with close values or synthesized. Important meanings in the document are expressed using HTML's strong, and visual thickness is controlled using CSS. Not all bold letters are semantically significant.

Compare unitless and em line-height inheritance

line-height helps determine a line box's height; it does not simply mean the empty gap between characters, and it is not the same as glyph height. Use margin separately for spacing between paragraphs. For further detail, see CSS Paragraph and List Styling.

Compare when the parent's font size is 16px and the child's font size is 32px. The parent's line-height: 1.6 inherits the multiple itself, resulting in a child's line height of 51.2px. line-height: 1.6em inherits the length of 25.6px calculated from its parent. If your child's large letters span multiple lines, the lines may appear crowded or overlapping.

These inheritance calculations assume the child has no separate line-height declaration. A value declared on the child takes precedence over an inherited one. A unitless baseline makes it easier to adjust heading and other text sizes while retaining proportional line height. See MDN: line height.

Limit the reading width

max-width: 65ch limits reading width using the advance width of the font's “0” glyph. It does not guarantee exactly 65 characters per line. Actual wrapping depends on the font, weight, characters, and available width. Choose a useful width by reading realistic long paragraphs.

The CSS length reference defines font-relative units, including ch, and explains their reference measurements. See MDN: length.

Check rendered fonts and computed values

Save the entire code below as UTF-8 to fonts.html and open it in your browser. Both small font paragraphs and 32px comparison paragraphs are included so you can check the relationship between size and line spacing.

<!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>

1. Select the body paragraph in Developer Tools. Computed's font-family is a list of candidates and is not guaranteed to be the actual font name in use. In Chrome·Edge, you can check the actual fonts used in Rendered Fonts under Computed. Other browsers may have different menu structures, such as a dedicated panel for fonts.
2. Compare the calculated line-height of two .large paragraphs. The unitless value is 51.2px and the em value is 25.6px. Change the second parent's 1.6em to 1.6 to see if the difference disappears, then revert.
3. Change the line-height of .copy to 1.2 and 1.8 respectively. Make sure the line placement changes while maintaining the font size. It's difficult to tell the difference just by looking at short one-line sentences, so use long paragraphs.
4. Change the max-width of main to 45ch. Check if the paragraph wraps earlier and then revert to 65ch. If your window width is already narrow enough, changing the upper limit may make a small difference.

The Chrome DevTools guide to local fonts also explains how to inspect Rendered Fonts. If the expected font is missing, check its installation and supported characters. For a separately linked web font, inspect its response and any blocking errors in Network. A locally installed font can be used without a network request, so an absent request alone does not indicate a font failure.