<div class="container">
  <h1>Адаптивная типографика</h1>
  <p>Взгляд в какой-то далекий шар имеет силу пробудить и очистить наши мысли, как мелодия священной музыки, или благородная картина, или отрывок из великих поэтов. Это всегда приносит пользу.</p>
</div>
/* 💡 CSS Nugget: Адаптивная типографика - 3 способа */
/* 🔗 https://s-sd.ru/blog_studio_design/adaptivnaya-tipografika/ */

/* 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 */

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.