A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
<style>.demo { text-align: center; }</style><main class="demo">Example content</main>
In production, Large positive letter spacing can make lowercase prose harder to read. Tracking is usually a display-treatment tool, not a substitute for a better font size or measure. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Text Alignment, Spacing, and Decoration | Large positive letter spacing can make lowercase prose harder to read. Tracking is usually a display-treatment tool, not a substitute for a better font size or measure. |
| Production test | Real content and constraints | The rule works only for the demo values |
| Maintenance | Scope and override path | A later fix creates another exception |
The useful mental model here is practical: how alignment, indentation, letter spacing, word spacing, and decoration affect text rhythm. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
<style>.demo { letter-spacing: 0.08em; }</style><main class="demo">Example content</main>
Engineering judgment: Use max-width in ch for text-heavy regions when the glyph count matters more than an absolute pixel width.
In production, Large positive letter spacing can make lowercase prose harder to read. Tracking is usually a display-treatment tool, not a substitute for a better font size or measure. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
<style>.demo { max-width: 65ch; }</style><main class="demo">Example content</main>
Readable paragraph is useful here because it demonstrates text alignment, spacing, and decoration under a concrete input rather than as an abstract property list.
<style>.demo { text-decoration: underline; text-underline-offset: 0.18em; }</style><main class="demo">Example content</main>
Underlined link is useful here because it demonstrates text alignment, spacing, and decoration under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 20 XP.