<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.