Lesson 06 / Typography
CSS Text Styling
Use CSS font and text layout properties to control the appearance, spacing, and alignment of text.
Course Role
Core
Part of the main course path. Prioritize this before moving to optional polish or deeper references.
Teacher Notes / In-Class Use
Demo Live
- Walk through the interactive demo before students start changing their own project files.
- Connect the demo back to the first goal: Use font style properties like color, font-family, font-size, font-style, and font-weight
Try In Class
- Style `body`, `h1`, `h2`, `p`, `a`, and `.eyebrow` on an existing page.
- Have students make one visible change, save, refresh, and explain what changed.
Submit Or Check
- Ask students to show the work in the browser, not only in the editor.
- Have students commit their progress with a clear message when the checkpoint is stable.
Watch For
- Students copying code without checking file paths, spelling, or capitalization.
- Visual changes that work locally but break when the project is published.
Learning Goals
- Use font style properties like color, font-family, font-size, font-style, and font-weight
- Use text properties like transform, decoration, shadow, alignment, line-height, letter-spacing, and word-spacing
- Connect text styling decisions to readability and visual hierarchy
Interactive Demo
How to use this demo.
Use the demo as a small lab. Change one thing, observe the result, then connect it back to your own project.
What To Try
- Change one text property at a time and watch how readability and hierarchy shift.
- Try a risky combination, such as centered paragraphs, no link underline, uppercase text, or heavy shadow, then tune it back.
What Changes
- The preview updates color, alignment, transform, decoration, line height, letter spacing, and shadow.
- The warning text calls out readability and accessibility risks as the generated CSS changes.
What To Notice
- Text styling is not only decoration; it affects scanning, reading, link recognition, and accessibility.
- Small choices like line height, underline, and alignment can make a page feel much clearer.
Apply It
- Use the generated CSS as a starting point, then test one paragraph and one link in your own project.
Interactive Demo
Text Styling Lab
Adjust text properties and compare readability, hierarchy, link clarity, and generated CSS.
Course Resource
Designing readable web pages
Text styling should help people scan headings, read paragraphs, identify links, and understand emphasis without fighting the page.
A clear resource link needs more than color alone, especially inside paragraph text.
Readable starting point.
.text-block { line-height: 1.6; }This demo uses extra JavaScript for teaching. The code sample shows the pattern to practice. View full demo source.
Why Text Styling Matters
Text styling affects how quickly people can read, scan, and understand a page.
Good typography creates hierarchy, supports the tone of the site, and keeps content accessible across screen sizes and devices.
Typography System Starter
A typography system gives your site consistent defaults for body text, headings, links, and small labels.
body {
font-family: Arial, Helvetica, sans-serif;
color: #1f2937;
line-height: 1.6;
}
h1 {
font-size: 2.5rem;
line-height: 1.1;
}
h2 {
font-size: 1.75rem;
}
a {
color: #0b55b7;
text-decoration: underline;
text-underline-offset: 0.2em;
}Text Styling Property Groups
Text properties are easier to learn when you group them by purpose.
| Purpose | Properties | What to ask |
|---|---|---|
| Color and contrast | color | Is the text easy to read against the background? |
| Font choice | font-family | Does the font match the tone and stay readable? |
| Size and scale | font-size | Can people scan headings and read body text comfortably? |
| Weight and emphasis | font-weight, font-style | What needs emphasis, and is it used consistently? |
| Links and decoration | text-decoration, text-underline-offset | Can users tell what is clickable? |
| Spacing and rhythm | line-height, letter-spacing, word-spacing | Does the text have enough breathing room? |
| Alignment | text-align | Does the alignment support reading, especially for long text? |
Font Styles
Font styles affect the appearance of text within your HTML elements. Start with readable defaults, then adjust headings, links, and special labels.
color
color updates the foreground color of the text. It also affects the color of associated underlines included with text-decoration.
Choose colors with enough contrast against the background. Text color is not just decoration; it directly affects readability.
p {
color: #1f2937;
}font-family
font-family sets the font for your text. Use readable fonts and always end the font stack with a generic family.
The font stack is a list of fonts, from left to right, that the browser will try to load.
Common generic families include sans-serif, serif, and monospace.
body {
font-family: Arial, Helvetica, sans-serif;
}font-size
font-size sets the size of text. For most project typography, rem is a flexible default because it responds to the root text size.
Avoid setting body text too small. A common starting point is 1rem for paragraphs.
px: Fixed size. Useful for small details, but less flexible for type systems.em: Relative to the parent element.rem: Relative to the root element. Usually a good choice for font sizing.
h1 {
font-size: 2rem;
}font-style
font-style is often used to toggle italics for emphasis or citations.
em {
font-style: italic;
}font-weight
font-weight controls the boldness of text using keywords or numeric values from 100 to 900.
Use a small set of weights consistently. Too many weights can make a page feel noisy.
strong {
font-weight: 700;
}Heading Hierarchy Example
Use size, weight, and line height to make headings feel related but clearly ranked.
h1 {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.1;
}
h2 {
font-size: 1.75rem;
font-weight: 700;
line-height: 1.2;
}
p {
font-size: 1rem;
line-height: 1.6;
}text-transform
text-transform applies casing transformations to text.
It works well for short labels, eyebrows, or buttons. Avoid using all caps for long paragraphs because it becomes harder to read.
.eyebrow {
text-transform: uppercase;
}text-decoration
text-decoration controls underlines and other text lines. It is often used to style link underlines.
Links should remain visually identifiable. If you remove an underline, replace it with another strong cue such as color, weight, or a clear hover/focus style.
a {
text-decoration: underline;
text-underline-offset: 0.2em;
}text-shadow
text-shadow applies shadow to text with horizontal offset, vertical offset, blur, and color.
Use text shadows sparingly. Heavy shadows can make text harder to read.
h1 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}Text Layout
These properties affect spacing and alignment of text:
text-align
text-align aligns text left, right, center, or justify.
Centered text can work for short headings, but long centered paragraphs are harder to read.
p {
text-align: center;
}line-height
line-height controls spacing between lines. Use unitless values like 1.5 or 1.6 for better scalability.
Comfortable line height is one of the quickest ways to make paragraphs easier to read.
p {
line-height: 1.5;
}letter-spacing
letter-spacing controls spacing between letters.
It is useful for short uppercase labels, but too much spacing in paragraphs can harm readability.
.label {
letter-spacing: 0.08em;
}word-spacing
word-spacing controls spacing between words.
It is rarely needed in everyday typography. Use it carefully and test readability.
p {
word-spacing: 0.1em;
}Good vs. Risky Text Styling
| Pattern | Example | Why |
|---|---|---|
| Good | line-height: 1.5; | Unitless line height scales well and improves readability. |
| Risky | letter-spacing: 0.2em; on paragraphs | Large letter spacing makes long text harder to read. |
| Good | Underlined links | Users can quickly identify clickable text. |
| Risky | text-decoration: none; with no replacement cue | Links may look like normal text. |
| Good | font-size: 1rem; for body text | Body text starts at a readable default size. |
| Risky | font-size: 12px; for paragraphs | Small text can be hard to read, especially on mobile. |
| Good | One or two font weights | The page feels consistent and intentional. |
| Risky | Many unrelated weights and styles | The visual hierarchy becomes noisy. |
Common Mistakes
| Mistake | Why it matters | Better approach |
|---|---|---|
| Body text is too small | Small text slows reading and can create accessibility problems. | Start body text around 1rem and adjust carefully. |
| Low contrast text | People may struggle to read the content. | Choose colors with strong contrast against the background. |
| Too many font weights | The page can feel inconsistent. | Use a limited set, such as 400, 700, and maybe 800. |
| Centered long paragraphs | The eye has to search for the start of each line. | Use left-aligned paragraphs for longer reading. |
| All caps paragraphs | Long uppercase text is harder to read. | Reserve uppercase for short labels. |
| Removed link underlines | Clickable text may become hard to identify. | Keep underlines or add another clear cue. |
| Heavy text shadow | Decorative effects can reduce readability. | Use subtle shadows only when they improve contrast or style. |
Checkpoint
Before moving on, make sure these feel true.
- I can explain the main concept in my own words.
- I can apply this lesson to my current project.
- I can verify the result in the browser.
- I can commit the change with a clear message.
Project Connection