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

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

Last Updated : 25 Jul, 2024

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:

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

P

PranchalKatiyar

Improve

Article Tags :

Similar Reads

How to detect when the window size is resized using JavaScript ?

Sometimes when we develop our site, we want to detect the size of the window, In this article, we are going to learn how to detect when the window size is resized using JavaScriptThe window resize event occurs whenever the size of the browser window gets changed. We can listen to the resize event in

How to change font-weight of a text using JavaScript ?

In this article, we will set the font-weight of a text dynamically using JavaScript. Ti change the font weight dynamically, we use HTML DOM Style fontWeight property. Syntax: object.style.fontWeight = "value" Property Values: normal: The font weight is the default value.lighter: The font weight is t

How to get the Width of Scroll bar using JavaScript?

Given an HTML document, the task is to get the width of the scrollbar using JavaScript. Approach:Create an element (div) containing a scrollbar.OffsetWidth defines the width of an element + scrollbar width.ClientWidth defines the width of an element.So scrollbar can be defined as width = offsetWidth

How to Change Font Size using drop-down List in JavaScript ?

To change or set a font size for certain text, the fontSize property needs to be changed. The fontSize property sets or returns a list of fontSize names for text in an element.CSS font-size property is used to specify the font's height and size. It affects the size of an element's text. It has a med

Cross-browser window resize event using JavaScript/jQuery

The resize() method is an inbuilt method in jQuery that is used when the browser window changes its size. The resize() method triggers the resize event or attaches a function to run when a resize event occurs. jQuery has a built-in method for window resizing events. Syntax: $(selector).resize(functi

How to get the image size (height & width) using JavaScript?

To get the size of an image (height and width), Element.clientHeight and Element.clientWidth properties are used. Element.clientHeight: We can access the inner height of an element with this property. This height includes the padding but not the margin and border. Element.clientWidth: We can access

How to find the width of a div using vanilla JavaScript?

To measure the width of aÂ divÂ element we will utilize theÂ offsetWidthÂ property of JavaScript. This property of JavaScript returns an integer representing the layout width of an element and is measured in pixels. Below are the different approaches to finding the width of a div using vanilla JavaScrip

How to calculate Width and Height of the Window using JavaScript ?

In this article, we will know to calculate the width & the height of the window using Javascript. Given an HTML document that is running on a Window & we need to find the height and width of the window. The Window innerWidth property is used for returning the width of a windowâ€™s content area

How to wait resize end event and then perform an action using JavaScript ?

When we resize the browser window, the "resize" event is fired continuously, multiple times while resizing. We want the "resize" event to only be fired once we are done resizing.Prerequisite: To solve this problem we use two functions: setTimeout() functionclearTimeOut() functionExample: We will use

How to change font style using drop-down list in JavaScript ?

To change or set a font style for certain text, the fontFamily CSS property needs to be changed. The fontFamily property sets or returns a list of font-family names for text in an element. Syntax: object.style.fontFamily = "font" To change the font style by option dropdown: The font values can be pa