Input
Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fluid Typography with clamp()</title> <style> /* Fluid typography using clamp() */ h1 { font-size: clamp(1.5rem, 5vw + 1rem, 3rem); /* Minimum 1.5rem, preferred 5vw + 1rem, max 3rem */ margin: 0; padding: 20px; text-align: center; color: #333; } /* Body text using fluid typography */ p { font-size: clamp(1rem, 3vw + 1rem, 2rem); /* Minimum 1rem, preferred 3vw + 1rem, max 2rem */ color: #666; } </style> </head> <body> <h1>Fluid Typography with clamp()</h1> <p>This text uses the clamp() function for fluid typography. It adjusts the font size based on the viewport width, staying within defined minimum and maximum limits.</p> </body> </html>