Fluid type scale with clamp
CSS
:root {
--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
--step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
--step-2: clamp(1.44rem, 1.3rem + 0.7vw, 2rem);
--step-3: clamp(1.73rem, 1.5rem + 1.15vw, 2.66rem);
}
body {
font-size: var(--step-0);
line-height: 1.6;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
small { font-size: var(--step--1); }