How to create responsive typography with CSS?

To create responsive typography with CSS, the code is as follows −

Example

 Live Demo

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<style>
   h1 {
      font-size: 10vw;
   }
   p {
      font-size: 5vw;
   }
</style>
</head>
<body>
<h1>Responsive Text Example</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, rerum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, necessitatibus officiis hic est in nobis!
</p>
</body>
</html>

Output

The following output will be produced by the above code −

On resizing the screen −

Updated on: 07-May-2020

267 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements