<div class="container">
  <h1>Responsive Typography</h1>
  <p>A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.</p>
</div>
// 💡 CSS Nugget: Responsive Typography - 3 methods
// 🔗 https://codyhouse.co/nuggets/responsive-typography

// --------------------------------

// Method 1 👇 - old school

// --------------------------------

// h1 {
//   font-size: 2em;
// }

// p {
//   font-size: 1em;
// }

// @media (min-width: 48rem) {
//   h1 {
//     font-size: 3em;
//   }
  
//   p {
//     font-size: 1.25em;
//   }
// }

// --------------------------------

// Method 2 👇 - clamp()

// --------------------------------

h1, p {
  font-size: clamp(var(--min), var(--val), var(--max));
}

h1 {
  --min: 2em; // minimum value
  --val: 5vw; // preferred value = 5% viewport width
  --max: 3em; // maximum value
}

p {
  --min: 1em;
  --val: 2.5vw;
  --max: 1.5em;
}

// --------------------------------

// Method 3 👇 - multiplier

// --------------------------------

// h1 {
//   font-size: calc(2em * var(--text-multiplier, 1));
// }

// p {
//   font-size: calc(1em * var(--text-multiplier, 1));
// }

// @media (min-width: 48rem) {
//   :root {
//     --text-multiplier: 1.25;
//   }
// }

// demo
body {
  font-family: system-ui, sans-serif;
}

.container {
  padding: 2em;
  max-width: 720px;
  margin: 0 auto;
}

h1 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.25em;
}

p {
  line-height: 1.4;
  color: grey;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.