We often set our font-size like this

@talbcode

6.7K followers · usually 803 views a post

Views

4.3K

Likes

227

Comments

3

Shares

7

Selling · SaaS › Developer Tool

clamp() function

Why it worked

The video provides a concise and practical solution to a common web development problem (responsive font sizing) using a single, powerful CSS function. The clear explanation and live demonstration make it easy to understand and apply.

Summary

This video demonstrates how to use the CSS clamp() function to create responsive font sizes. It explains the three values (minimum, preferred, and maximum) and shows how resizing the browser window keeps the text scaling appropriately.

Structure

1Introduction to the problem of non-responsive font sizes
2Introducing the clamp() function
3Explaining the three values of clamp()
4Demonstrating the responsive scaling of text
5Teasing the next CSS trick

Product placement

The video demonstrates the use of the CSS `clamp()` function to control font size responsiveness.

Call to action

Follow for the next CSS trick.

On-screen text

index.html style.css body { height: 100vh; display: grid; place-items: center; font-family: sans-serif; background: #111; } .hero h1 { color: #ffff; /* font-size: 5vw; */ font-size: clamp(32px, 8vw, 80px); } font-size: clamp(32px, 8vw, 80px); 32px -> Minimum Value The Minimum Value means - the font size will never go below this value, no matter how small the screen gets. 8vw -> Preferred Value The Preferred Value is the size the browser tries to use based on the current viewport. 80px -> Maximum Value The Maximum Value means - the font size will never go above this value, no matter how large the screen gets. Learn CSS Faster

More from @talbcode

Their other posts in the index, biggest breakout first.

Transcript

We often set our font-size like this, but when the screen size changes, the text doesn't always stay responsive. So, how can you make it responsive with just one trick without using media queries? Let's check it out. First, use the clamp function for the font-size. Then provide three values: minimum value, preferred value, and maximum value. 32px -> Minimum Value. The Minimum Value means - the font size will never go below this value, no matter how small the screen gets. 8vw -> Preferred Value. The Preferred Value is the size the browser tries to use based on the current viewport. 80px -> Maximum Value. The Maximum Value means - the font size will never go above this value, no matter how large the screen gets. Now, resize the browser and you'll see the text automatically scales and stays perfectly responsive. That's CSS tricks number two. Follow for the next CSS trick.