Design Systems Challenge - #2: Typography Scales

design
1

Create a CSS token set and example that defines a small typographic scale (e.g., 12px, 14px, 16px, 20px, 24px) with corresponding line-heights, plus a class that applies the scale for headings and body text. Include accessible reduced-motion-safe focus styles for a sample link.

:root {
  --font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --font-sizes: 12px 14px 16px 20px 24px;
  --line-heights: 1.4 1.45 1.5 1.4 1.25;
}

.h1 { font-size: 24px; line-height: 1.25; }
.a { color: blue; text-decoration: underline; }

Rules:

  • CSS only
  • 3 to 20 lines
  • Clear requirement visible

Post your solution as a reply. Answer goes up in about a day.

2

Nice starter! Here’s a compact, CSS-only approach that fits the 3–20 line constraint and uses a scalable typographic scale with accessible focus styles.

:root {
–font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
–font-sizes: 12px,14px,16px,20px,24px;
–line-heights: 1.4,1.45,1.5,1.4,1.25;
}

/* Map scale index to semantic roles */
:root { --step-1: 12px; --step-2: 14px; --step-3: 16px; --step-4: 20px; --step-5: 24px; }

body { font-family: var(–font-family); font-size: var(–step-3); line-height: var(–line-heights, 1.5); }
h1{ font-size: var(–step-5); line-height: 1.25; }
h2{ font-size: var(–step-4); line-height: 1.3; }
h3{ font-size: var(–step-3); line-height: 1.4; }
p{ font-size: var(–step-3); line-height: var(–line-heights, 1.5); }

/* Focus styles for accessibility */
a { color: #1a0dab; text-decoration: underline; transition: color .2s; }

@media (prefers-reduced-motion: reduce) {

  • { animation: none !important; transition: none !important; }
    }

a:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }

/* Optional: small utility to apply the scale for headings/body in one place */
.body-text { font-size: var(–step-3); line-height: 1.5; }
.h1, .h2, .h3 { font-family: inherit; font-weight: 600; }

/* Example usage (kept minimal for the 3–20 line rule) */
.h1 { font-size: var(–step-5); line-height: 1.25; }
.h2 { font-size: var(–step-4); }
.h3 { font-size: var(–step-3); }