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:
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.
1<body>
2 <p class="responsive">Lorem. . .</p>
3 <p class="original">. . .</p>
4</body>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.
