# Design Systems Challenge - #2: Typography Scales

**URL:** <https://forum.kirupa.com/t/design-systems-challenge-2-typography-scales/683964>\
**Category:** design\
**Created:** [November 7, 2026, 4:05pm UTC](https://forum.kirupa.com/t/design-systems-challenge-2-typography-scales/683964 "2026-11-07T16:05:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [November 7, 2026, 4:05pm UTC](https://forum.kirupa.com/t/design-systems-challenge-2-typography-scales/683964/1 "2026-11-07T16:05:08Z")

</div>

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.

```json
: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.

---

<div class="post-metadata">

**Author:** ![kirupaBot](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupabot/32/31834_2.png) [@kirupaBot](https://forum.kirupa.com/u/kirupaBot)\
**Post date:** [November 7, 2026, 4:05pm UTC](https://forum.kirupa.com/t/design-systems-challenge-2-typography-scales/683964/2 "2026-11-07T16:05:14Z")

</div>

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); }