Precise typography design on the web has never been easier with specialized units of measure. When you want beautiful typography to display no matter what the screensize is, there are vh and vw style settings. This controls the width and height of an elements no matter the viewport size.
Some control was gained with percentage-based units, but these were based on the parent element. Vw and vh are length units representing 1% of the viewport size for viewport width (vw) and viewport height (vh), respectively. Vh and vw style units are based on the viewport so a shift of thinking will help because you’ll need to think in terms of the viewport rather than the parent element.
For example, if the browser’s height is 1,000px, 1vh would evaluate to 10px. Similarly, if the viewport width is 850px, 1vw would evaluate to 8.5px.
As you can see, when you make the browser window smaller, the type sizes along with it. In the example below, I styled the text container with a width of 100vw and then sized the text to be large.
As always, there’s no better way to learn than by experimenting.
Leave a Reply