As mobile devices shrink, real estate on the page becomes more and more precious. Unnecessary images go away. Less important elements move to the bottom of the site. The logo may get a little smaller. The important images may shrink down a bit. Etc, etc. etc. Something, however, that is very tempting to do is reduce the font size. Everything else shrinks. But text is different.
The words on the page are the reason someone is on your site to begin with. I know, your site may be ridiculously pretty and you think that everyone wants to look at and enjoy your beautiful pictures, but the visitors that really matter are trying to read what you have to say. If it’s not easy to read, it’s not going to be read.
As your site responds to smaller and smaller devices, the font-size has to increase. Using a simple media query will accomplish this fairly quickly with a few lines of CSS. Take this post you are reading, for example. Try resizing your browser and notice what happens. As your browser goes from the largest size (1024px) to a smaller size, the text increases. Here’s the CSS that makes it happen:
.content section article p {
font-size: .8em;
}
@media screen and (max-width: 1023px) {
.content section article p {
font-size: 1.2em;
}
}
Now, text doesn’t need to universally grow across the board as the browser gets smaller. Just be smart about it. The important things—like the navigation and the main copy on the site—may be appropriate to stay the same, but it definitely doesn’t make sense to get any smaller.
More and more people are visiting your site on their mobile devices. As you create your site to adapt to visitors’ devices, not only think about how they are going to view the site, but how they are going to read the site.
