Fonts and Typography

Most of the web is text, so typography matters more than anything else you'll style.

body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
  line-height: 1.15;
  font-weight: 700;
}

em { font-style: italic; }

font-family and font stacks

A font stack lists fonts in order of preference. The browser uses the first one available on the visitor's device and ends with a generic family as a fallback:

Quote font names that contain spaces. Web fonts that you download come in Level 2.

Size, weight, and style

• font-size — use rem. Headings can be large; body text should be at least about 16px.
• font-weight — 100 to 900; normal = 400, bold = 700. A font only has the weights it ships; the browser fakes missing bold with a thicker "synthetic" bold.
• font-style — normal, italic.

line-height

Use a unitless number. It's multiplied by each element's own font size, so it scales correctly for nested text:

<style>
  .unitless { font-size: 16px; line-height: 1.5; }
  .with-unit { font-size: 16px; line-height: 1.5em; }
  .unitless h2, .with-unit h2 { font-size: 32px; }
</style>
<div class="unitless"><h2>Heading</h2></div>
<div class="with-unit"><h2>Heading</h2></div>
<script>
  console.log("unitless:", getComputedStyle(document.querySelector(".unitless h2")).lineHeight);
  console.log("1.5em:   ", getComputedStyle(document.querySelector(".with-unit h2")).lineHeight);
</script>

unitless: 48px
1.5em:    24px

With 1.5em, the parent computed 24px and the big heading inherited that fixed value — its lines overlap. The unitless value is inherited as the factor 1.5, giving 48px.

The font shorthand

p { font: italic 700 1.125rem/1.5 Georgia, serif; }

Order: style, weight, then size/line-height and family (required, last). The shorthand resets any sub-property you leave out.

Readable text

• Line length around 45–75 characters: max-width: 65ch.
• Line height of 1.4–1.7 for body text, tighter for large headings.
• Enough contrast, and not too thin a weight for small text.

Practice

Style code elements with a monospace stack at 0.9em, and .caption with a smaller, italic, gray, sans-serif style.

code {
  font-family: ui-monospace, Consolas, Menlo, monospace;
  font-size: 0.9em;
}

.caption {
  font: italic 0.875rem/1.4 system-ui, sans-serif;
  color: #555;
}