CSS Mastery

Interactive demo

Responsive type scale playground

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

Live demo

Responsive type scale playground

Open demo page
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);
}

What this demo is for

Use this demo when typography looks responsive by viewport width but still fails as a readable text system.

Try this

  • Increase heading size until the headline starts to wrap awkwardly, then adjust measure instead of only shrinking type.
  • Move line height through the range and notice where body text becomes dense or disconnected.
  • Treat the sliders as constraints that need minimums and maximums, not as permission to make every value fluid.

Related guides