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%.

A digression: contextomy is the word for taking something out of context, and thereby changing its meaning. An example is saying “Great minds think alike” (when two people think of the same clever thing) but leaving off “And fools rarely differ” (which implies maybe it’s not because the two people were particularly clever). We do the same with browsers. We say “it doesn’t have full browser support” but we neglect to add that that doesn’t stop us from using techniques where there is support. Maybe this is why we fail to make use of the many measurewment units we have at our disposal.

 

Relative units can be used to smoothly increase font size, eg font-size: calc(1em + .25vw). This gives a smoothly scaling display ideal for responsive web design.

 

Viewport units can be used in the same way as em, rem and px to manage various page elements. Font resizing presents the strongest case for using viewport units, but experiment with cases such as having a child element react to viewport resizing while a parent element remains unaffected.

 

Viewport units can be used to ensure websites fit in the browser, eg making a square design element look right in a rectangular viewport.

 

Viewport units can be used create a thumbnail of a site by embedding the page as an iframe.

 

In theory, viewport units will eventually render nothing when the screen reaches zero width or height. In reality things just get too big or small to be useful.

 

Of the browsers in current common use, the IE group has the least support for viewport units. IE8 has no support at all, while IE9 supports “vm” rather than “vmin”. IE10, IE11 and Edge do not support “vmax”.

 

Opera Mini does not support viewport units at all, and neither does Android 4.3, but viewport resizing on mobile devices is not very common, anyway.

 

vnice is not actually a real viewport unit – chalk that one up to poetic licence.