Usually the size of text on a web page is defined using the
px units of measure, like this:
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
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.