How to create responsive typography with CSS?

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


 Live Demo

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


The following output will be produced by the above code −

On resizing the screen −