vw + vh === vnice

While hopefully saying vnice has gone the way of Internet Explorer, that demise of legacy IE has opened the way for using more progressive scaling in all aspects of Web Design. One of the greatest beneficiaries of the more accessible proportional scaling is Web Typography. In the continued flux of viewports, allowing those viewports to dictate scaling truly embodies the spirit of Responsive Design. And that IS very nice.

As legacy browsers are replaced by more modern versions, viewport units provide a way to manage the proportional scaling of web typography.

 

Viewport units are length units representing viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

 

We know these units are “new” because we have had articles telling us about them just this year. And last year. And the year before … in fact, back to 2012. We have just under-utilised them.

 

vw equals 1/100th of the width of the viewport.

 

vh equals 1/100 of the height of the viewport.

 

vmin equals whichever of 1vw or 1vh is smaller.

 

vmax equals whichever of 1vw or 1vh is larger.

 

Browser support for viewport units is generally good but not all units are supported in all browsers. If you just use vw and vh, support is 100%.