How TO - Responsive Text

❮ Previous Next ❯

Learn how to create responsive typography with CSS.

Hello World

Resize the browser window to see how the font size scales.

Try it Yourself »

Responsive Font Size

The text size can be set with a vw unit, which means the "viewport width".

That way the text size will follow the size of the browser window:

Example

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

Try it Yourself »

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Change Font Size With Media Queries

You could also use media queries to change the font size of an element on specific screen sizes:

Variable Font Size.

Example

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

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

Try it Yourself »

Tip: Go to our CSS Font Tutorial to learn more about fonts.

To learn more about media queries, read our CSS Media Queries Tutorial.

❮ Previous Next ❯