Open In App

How to set font size based on window size using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

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. 

html




<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. 

html




<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:

 



Last Updated : 21 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads