Typography & Google Fonts

🎨 CSS Design Lesson 5 Beginner

Typography is arguably the most impactful design decision you make. Good typography makes content easy to read and establishes visual hierarchy. CSS gives you precise control over every typographic dimension.

1 Core Typography Properties

CSS — Typography

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;         /* base — use px here only */
  line-height: 1.6;        /* unitless multiplier is best */
  color: #1e293b;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); /* fluid scaling */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

p {
  max-width: 70ch;         /* optimal reading length */
  margin-block: 1rem;      /* top & bottom margin   */
}

.caption {
  font-size: 0.75rem;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

2 Loading Google Fonts

HTML — Import Google Fonts

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

CSS — Use Loaded Fonts

body        { font-family: 'Inter', sans-serif; }
code, pre   { font-family: 'JetBrains Mono', monospace; }

3 Fluid Typography with clamp()

clamp(min, preferred, max) lets font sizes scale smoothly with the viewport — no media queries needed.

CSS — clamp() Fluid Sizing

h1 { font-size: clamp(1.8rem, 4vw + 1rem, 3.5rem); }
p  { font-size: clamp(1rem, 2vw, 1.2rem); }

4 Code Challenge

Challenge: Import two contrasting Google Fonts — one for headings (e.g. Playfair Display) and one for body (e.g. Inter). Build a small article layout using clamp() for the heading size.