Responsive web-development tricks

To make your web-page fonts increase/decrease as the browser window dimensions change use viewport-based values instead of %, ems, pxs or pts.

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmax = 1vw or 1vh, whichever is larger
1vmin = 1vw or 1vh, whichever is smaller


h1 {

font-size: 4vw;

h2 {

font-size: 3vh;

h3 {

font-size: 2vmax;

p {

font-size: 2vmin;


Leave a Reply

Your email address will not be published. Required fields are marked *