What this lesson is about (and why you should care)

Fonts and typography in CSS3 = everything that makes text readable, beautiful, and responsive across devices.

Why it matters:

• Accessibility: readable text = usable site. (WCAG contrast, scalable fonts)
• Performance: web fonts can slow things down if you aren't careful.
• UX & brand: typography sets tone and hierarchy.

This builds on your knowledge of CSS variables (remember --primary-color?) and the box model: typography affects spacing, line boxes, and layout flow.

Core concepts you’ll use daily

1) Units: rem, em, px, vw — pick your fighter

• px — absolute; fine for icons or 1px borders but avoid for base font-size (breaks user scaling).
• rem — root-relative. Great for consistent scaling. If html { font-size: 16px } then 1.25rem = 20px.
• em — parent-relative. Useful for component-local scaling (like buttons inside a card).
• vw / vh — viewport units. Use for fluid headings but beware tiny viewports.

Micro explanation: use rem for global sizing, em for local components, vw/clamp() for fluid headings.

2) CSS Variables for typography (build on your variables knowledge)

Define a typographic system once and reuse it.

:root {
  --base-size: 16px;            /* fallback/seed */
  --scale-ratio: 1.25;         /* modular scale */
  --line-height: 1.6;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

html { font-size: var(--base-size); }
body { font-family: var(--font-sans); line-height: var(--line-height); }

This is where your colors/variables lesson pays off — make typography variables so you can change the whole rhythm in one place.

3) Fluid typography with clamp() (modern and magical)

Want headings that scale smoothly between mobile and desktop? Use clamp().

h1 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 3.5rem);
  line-height: 1.1;
}

This says: don't go below 1.5rem, try 2.5vw + 1rem for in-between sizes, and cap at 3.5rem.

4) Vertical rhythm & line-height (leading)

Consistency in spacing between baselines makes text feel tidy. A good default: line-height: 1.4–1.8 depending on size and measure.

• Long paragraphs → larger line-height.
• Headlines → tighter leading.

Tip: keep line-length ~45–75 characters. You control that with max-width on text blocks (e.g., max-width: 65ch).

5) Font loading & performance

• Use @font-face for custom fonts.
• Limit font weights/styles you load.
• Use font-display: swap to avoid invisible text (FOIT).
• Preload critical fonts with .

Example:

@font-face {
  font-family: 'InterVar';
  src: url('/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900; /* variable font range */
  font-style: normal;
  font-display: swap;
}

And in HTML:

<link rel="preload" href="/fonts/Inter-Variable.woff2" as="font" type="font/woff2" crossorigin>

Variable fonts = the compact, flexible hero. One file can replace many weights.

6) Accessibility: contrast, scaling, and user settings

• Contrast: aim for WCAG 4.5:1 for normal text, 3:1 for large text.
• Respect user preferences: don't block zoom. Use rems and avoid fixed px for base sizes.
• Media queries: @media (prefers-reduced-motion: reduce) and @media (prefers-contrast: more) for users who need them.

Small example checking contrast with variables (you already set colors earlier):

:root { --text: #222; --bg: #fff; }
body { color: var(--text); background: var(--bg); }

Check contrast of --text vs --bg using a tool or browser extension.

Practical patterns & code snippets

Responsive base size (easy win)

/* set base to 100% so user's browser settings apply */
html { font-size: 100%; }
body { font-size: 1rem; }

/* slightly larger on big screens */
@media (min-width: 1200px) {
  html { font-size: 112.5%; } /* ~18px */
}

Modular scale for headings

h1 { font-size: calc(var(--base-size) * var(--scale-ratio) * 3); }
h2 { font-size: calc(var(--base-size) * var(--scale-ratio) * 2); }

Or use rems + clamp() for modern responsive control.

Why do people keep misunderstanding typography?

• They treat fonts like decoration, not UX.
• They load 10 webfonts and wonder why the site is slow.
• They set everything in px and ignore accessibility and user zoom.

Imagine a visually stunning site where text is unreadably cramped on mobile — all the visuals are wasted. Typography is function masquerading as style.

Quick checklist before you ship

• Base font-size uses %/rem, not hard px.
• Web fonts are preloaded sparingly; font-display: swap.
• Use variables for font family, sizes, and line-height.
• Headings scale fluidly with clamp() or responsive rules.
• Contrast meets WCAG; line-length is comfortable (≤75ch).
• Test at different zoom levels and on real devices.

Final takeaways — the things you'll actually remember

• Use rem for consistency, em for local components, clamp() for fluid typography.
• Put typographic constants in CSS variables so one change ripples everywhere.
• Prefer system or variable fonts for performance, and always use font-display: swap.
• Typography is UI and UX: readable text = happy users.

"Good typography isn't noticed. Bad typography is memorable for all the wrong reasons."

Now go tweak your