01 / THE BIG IDEA

Words have a visual personality

Imagine a luxury fashion website using a playful handwritten font for every heading, or a children’s activity page using tiny, tightly spaced text. The content might be perfectly good, but the typography would make the experience feel confusing.

Typography helps establish a visual tone while making information easier to understand. As designers, we need to consider both expression and readability.

02 / FONT FAMILIES

Choose a typeface that fits the project

CSS uses the font-family property to specify which typeface should display text. Different font families have different visual characteristics.

These are examples of common font categories. None is automatically better than the others. The right choice depends on the content, audience, and intended mood.

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-family: Georgia, serif;
}

This example uses a sans-serif typeface for body text and a serif typeface for the main heading. Try switching the two families to see how the page changes.

03 / FONT SIZE

Build a clear hierarchy

Not every piece of text should have the same visual weight. A page title should generally stand out from the body text, while smaller headings help organize sections.

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 1.75rem;
}

p {
  font-size: 1rem;
}

The font-size property changes the size of the text. These values use rem, a relative unit that scales with the document’s root font size.

04 / LINE HEIGHT

Give your text room to breathe

Line height controls the vertical space between lines of text. If lines are too close together, paragraphs can feel crowded. If they are too far apart, the text can feel disconnected.

p {
  font-size: 1rem;
  line-height: 1.7;
}

Try changing 1.7 to 1.2, then to 2. Observe how the paragraph changes. For many body-text designs, a line height around 1.5–1.8 is a useful starting point.

05 / FONT WEIGHT & STYLE

Use emphasis with intention

Font weight controls how thick or bold the characters appear. Font style can make text italic. These properties help establish emphasis without changing the actual content.

h1 {
  font-weight: 700;
}

.intro {
  font-weight: 600;
  font-style: italic;
}

To apply the second rule, add the class to a paragraph in your HTML:

<p class="intro">
  A short introduction to my project.
</p>

Remember that the class selector begins with a period in CSS, but the HTML class value does not include the period.

06 / TEXT ALIGNMENT & LINE LENGTH

Think about how people read

Text alignment changes how content sits within its available space. Left-aligned text is a reliable default for many English-language paragraphs because each line begins at a consistent position.

h1 {
  text-align: center;
}

p {
  text-align: left;
}

Other possible values include right and center. Use alignment to support the content rather than applying the same treatment to everything.

Why line length matters

Very long lines can be difficult to track from one line to the next. Limiting the width of a text container can make longer passages more comfortable to read.

p {
  max-width: 65ch;
  line-height: 1.7;
}

The ch unit is based on the width of the character “0” in the current font. It can be useful when setting a comfortable line length. This is an introduction; we will explore layout and spacing more thoroughly in Week 7.

07 / SYNCHRONOUS CLASS ACTIVITY

Give the same page three typographic personalities

During our live session, we will use one simple HTML page and explore how typography changes its visual identity. You will experiment with font family, size, weight, and line spacing.

Guided exercise

1. Open your Week 5 project in CodePen.
2. Choose a font family for the body text.
3. Choose a different font family for the main heading.
4. Set the size and weight of the main heading.
5. Set the body-text line height to approximately 1.7.
6. Experiment with left-aligned and centered headings.
7. Compare the different versions and explain which best fits your topic.

08 / INDEPENDENT PROJECT

Develop a typographic system

Continue working on your personal-interest website. This week, refine its typography so the title, section headings, and body text work together as a consistent system.

Project requirements

• Continue using your existing HTML and CSS project.
• Set a font family for the body text.
• Style the main heading and section headings.
• Establish a clear difference between headings and body text.
• Adjust paragraph line height for readability.
• Use font weight or style to create emphasis where appropriate.
• Make thoughtful decisions about text alignment.
• Check that the text remains readable in the CodePen preview.
• Submit your working CodePen link through D2L.

09 / SUBMISSION & REFLECTION

Explain your typography choices

Submit your CodePen link through the Week 6 assignment area in D2L. Check that your text is readable, your headings are easy to distinguish, and your existing page content and links still work.

Reflection questions

1. What personality did you want your typography to communicate?
2. Which change made the biggest difference to the readability of your page?
3. How did you decide which text should receive the most visual attention?

10 / QUICK REFERENCE

Typography properties from this week

11 / LOOKING AHEAD

Next week: The CSS Box Model & Spacing

We have established a visual identity and improved the typography. Next week, we will explore how CSS controls the space around and inside elements using margins, padding, borders, and dimensions.

As you browse websites this week, pay attention to how headings guide your attention, how paragraphs are spaced, and how typefaces contribute to the overall experience.