Skip to main content

Font-Size at Smaller Resolutions

07-06-11 Ryan Buttrey

Why it’s important to increase the text size of a responsive site at smaller resolutions.

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.

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development