30-seconds-of-code/snippets/css/s/fluid-typography.md

title, type, language, tags, author, cover, dateModified

title	type	language	tags	author	cover	dateModified
Fluid typography	snippet	css	visual	chalarangelo	shell-focus	2021-05-16T11:23:05+03:00

Creates text that scales according to the viewport width.

• Use the clamp() CSS function to clamp the value of font-size between 1rem and 3rem.
• Use the formula 8vw - 2rem to calculate a responsive value for font-size (1rem at 600px, 3rem at 1000px).

<p class="fluid-type">Hello World!</p>

.fluid-type {
  font-size: clamp(1rem, 8vw - 2rem, 3rem);
}