AMDE 355 – Typography, Motion & Composition (Week 6)

Step 1A — Start with the content and semantic HTML

Begin with meaning before decoration. This sample gives students a headline, a supporting paragraph, and one action. Ask: What should the visitor notice first? What information supports that message? What is the action?

<!-- Start with the message. Do not style it yet. -->
<main class="poster">
  <p class="eyebrow">Independent Design Journal</p>
  <h1 class="headline">
    Ideas move
the world.
  </h1>
  <p class="intro">
    A journal about creative work, unexpected connections,
    and the people who make things happen.
  </p>
  <a class="action" href="#stories">
    Explore the stories <span aria-hidden="true">↗</span>
  </a>
</main>

Explain: the h1 is the primary message, the paragraph gives context, and the anchor is a real link. Classes let us style the roles without using HTML elements only because of how they look.

Step 2A — Create a type scale with CSS custom properties

Show students the hard-to-maintain version first: different font sizes scattered across selectors. Then replace the repeated values with named tokens. The names communicate intent and make global changes easier.

/* First, define a small and intentional type system. */
:root {
  --type-small: 0.8rem;
  --type-body: 1rem;
  --type-subhead: 1.5rem;
  --type-display: 3.5rem;
  --leading-body: 1.65;
  --leading-display: 0.98;
}

body {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.eyebrow {
  font-size: var(--type-small);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.headline {
  font-size: var(--type-display);
  line-height: var(--leading-display);
  letter-spacing: -0.045em;
}

Demonstration: change --type-display from 3.5rem to 4rem. Then change it back. Point out that the selector remains the same while the token controls the visual system.

Step 3A — Make the headline fluid with clamp()

First show the fixed-size version, then replace it with the fluid version. Resize the browser slowly so students can observe the difference.

/* This can look oversized on a phone. */
.headline {
  font-size: 3.5rem;
}

.headline {
  font-size: clamp(2.2rem, 6vw, 5.5rem);
  line-height: 0.98;
}

• 2.2rem: minimum size; the headline should not shrink below this.
• 6vw: preferred fluid size, based on viewport width.
• 5.5rem: maximum size; the headline stops growing beyond this cap.

Ask students to predict what will happen before resizing. Then have them test a narrow phone-width viewport, a tablet-width viewport, and a wide desktop viewport.

Step 4A — Control the reading measure and line length

Long lines are tiring to read. The ch unit roughly tracks the width of the “0” character in the current font, making it useful for setting a text column.

.intro {
  max-width: 62ch;
  font-size: var(--type-body);
  line-height: 1.7;
}

.poster {
  padding: clamp(1.25rem, 5vw, 4rem);
}

Before/after exercise: temporarily remove max-width and stretch the paragraph across the full screen. Restore 62ch. Ask which version feels easier to scan and why.

Step 5A — Add motion to a meaningful interaction

Start with a static link. Then add a small movement that signals interactivity. Avoid large, constant, or distracting motion; the effect should support the action rather than compete with the headline.

.action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 180ms ease, color 180ms ease;
}

.action:hover {
  transform: translateY(-3px);
}

.action:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

Test with a mouse, then press Tab to reach the link. Explain that hover feedback is not enough: keyboard users also need a visible focus state.

Try three values: change 180ms to 80ms, then 400ms. Ask which feels immediate, which feels sluggish, and whether the transition is noticeable without being distracting.

Step 6A — Respect reduced-motion preferences

Motion should not be required to understand the content. Add a reduced-motion rule so people who have requested less animation receive a calmer experience.

/* Keep the interaction understandable without movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Discuss: the headline, paragraph, and action still communicate the same information if movement is removed. Motion is an enhancement, not a substitute for structure or content.

Step 7A — Put the pieces together and inspect the result

Use this compact combined example to review the relationships between the tokens, fluid type, reading measure, and motion. Students do not need to memorize every value; they should learn to recognize what each rule controls.

:root {
  --ink: #172033;
  --accent: #b8f34b;
  --space: 1.25rem;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Arial, sans-serif;
}

.poster {
  padding: clamp(1.25rem, 5vw, 4rem);
  min-height: 70vh;
}

.headline {
  max-width: 12ch;
  font-size: clamp(2.2rem, 6vw, 5.5rem);
  line-height: 0.98;
}

.intro {
  max-width: 62ch;
  line-height: 1.7;
}

.action {
  background: var(--accent);
  color: var(--ink);
  padding: 0.8rem 1rem;
  transition: transform 180ms ease;
}

.action:hover {
  transform: translateY(-3px);
}

Live demonstration prompts

1. Change the accent token. Which parts of the composition update?
2. Increase the headline’s minimum size. At what viewport does the layout begin to feel crowded?
3. Remove the intro’s max-width. Compare reading comfort.
4. Temporarily remove the transition. Does the link remain understandable and usable?
5. Tab through the page. Can you always see where keyboard focus is?
6. Turn on a reduced-motion preference and confirm the experience still makes sense.

Instructor quick reference — What each decision does