How to Create Responsive Text with HTML and CSS

Besides images, we also need to talk about typography when it comes to responsive design.

You should never set a fixed size for your fonts if the webpage is intended to be responsive. The font size suitable for large screens might not be appropriate for your smartphone, and the font size that is appropriate for your smartphone might be difficult to see on the desktop.

One common solution for this issue is to use media queries:

css

1h1 {
2  font-size: 2rem;
3}
4
5@media (min-width: 640px) {
6  h1 {
7    font-size: 4rem;
8  }
9}
10
11/* . . . */

But then, we face the same problem as before, there are too many breakpoints we need to create. Alternatively, you can define the font size using viewport relative units, letting the browser choose the best font size.

html

1<body>
2  <p class="responsive">Lorem. . .</p>
3  <p class="original">. . .</p>
4</body>

css

1.responsive {
2  font-size: 5vw;
3}

This method, however, will take away the user's ability to zoom texts in or out because the font size is always relative to the viewport.

To fix this, you can use the calc() function to add two values together. If you add vw to a fixed value (em or rem), then the texts will be zoomable.

css

1.responsive {
2  font-size: calc(2vw + 1em);
3}

Now, the texts will be responsive and zoomable at the same time.