How to set font size based on window size using JavaScript ? Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like 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: Comment More infoAdvertise with us Next Article How to set font size based on window size using JavaScript ? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions 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 3 min read 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 1 min read 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 3 min read 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 2 min read 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 2 min read 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 2 min read 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 2 min read 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 2 min read How to make font-size that expands when we resize the window using jQuery ? In this article, we will learn how to increase or decrease the font-size of elements in HTML when the window is resized using jQuery. This can be used in situations where the font size has to be responsive according to the width of the browser window.Approach: We will be using the jQuery css(), widt 2 min read Allow users to change font size of a webpage using JavaScript If you have seen some websites, especially some Indian government portals, you would have noticed three small buttons at the top rightmost corner of the page looking something like this: -A A A+. These buttons generally allow website users to change the font size of the entire page or a certain port 3 min read Like