CSS Typography and Web Fonts

Typography is one of the highest-leverage things you can get right on a web page — good font choices, sizes, and spacing make text dramatically easier to read, while poor typography makes even great content feel unprofessional. CSS gives you full control over which fonts load and exactly how text is rendered.

Font Family and Fallback Stacks

font-family accepts a comma-separated list, not just one font. The browser tries each one in order until it finds one installed or loaded, which is why you should always end the list with a generic family like sans-serif as a safety net.

body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

If "Inter" isn't available, the browser falls back to "Helvetica Neue", then Arial, and finally to whatever generic sans-serif font the system provides — so text never fails to render even if your preferred font doesn't load.

Loading a Web Font

Most sites use a web font rather than relying on fonts users already have installed. Google Fonts is the simplest way to do this — link its stylesheet, then reference the font name in your CSS.

<!-- in the HTML <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

body {
  font-family: "Inter", sans-serif;
}

The wght@400;700 part requests only the regular (400) and bold (700) weights, keeping the download small — only request the weights you'll actually use. display=swap tells the browser to show fallback text immediately and swap in the web font once it loads, rather than leaving text invisible while it waits.

Size, Weight, and Line Height

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

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

Notice the body text uses a looser line-height (1.6) than the heading (1.2) — paragraphs of running text need extra vertical breathing room between lines to stay comfortable to read, while large headings look better tightly packed. A line-height under about 1.4 on body text is a common readability mistake.

Other Useful Text Properties

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
}

This renders a small, bold, uppercase label with slightly widened letter spacing — a common pattern for a short category tag sitting above a page heading. letter-spacing set in em here is intentional: it scales proportionally with this specific element's own font size, which is exactly the kind of case where em is the better choice over rem.

---