How to change font size depending on width of container?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

full-stack-img




My Personal Notes arrow_drop_up

Recommended Posts: