A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
<style>.demo { font-size: clamp(2rem, 5vw, 4rem); }</style><main class="demo">Example content</main>
The useful mental model here is practical: how glyph metrics, font weight availability, font style, and line-height change readable measure and component height. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Font Size, Weight, Style, and Line Height | Requesting font-weight: 650 does not guarantee a distinct face exists in the loaded font. Variable fonts can provide more continuous axes, while static families may map to nearby weights. |
| 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 |
A good CSS change narrows the problem. Set unitless line-height for text systems because it scales with the inherited font size; fixed lengths are more brittle when the type scale changes. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.demo { font-weight: 600; }</style><main class="demo">Example content</main>
Engineering judgment: Set unitless line-height for text systems because it scales with the inherited font size; fixed lengths are more brittle when the type scale changes.
A good CSS change narrows the problem. Set unitless line-height for text systems because it scales with the inherited font size; fixed lengths are more brittle when the type scale changes. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.demo { font-style: italic; }</style><main class="demo">Example content</main>
Italic note is useful here because it demonstrates font size, weight, style, and line height under a concrete input rather than as an abstract property list.
<style>.demo { line-height: 1.55; }</style><main class="demo">Example content</main>
Stable body measure is useful here because it demonstrates font size, weight, style, and line height 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.