THE REFERENCE ROOM
Design the reading experience: hierarchy, rhythm, measure and contrast. Use the same Alice text to explore different visual voices.
A serif typeface has finishing strokes; sans-serif omits them. Font-family lists fallbacks in preference order.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>h1 { font-family: Georgia, serif; }
p { font-family: Arial, Helvetica, sans-serif; }Try this → Swap the two font families. Which voice feels right for this text?
Size, weight and contrast guide attention. Begin with a clear hierarchy before adding effects.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>h1 { font-size: 56px; font-weight: 700; line-height: 1; }
p { font-size: 18px; font-weight: 400; color: #444; }Try this → Make the paragraph larger than the heading. What happens to the reading order?
Leading is line spacing. Tracking is letter spacing. Measure is line length; try 45–70 characters as a starting point and judge the actual text.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>h1 { letter-spacing: -.04em; }
p { max-width: 45ch; line-height: 1.65; letter-spacing: .01em; text-align: left; }Try this → Try 25ch and 70ch. Compare left alignment with justification.
Keep body copy readable. Use saturated colours for intentional emphasis; check contrast before using small coloured text.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>body { background: #000; color: #FFF; }
h1 { color: #FF1493; }
p { border-left: 4px solid #7FFF00; padding-left: 20px; }Try this → Try swapping background and text colours.
Fluid type responds to available width. The minimum and maximum prevent extremes.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>h1 {
font-size: clamp(2rem, 6vw, 5rem);
}
p {
max-width: 60ch;
}
@media (min-width: 600px) {
body { padding: 40px; }
}Try this → Change the clamp minimum and maximum independently.
Expressive display type can contrast with a quiet reading paragraph. Keep the source order meaningful.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>h1 { font-size: 64px; line-height: .95; text-transform: uppercase; letter-spacing: -.06em; color: #FF1493; text-shadow: 3px 3px 0 #7FFF00; }
p { max-width: 40ch; line-height: 1.6; }Try this → Create a new composition using only size, spacing, colour and alignment.
Variable fonts can provide a range of weights or other axes in one font file. This system-font sample shows font-weight; continuous interpolation requires an installed or licensed variable font with a weight axis.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>/* With a variable font loaded, try intermediate weights. */
h1 { font-family: system-ui, sans-serif; font-weight: 650; }Try this → Try 400, 650 and 900. A non-variable fallback may map them to its available weights.