Use clamp() to define a minimum, preferred (fluid), and maximum font size. This ensures your text scales gracefully from small screens to large desktops, preventing both microscopic and gigantic text, while respecting user preferences without complex media queries.
body {
/* min-font-size, preferred-fluid-font-size, max-font-size */
/* Here, 1rem is the min, 2vw + 1rem is fluid, 2.25rem is max */
font-size: clamp(1rem, 2vw + 1rem, 2.25rem);
line-height: 1.6; /* Ensure good line-height for readability */
}
/* Example for a heading element */
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
line-height: 1.1;
}