MoreLesson 203Free preview

Responsive Text

This lesson is part of How To · All levels

Summary

Responsive text is adjusted to the screen width to be easy to read on mobile or desktop. The clamp() function allows setting the minimum size, viewport-based ideal size, and maximum size in one declaration. This approach is much more concise than writing multiple media queries for each screen size.

Key points

Clamp(min, ideal, max) limit the size of the text to a safe range
The unit vw makes the measurement follow the width of the viewport
Always set a minimum limit so that text is not too small on a narrow screen
Use the brake unit for the limit to respect the user font size settings

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.