Open In App

How to Create a Responsive Text using CSS ?

Last Updated : 27 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

This article will show you how to create responsive text with HTML and CSS. Responsive text means the text size will change in different screen sizes.

We can create Responsive Text using CSS Media Query or using viewport width (vw).

Example 1: In this example, we will create a responsive text using CSS Media Query.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <title>Responsive Text Example</title>
 
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            text-align: center;
        }
 
        .container {
            width: 60%;
            margin: auto;
        }
 
        h1 {
            color: green;
            font-size: 40px;
        }
 
        p {
            font-size: 28px;
        }
 
        @media (max-width: 768px) {
            h1 {
                font-size: 30px;
            }
 
            p {
                font-size: 20px;
            }
        }
 
        @media (max-width: 576px) {
            h1 {
                font-size: 20px;
            }
 
            p {
                font-size: 12px;
            }
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
 
        <p>
            A Computer Science portal for geeks. It contains
            well written, well thought and well explained
            computer science and programming articles, ...
        </p>
    </div>
</body>
 
</html>
 






                        










Output:


responsive-font


Example 2: In this example, we will create a responsive text using “viewport width” (set font size in vw).




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


 


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content=


        "width=device-width, initial-scale=1.0">


 


    <title>Responsive Text Example</title>


 


    <style>


        body {


            font-family: 'Arial', sans-serif;


            margin: 0;


            padding: 0;


            text-align: center;


        }


 


        .container {


            width: 60%;


            margin: auto;


        }


 


        h1 {


            color: green;


            font-size: 5vw;


        }


 


        p {


            font-size: 2vw;


        }


    </style>


</head>


 


<body>


    <div class="container">


        <h1>GeeksforGeeks</h1>


 


        <p>


            A Computer Science portal for geeks. It contains


            well written, well thought and well explained


            computer science and programming articles, ...


        </p>


    </div>


</body>


 


</html>



















                        







                        










Output:


responsive-font-2




                                    


                                                                        

                                        

                                            

                                                

                                                    
V

        

            
        

        

                                                

                                                

                                                    vkash8574                                                

                                            

                                            

            
                                        

                                        

                                            
    

        
        
    
                                            

                                                
                                                
                                            

                                            

                                            Improve
                                                
                                            

                                        

                                    



                            

                            
 
                                

                                    
                                        Next Article
                                        
                                    
                                    
                                    

                                        How to Create Responsive Sidebar using HTML & CSS ?
                                    

                                

                                                        

                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
  
                        

                                                

                        
                                                    

                                
Similar Reads

                                

                                    
        
            

                
Primer CSS Typography Responsive Text Alignment

                
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, an

            

            
            

                
                2 min read
            

        
    
        
            

                
How to create long shadow of text without using text-shadow in HTML and CSS ?

                
Shadows are really a nice way to give depth and 3-D look to any text. Generally, we use text-shadow to give shadow to the text but this shadow is short and to create long shadow (shadow in which text is visible like that of reflection) we have to use before selector and skew function. Approach: The approach is to use a skew to create tilted text fi

            

            
            

                
                2 min read
            

        
    
        
            

                
How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?

                
With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a responsive image gallery using HTML, CSS, jQuery, and Bootstrap. Features or Functionalities to implement: Responsive imagesResponsive Grid SystemImage viewer Prerequisites: Ba

            

            
            

                
                3 min read
            

        
    
        
            

                
How to create responsive stacked cards hover effect using CSS ?

                
Introduction: Cards are a very important part of any website. It is used to display some important information in short to viewers. In this article, we will create responsive stackend cards hover effect using HTML and CSS. In order to achieve a multi-layer stacking effect, you have to follow certain steps which are given below. Note: Through hover

            

            
            

                
                6 min read
            

        
    
        
            

                
Create A Responsive Navbar with Icons using HTML CSS and JavaScript

                
The navigation bar, or Navbar is an essential component in modern web design. It allows users to navigate through a website easily. Adding icons to the navbar is not only enhances visual appeal but also improves user experience. The Responsive Navigation bar means the Navbar elements are visible on all sizes of devices i.e. in mobile devices, the n

            

            
            

                
                2 min read
            

        
    
        
            

                
How to create Responsive Floating Elements using CSS ?

                
The Responsive Floating Elements are useful for adaptable layouts on different devices. It ensures a seamless user experience by adjusting the size and arrangement of cards based on the screen size. The float property is employed to arrange the cards horizontally, making them responsive on various devices. PreviewApproachCreate the basic structure

            

            
            

                
                3 min read
            

        
    
        
            

                
How to create a Responsive Inline Form using CSS ?

                
When the browser window is resized, the labels and inputs will stack on top of each other for smaller screens. To create a responsive inline form using CSS, use a container with flexible styling, such as Flexbox or Grid, to arrange form elements horizontally. Utilize media queries to adjust the layout for smaller screens, ensuring a user-friendly e

            

            
            

                
                3 min read
            

        
    
        
            

                
How to create Responsive Profile Card using HTML and CSS ?

                
In this article, we are going to create a profile card from where a user can check out the basic details of other users and connect with them through different handles as well as message the user. Approach:Set up HTML with a container div containing an image and content sections.Style the container, user image, and content sections with appropriate

            

            
            

                
                5 min read
            

        
    
        
            

                
How to create Responsive iFrames using CSS ?

                
An iframe, or inline frame, is an HTML element used to embed another document or webpage within the current document. Responsive iframes can be achieved by defining the aspect ratio, which refers to the proportional relationship between the width and height of an element. To maintain the aspect ratio we will use padding-top Property. SyntaxTo calcu

            

            
            

                
                4 min read
            

        
    
        
            

                
How to Create Responsive Sidebar using HTML & CSS ?

                
We will create a responsive sidebar which is created using HTML and CSS. The responsive sidebar will be interactive for small devices also. ApproachCreate HTML and CSS files. After getting the boiler plate code title has been changed as Responsive sidebar.CSS File has been linked to HTML using link tag within head tag.Create a div with the class na

            

            
            

                
                2 min read
            

        
                                    

                                                                    
                                                            

                        

                        

                                                            

                                    
Article Tags : 

                                    
                                                                            
                                                                    

                                                                                

                                                

                                

                                    
                                                                    

                            


                        

                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                




	
	
	

	
	

	
	    

	
	

	
	



                
        

    

    

        

            

            

        

    















	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox