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:
Example
Try this code »<!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:
