Skip to content
Related Articles

Related Articles

Improve Article

How to change font size depending on width of container?

  • Difficulty Level : Basic
  • Last Updated : 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:
    Font size on Desktop
  • On iPad:
    Font size 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:
    Font scale on desktop using media query
  • On iPad:
    Font scale on ipad using media query

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=
    </script>
      
    <script type="text/javascript">
        textFit(document.querySelector("h1"));
    </script>
</body>
  
</html>

Output:

  • On Desktop:
    Scale font-size using JQuery Plugin
  • On iPad:
    Scale font-size using JQuery plugin

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :