Interactive demo

Responsive type scale playground

Tune reading measure, heading size, and line height without hiding the constraints from the page.

Expected behavior

Sliders update the preview immediately while measure and line height remain explicit CSS constraints.

Accessibility notes

Range controls use visible labels and the preview is regular document text, not a canvas image.

CSS used in this demo

.tool {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem;
}

form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

input {
  accent-color: #0f8b8d;
}

.preview {
  --heading: 48px;
  --leading: 1.45;
  --measure: 62ch;
  max-width: var(--measure);
  border: 2px solid #171717;
  border-radius: 8px;
  background: #ffffff;
  padding: 1.5rem;
}

.kicker {
  color: #0a6a6c;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.preview h1 {
  margin: 0.25rem 0 1rem;
  font-size: var(--heading);
  line-height: 1.05;
}

.preview p:last-child {
  margin: 0;
  font-size: 1.1rem;
  line-height: var(--leading);
}