Leverage CSS clamp() to define minimum, preferred, and maximum values for font-size and line-height. This eliminates complex media queries for basic scaling, ensuring your text remains legible and aesthetically pleasing on any screen size. Combine it with viewport units for optimal fluid scaling.
:root {
/* Fluid base font size: min 16px, preferred scales (1rem + 0.5vw), max 20px */
font-size: clamp(16px, 1rem + 0.5vw, 20px);
}
h1 {
/* Fluid H1 font size: min 40px, preferred scales (7vw + 1rem), max 80px */
font-size: clamp(2.5rem, 7vw + 1rem, 5rem);
line-height: 1.1;
}
p {
/* Fluid paragraph font size: min 16px, preferred scales (1.5vw + 0.5rem), max 20px */
font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
}