#css #tutorial #beginner

Day 4: Typography & Fonts

Day 4: The Voice of Tone

90% of the web is text. Styling it correctly makes the difference between “amateur” and “professional”.

Font Family

CSS uses a “stack” system. It tries the first font; if not found, it moves to the next.

body {
    /* Safe Stack */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

Loading Custom Fonts (Google Fonts)

  1. Go to fonts.google.com.
  2. Select a font (e.g., “Inter”).
  3. Copy the <link> code into your <head>.
  4. Use it in CSS: font-family: 'Inter', sans-serif;.

Sizing and Units

Stop using px for font sizes. Use rem.

  • 1rem = Default browser size (usually 16px).
  • 2rem = 32px.
  • 0.875rem = 14px.

Why? If a user changes their browser’s default text size (for accessibility), rem scales with it. px does not.

h1 { font-size: 2.5rem; }
p { font-size: 1rem; }

Weight and Style

  • font-weight: 400 (Regular), 700 (Bold).
  • font-style: italic / normal.
  • text-transform: uppercase / lowercase / capitalize.
  • text-decoration: underline / none.
.btn {
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none; /* Remove underline from links */
}

Line Height and Spacing

  • line-height: The space between lines. 1.5 is a gold standard for readability.
  • letter-spacing: Space between characters.
p {
    line-height: 1.6;
    color: #333; /* Dark gray is easier to read than pitch black */
}

Homework for Day 4:

  1. Pick a funky font from Google Fonts.
  2. Apply it to your h1 headings only.
  3. Keep your body text a clean sans-serif (like Arial or Inter).
  4. Experiment with letter-spacing on your headings.

Day 5: The Revolution… Flexbox!

← Previous
Day 3: The Box Model
Next →
Day 5: Flexbox Basics