Academy / Advanced Level: HTML and CSS

Advanced Responsive Web Design Techniques

Fluid Typography

Fluid typography scales text smoothly across different screen sizes, ensuring readability on all devices. You can achieve fluid typography by combining viewport units like vw with the clamp() function to create a balanced, responsive font size.

Example: Basic Fluid Typography

h1 {
  font-size: calc(16px + 2vw); /* Font size scales based on viewport width */
}

This scales the font size relative to the width of the viewport while ensuring that the text remains readable on both small and large screens.

Example: Fluid Typography with clamp()

The clamp() function sets a font size that adapts to the viewport, with defined minimum and maximum values to avoid extreme changes.

h1 {
  font-size: clamp(1.5rem, 2vw + 1rem, 3rem); /* Min size: 1.5rem, grows with 2vw, max size: 3rem */
}

In this example:

• The minimum font size is 1.5rem.
• The size grows by 2vw as the viewport width increases.
• The maximum font size is capped at 3rem.