How TO - Responsive Text
Learn how to create responsive typography with CSS.
Hello World
Resize the browser window to see how the font size scales.
Responsive Font Size
The text size can be set with avw 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 »<p style="font-size:2vw;">Resize the browser window to see how the font size scales.</p>
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 »@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;
}
}
Tip:Go to our CSS Font Tutorial to learn more about fonts.
To learn more about media queries, read ourCSS Media Queries Tutorial.
