How to set font size based on window size using JavaScript ?
Last Updated :
25 Jul, 2024
Improve
Given an HTML document and the task is to change the font-size based on the size of the window with the help of JavaScript.
Approach 1:
- First convert the document element font sizes to em or % by using a function.
- Call this function on every resize of the window. It will change the font size based on window size.
Example: This example implements the above approach.
<h1 id="h1" style="color: green">
GeeksForGeeks
</h1>
<p id="GFG_UP" style="font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var h1 = document.getElementById('h1');
up.innerHTML = "Resize the window to change"
+ "the font-size based on window-size";
h1.setFont = function (font) {
var size = this.offsetWidth,
font_size = size * font;
this.style.fontSize = font_size + '%';
return this
};
h1.setFont(0.50);
window.onresize = function () {
h1.setFont(0.50);
}
</script>
Output:
Approach 2: Use vw(viewport) unit with the font-size to convert the font-size with respect to the viewport.
Example: This example implements the viewport approach.
<h1 style="color: green; font-size: 5vw;">
GeeksForGeeks
</h1>
<p id="GFG_UP" style="font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
up.innerHTML = "Resize the window to change"
+ "the font-size based on window-size";
</script>
Output:
