How to create: Responsive text

Responsive font size

Text size can be vw Unit setting, which means 'viewport width'.

So, the text size will follow the size of the browser window:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Adjust the size of the browser window to see how the font size scales.</p>

Try It Yourself

Note:The viewport is the size of the browser window.1vw = 1% of the viewport width. If the viewport width is 50 centimeters, then 1vw For 0.5 centimeters.

Change font size using media queries

You can also use media queries to change the font size of elements at specific screen sizes:

View the effect

/* If the screen width is 601px or larger, set the <div> font-size to 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* If the screen width is 600px or smaller, set the <div> font-size to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Try It Yourself

Related Pages

Tutorial:CSS Font

Tutorial:CSS Media Query