Usually the size of text on a web page is defined using the em or px units of measure, like this:

font-size: 16px;

The 16px value here defines the height of the invisible box text is rendered in.

This is often fine, but sometimes something a bit more dynamic would come in handy. For example, imagine being able to have the text on a page increase or decrease as the width of the viewport increased or decreased. That would come in handy, wouldn’t it?

Good news: You can do this with the vw unit.

font-size: 6vw;

This CSS defines the height of the invisible box text is rendered in as a percentage of the width of the viewport (vw stands for viewport width). That means text will get larger as the viewport width increases, and smaller as the viewport width decreases.

Give it a try, you’ll be surprised how useful and interesting it can be.