10 Multimedia · 2026
Week 6 · Lesson 11

Typography on the Web — Fonts, Hierarchy, Readability

Week 6 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-2IND5-4IND5-5

Learning intentions

  • I can explain the difference between a typeface and a font.
  • I can import a Google Font and use @font-face correctly.
  • I can set a consistent type scale with font-size, line-height, font-weight.
  • I can use , , and
    semantic elements for attributed text.

Success criteria

  • I have imported one Google Font via link.
  • My headings (h1, h2, h3) have clear size hierarchy.
  • My body text has line-height 1.5-1.7 and max-width around 65ch.
  • I have used at least one of , , or
    semantic elements.

Do Now · 5 min

Pick two news articles — one pleasant to read, one that feels "off". What's different?

Hint: it's rarely the font itself. It's:

I Do · ~10 min Teacher demonstration

Step 1 — Typeface vs font (the distinction designers care about)

Typeface = the artistic design of letterforms (Helvetica, Georgia). Font = the file that delivers it (Helvetica.ttf, Georgia.woff2). Professionals say "I chose the typeface Inter" not "I chose the font Inter" — but "font-family" in CSS is named from the old typesetting world.

Step 2 — Importing Google Fonts

<!-- inside the HTML 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">

Step 3 — The font-family stack (ALWAYS include fallbacks)

body {
  /* First choice, then fallbacks, then generic keyword */
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

If Inter fails to load, the browser tries each next one. The last one is a generic keyword (serif, sans-serif, monospace, cursive) which always works.

Step 4 — The full font property list

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;              /* or 1rem */
  font-weight: 400;              /* normal = 400, bold = 700 */
  font-style: normal;            /* normal | italic | oblique */
  line-height: 1.6;              /* 1.5-1.7 is readable for body */
  letter-spacing: 0;
}

h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.75rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }

Step 5 — Shorthand font property (must be in this order)

/* style variant weight size/line-height family */
html {
  font: italic small-caps bold 14px/22px 'Inter', Helvetica, sans-serif;
}

Only font-size and font-family are required in shorthand.

Step 6 — @font-face for custom typefaces you host

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

body { font-family: 'MyCustomFont', sans-serif; }
Licensing warning: typefaces are creative work. Check the licence before hosting. Use Google Fonts (free, open licence) or Adobe Fonts (subscription) unless you're sure.

Step 7 — Semantic elements for text (use these!)

<p>The book <cite>Design of Everyday Things</cite> changed my thinking.</p>

<p>Steve Jobs said, <q>Design is not just what it looks like.</q></p>

<blockquote cite="https://fortune.com/...">
  <p>In most people's vocabularies, design means veneer...</p>
  <p><cite>— Steve Jobs</cite></p>
</blockquote>

These aren't about how the text looks. They're about what the text MEANS to a screen reader, a search engine, or a citation-indexing tool.

Industry readability rules (ship these in your portfolio)

  1. Body text: 16px minimum (18-20px often better on modern screens)
  2. Line-height: 1.5-1.7 for body, 1.2-1.3 for headings
  3. Line length: 60-75 characters — use max-width: 65ch
  4. Maximum 2 typefaces (one body, one heading — or one typeface at different weights)

We Do · ~15 min Guided build

Pair Inter (sans-serif for UI) with Playfair Display (serif for headings) — classic editorial combo:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
body { font-family: 'Inter', sans-serif; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }

Class discussion: when does this pairing work? When is it overkill? (Answer: it works for content-rich portfolios, news sites, editorial work. It's overkill for utilitarian dashboards.)

You Do · ~35 min Independent practice

Update your portfolio styles.css with thoughtful typography:

  1. Pick ONE font for body (Google Fonts)
  2. Pick ONE font for headings (can be same family at different weight)
  3. Set a type scale: h1 biggest, h2 medium, h3 smaller, body 16-18px
  4. Set line-height: 1.6 on body
  5. Set max-width: 65ch on your main reading container
  6. Use at least one of <cite>, <q>, or <blockquote> in your About section
  7. Test on your phone: is it readable?

Submit a "type spec" screenshot labelling h1, h2, h3, body and naming the font.

Differentiation

Support

3 pre-selected font pairings provided (e.g. Inter + Playfair Display, Poppins alone, Roboto Slab + Roboto). Pick one and apply.

Core

Choose fonts from Google Fonts independently with written reasoning.

Extension

Create a modular type scale using a ratio (1.25 = major third, 1.5 = perfect fifth). Use type-scale.com and generate a full scale. Apply using rem units.

Exit Ticket · 5 min

Exit ticket

1. What's the difference between a typeface and a font?

_______________________________________________________

2. What's the optimal line length for readable text?

a) 20-30 chars    b) 60-75 chars    c) 100+ chars

3. Your portfolio font choices:

Body font: _______________

Heading font: _______________

4. Bonus: which semantic element did you use today — cite / q / blockquote?

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.