Before this lesson
Understand the box model and class-based styling.
What you will be able to do
Choose units by purpose and establish readable typography, spacing and color relationships.
Understand the mechanism
A CSS pixel is not necessarily a physical screen pixel. rem relates to the root font size. For font-size, em relates to the parent; for many other properties it relates to the current element’s font size. Percentage references depend on the property. Choose a unit by deciding what change should cause the measurement to change.
Readability depends on font size, line height, line length and paragraph spacing together. Unitless line-height scales with each element’s own font size and is useful for inheritance. Extremely long lines make it harder to locate the next line; constrain prose width. Color should not be the sole carrier of link, error or selected-state information.
Runnable example
<style>
body{font-family:system-ui,sans-serif;font-size:1rem;line-height:1.7;color:#20362c;background:#fbfcf8}
article{max-width:65ch;margin:2rem auto;padding:1rem}
h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.2}
a{color:#286c4d;text-decoration:underline;text-underline-offset:.2em}
</style>
<article><h1>Readable learning notes</h1><p>Good typography supports long reading sessions without making every paragraph compete for attention.</p><a href="#more">Read the next section</a><h2 id="more">Keep a steady rhythm</h2></article>Trace and verify
Run this in a complete document and compare the heading at narrow and wide widths. clamp bounds a fluid value rather than letting it grow indefinitely. Change default text sizing or zoom and inspect whether content still fits. Toggle the link underline and consider whether links remain identifiable without relying on color.
Common mistakes and boundaries
Do not fix paragraph heights merely for visual alignment. Low-contrast gray is not automatically appropriate for secondary information. ch is based on a font metric and does not guarantee a particular number of Chinese characters per line. Font fallback can change widths, so test without your preferred font.
Practice challenge
Define body, heading and note sizes with clear hierarchy, then increase default text size and verify that nothing is clipped.
Reference solution and reasoning
Use rem for body text and bounded fluid sizing for headings. Keep notes legible. Let natural height and padding absorb changes instead of tuning fixed coordinates for one display. Test realistic Chinese and English paragraphs; short placeholders conceal wrapping problems.