Specimen: Typography Scale

Overview

A responsive typography system built on the Utopia methodology, using CSS clamp() to create smoothly scaling text that adapts to any viewport without media query breakpoints.

Live Demo

Mode: Fluid

text-sm-fluid

Small text

text-md-fluid

Base text

text-lg-fluid

Large text

text-xl-fluid

XL text

text-2xl-fluid

2XL text

text-3xl-fluid

3XL text

text-4xl-fluid

4XL text

The Scale

Token	Min (320px)	Max (1240px)
`text-sm-fluid`	0.8rem	3rem
`text-md-fluid`	1rem	4rem
`text-lg-fluid`	1.25rem	5rem
`text-xl-fluid`	1.56rem	6rem
`text-2xl-fluid`	1.95rem	8rem
`text-3xl-fluid`	2.44rem	10rem
`text-4xl-fluid`	3.05rem	12rem

CSS Implementation

@theme {
  --text-sm-fluid: clamp(0.8rem, 0.17vw + 0.76rem, var(--text-sm-max));
  --text-md-fluid: clamp(1rem, 0.34vw + 0.91rem, var(--text-md-max));
  --text-lg-fluid: clamp(1.25rem, 0.61vw + 1.1rem, var(--text-lg-max));
  --text-xl-fluid: clamp(1.56rem, 1.02vw + 1.31rem, var(--text-xl-max));
  --text-2xl-fluid: clamp(1.95rem, 1.64vw + 1.54rem, var(--text-2xl-max));
  --text-3xl-fluid: clamp(2.44rem, 2.56vw + 1.8rem, var(--text-3xl-max));
  --text-4xl-fluid: clamp(3.05rem, 3.91vw + 2.07rem, var(--text-4xl-max));
}

Usage

<h1 class="text-4xl-fluid">Responsive Heading</h1>
<p class="text-md-fluid">Body text that scales smoothly.</p>