How to change font size depending on width of container?

03 Aug, 2021
There are various ways of putting some text in a container and having some size to fill that container.There are different methods such as using CSS and jQuery which are explained below.
Using CSS property (Viewport width): The vw is a CSS property, to create responsive typography in the HTML file. The viewport is a browser window size. The “text-size” can be set with a “vw” units and you can find an exact number where the text pretty closely fits the container and doesn’t break as you resize the browser window.
1vw = 1% of viewport width. If the viewport is 100cm wide, 1vw is 10cm.
Example:
<!DOCTYPE html><html lang="en" dir="ltr">  <head>    <meta charset="utf-8">    <title>        How to change font size         depending on the width         of container?    </title>      <style>        h1 {            font-size: 8vw;            color: green;            font-weight: bold;        }          p {            font-size: 3vw;        }    </style></head>  <body>    <h1>Geeks for Geeks</h1>      <p>        Resize the browser window         to see how the font size         changes.    </p></body>  </html>
Output:
On Desktop:
On iPad:
Using CSS property (Media Queries): You can also use media queries to change the font size of an element on specific screen sizes. The @media rule, which makes it possible to define different style rules for different media types.
Example:
<!DOCTYPE html><html lang="en" dir="ltr">  <head>    <meta charset="utf-8">    <title>        How to change font size         depending on width of         container?    </title>          <style>        h1 {            color: green;        }          @media screen and (min-width: 601px) {            h1 {                font-size: 80px;            }              p {                font-size: 40px;            }        }          @media screen and (max-width: 600px) {            h1 {                font-size: 40px;            }              p {                font-size: 20px;            }        }    </style></head>  <body>    <h1>Geeks for Geeks</h1>      <p>        Set the <em>font-size</em> of "h1"         to "40px" and <em>paragraph</em> to        "20px", when the window's width is        "600px" wide or less and when it         is "601px" or wider, set the         <em>font-size</em> to "80px" and        <em>paragraph</em> to "40px".         Resize the browser window to         see the effect.    </p></body>  </html>
Output:
On Desktop:
On iPad:
Using FitText jQuery plugin: There is a jquery plugin that can make font-sizes flexible on the responsive layout, namely FitText. For instance, one can use the plugin to do scalable text sizes with respect to the container’s width.
Example:
<!DOCTYPE html><html lang="en" dir="ltr">  <head>    <meta charset="utf-8">    <title>H        ow to change font size         depending on width of c        ontainer?    </title>          <style>        h1 {            color: green;        }    </style></head>  <body>    <h1>Geeks for Geeks</h1>      <p>        Resize the browser window         to see how the font size         scales.    </p>      <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/textFit.js">    </script>          <script type="text/javascript">        textFit(document.querySelector("h1"));    </script></body>  </html>
Output:
On Desktop:
On iPad:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)