CSS — Fonts

Choosing typefaces

body {
    font-family: Georgia, "Times New Roman", serif;
}

The browser tries each font left to right, using the first installed one. Always end with a generic family (serif, sans-serif, monospace) as the safety net:

Georgia?  yes → use it
no → "Times New Roman"?  yes → use it
     no → whatever serif exists

Multi-word names need quotes.

Safe stacks that just work

/* Modern system sans — looks native everywhere, loads instantly */
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Classic serif for editorial feel */
.article { font-family: Georgia, Cambria, serif; }

/* Code */
pre { font-family: ui-monospace, Consolas, "Courier New", monospace; }

Web fonts: Google Fonts

Any font you want, loaded from a CDN:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet">

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

Rules of restraint:

1. Two families maximum — one for headings, one for body
2. Limit weights (400/600/700) — each weight is another download
3. display=swap shows fallback text immediately instead of invisible text

Font size

html  { font-size: 100%; }   /* = 16px user default */
h1    { font-size: 2.5rem; } /* 2.5 × root size */
small { font-size: 0.8rem; }

Why rem beats px: it multiplies the user's chosen base size, respecting their browser settings — an accessibility baseline. Use px only for hairline details.

Element	Typical rem
Body text	1rem (16px)
Small print	0.8rem
h3 / h2 / h1	1.25 / 1.75 / 2.5rem

Weight, style, line-height companions

.headline {
    font-weight: 700;        /* 400 normal · 600 semibold · 700 bold */
    font-style: italic;
    line-height: 1.2;        /* headings want tight leading   */
}
p {
    line-height: 1.65;       /* body wants generous leading   */
    letter-spacing: normal;
}

The shorthand

p {
    font: italic 700 16px/1.5 Georgia, serif;
    /*  style weight size/line-height family */
}

Compact but brittle — longhands are clearer while learning.

Mini Practice

1. Set up a system-ui stack on body; confirm zero network requests in DevTools
2. Add one Google Font for headings only; keep body on the stack
3. Convert an all-px stylesheet to rem sizes
4. Give paragraphs line-height: 1.65 and compare against 1.1 — feel why leading matters
5. Build a monospace code block styling

Next: icons →