Typography base

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Typography base—the ideas, syntax, and habits you need before moving on in Foundation.

Foundation skills help when you inherit marketing sites built on Zurb’s grid system.

You will apply Typography base in contexts like: Large marketing sites, email-adjacent layouts, and legacy responsive redesigns.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Typography base in your own words.

Foundation sets readable defaults on headings, paragraphs, and lists—then exposes helper classes for marketing copy hierarchy without custom CSS on every page.

Common type helpers

h1–h6 — semantic heading sizes (can apply to non-heading elements sparingly)
lead — emphasized intro paragraph
subheader — de-emphasized supporting line under titles
text-center, text-right, text-justify — alignment
text-uppercase, text-lowercase, text-capitalize

Pair with HTML text content semantics: one h1 per view, logical heading order, and helpers only when design needs a visual tweak.

Self-check

When is lead appropriate?
Why keep real heading tags instead of only styling div elements?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Semantic headings kept?
Lead paragraph when?

No discussion yet. Be the first to ask a question.