WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Scale Font Size Based on the Viewport Width Using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS vw Unit

You can simply set the value of the font-size property in vw (viewport width) units to make it responsive, i.e. scaling the font size based on the width of the viewport.

Let's try out an example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Font Scaling Based on Width of the Viewport</title>
<style>
    h1{
        font-size: 2em; /* fallback value */
        font-size: 6vw;
    }
</style>
</head>
<body>
    <h1>This is a Responsive Heading</h1>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties