vh and vw Font-Size

Viewport-percentage lengths is new font-size concept. This font-size change with browser width and height without media queries, so it is very useful in responsive web design.


vw: 1/100th viewport width
vh: 1/100th viewport height

For example if browser window size
width = 1000px and height = 800px

1vw = 1000*1/100 = 10px and 5vw = 1000*5/100 = 50px;
1vh = 800*1/100 = 8px and 5vh = 800*5/100 = 40px;


vmin & vmax Font-Size

This same as working in percentage format. But vmax take font-size of browser largest side 1/100th and vmni take font-size of browser smallest side 1/100th. This font-size not depend browser height or width.

vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side

For example if browser window size
width = 1200px and height = 800px

1vmax = 1200*1/100 = 12px and 5vmax = 1200*5/100 = 60px;
1vmin = 800*1/100 = 8px and 5vmin = 800*5/100 = 40px;