<tutorialjinni.com/>

Responsive Font Size Scaling CSS

Posted Under: CSS3, Programming, Responsive, Tutorials on Feb 4, 2017
Websites needs to be responsive now a days. Responsive does not only mean there structure adapt itself according to the device but the font should also be scaled accordingly. One way of achieving font scaling or responsive is by using CSS media queries. There is another more fluid and streamlined way of making font responsive by using new CSS3 units vw viewport width and vh viewport height. 1vw is one percent of viewports's width and 1vh is 1 percent of viewport height. A simple usage is as follows. 
font-size: 3.4vw ; /*3.4% of viewport width*/
When only vw is used font scale only when width is changed and when only vh is used font scale only with height. So it is a good idea to use combination of vh and vw. CSS calc() function can add both of them. 
font-size: calc(3.4vw + 3vh) ;
It is important to remember that viewport height or width does not include the dimension of both horizontal or vertical sidebars. A responsive font example is as follows. 
<!DOCTYPE html>
<html>
<head>
    <title>Auto Scale Font Size</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .fitText{
            font-family: verdana;
            font-size: calc(3.4vw + 3vh) ;
        }
    </style>
</head>
<body>
    <div class="fitText">
        The quick brown fox jumps over the lazy dog.
    </div>
</body>
</html>
responsive font size scaling css


imgae