Color & Typography

Pick colors with intent and set typography that actually reads well. Learn HSL/OKLCH, web fonts, and the rhythm of line-height and letter-spacing.

colorfonttypographyGoogle Fonts

Duration

⏱ About 1.5 hours

Level

📊 Beginner

Prerequisite

🎯 css-01

OUTCOME

Page typography that is comfortable to read and consistent across browsers

What you'll learn

1Use hex, rgb, hsl, and oklch color formats
2Load custom fonts via Google Fonts or @font-face
3Set sensible line-height for body text (1.5–1.7)
4Use variable fonts for finer weight control

1. Color Formats

css

h1 { color: #2563eb; }            /* hex */
h2 { color: rgb(37, 99, 235); }   /* rgb */
h3 { color: hsl(217, 91%, 53%); } /* hue, saturation, lightness */
h4 { color: oklch(0.6 0.2 250); } /* modern, perceptually uniform */
footer { color: rgba(0,0,0,0.5); }

Prefer hsl/oklch when you want to derive related shades (lighten, darken) — the math is intuitive.

2. Web Fonts (Google Fonts)

html

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

css

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1f2937;
}

3. Typography Properties

Property	Description
font-size	Use rem for accessibility (1rem = root font size)
font-weight	100–900 or keywords (normal=400, bold=700)
line-height	Unitless 1.5–1.7 for body text
letter-spacing	Tighten or open up tracking
text-align	left \| center \| right \| justify
text-transform	uppercase \| capitalize \| lowercase

4. CSS Custom Properties for Color Tokens

css

:root {
  --color-text: #1f2937;
  --color-accent: #2563eb;
  --color-bg: #ffffff;
}
body { color: var(--color-text); background: var(--color-bg); }
a { color: var(--color-accent); }

💡

Custom properties shine for dark mode: define a different :root for [data-theme="dark"] and you swap entire palettes instantly.

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗